【總結&&面試】畢業一年左右的前端妹子面經總結

前言

嗯ennnnnn，，，，懶癌症拖延的毛病，趁着最後一個上班日趕忙把最近一週的面試作個總結(雖然我下週一才入職)，做爲一位去年才畢業的前端妹子來講，其實仍是個技術小白啦，近幾年仍是想在技術上能有一個很大的提高，並且不是說金三銀四嘛(嚶嚶嚶，好像是真的)，因此在試水了兩家公司以後，開啓了我一週左右的面經之路，大大小小的公司都有面，我就是奔着漲知識和積累經驗去的！！！加起來差很少10家公司左右吧，成績本身也還挺滿意的，拿到了6家公司的offer，大小公司也都有，像大華、華三，可是最終綜合考慮的結果，去了一家本身面試體驗最好的公司，至少也是一家上市公司啦~

面試前須要注意的細節點

1. 簡歷必定要寫好，這個不用多說啦
2. 先想清楚你辭職想去的下一家的初衷是什麼，是加薪資、提高技術 or 換個工做環境。根據你本身的真實狀況，投簡歷的時候針對性地看看公司的招聘要求，先看看符合度是多少，以避免遇到要求極度不符合又沒有在商量的前提下去面試了，最後的結果可能就是你還不錯，可是不符合咱們公司的要求。
3. 準備工做要作好，我是由於纔去年畢業啦，因此集中準備在基礎知識和目前在用的VUE框架這兩塊啦，其餘的知識點我平時在擼代碼的時候都有在作筆記，因此都會掃一遍知識點，其餘的你實際工做中沒有用到的可是比較流行的也不能忽略哦，瞭解一下或者臨時補一下，不要被問到沒有聽過有點尷尬的。面試完一家記得被面到不會的要作筆記作筆記！！！！就當作是學習吧，並且有時候真的受益不淺~
4. 規劃好你本身的面試時間，提早要面試的公司作個簡單的背景瞭解。我是一個比較想把時間集中在一塊兒作的人，因此提完離職後專心面試，一天會安排2-3家面試，面試前看看你即將面試的公司規模大小背景簡單地瞭解一下，公司的面試流程通常是筆試 or 電話面試 (可無) —> 技術面(1-2輪) —> HR面 。

面試知識點

在面兩個大公司和一個小公司的時候，尤爲是一個傳統行業的大型公司時，也有多是我年限的問題，尤爲注意基礎，不管是筆試仍是技術主管面試的時候都集中在這塊，像原生JS、原生Ajax等，，(這些雖然我在工做中用的也不是不少ennnn,原生的是用的很少，可是我本身很注重)，說下面試碰到的吧(一些記不住了，想起來我補上哈~)。

HTML以及CSS篇，集中在CSS

1. 說下你經常使用的幾種佈局方式
   集中往盒模型、flex佈局說(至於grid佈局，這個我看過沒有用到過)
2. 實現水平居中的幾種方法？
3. animate和translate有沒有用過，一些常見的屬性說下？
4. CSS實現寬度自適應100%，寬高16:9的比例的矩形。
5. 如何實現左邊兩欄必定比例，左欄高度隨右欄高度自適應？

JavaScript篇(重要)

1. 變量提高遇到的一些簡單code題
2. 說一下對閉包的理解，以及你在什麼場景下會用到閉包？
3. 說一下你對原型與原型鏈的瞭解度，有幾種方式能夠實現繼承，用原型實現繼承有什麼缺點，怎麼解決？
4. iframe的缺點有哪些？
5. Ajax的原生寫法
6. 爲何會有同源策略？
7. 前端處理跨域有沒有遇到過，處理跨域的方式有哪幾種方式去解決
8. 怎麼判斷兩個對象是否相等
9. 代碼實現一個對象的深拷貝
10. 從發送一個url地址到返回頁面，中間發生了什麼
11. 說下工做中你作過的一些性能優化處理

ES6篇(引導篇，相對重要)

這塊面試官主要是問你哪塊用的比較多，你能夠引導性地把面試官往你會的地方說

1. 箭頭函數中的this指向誰？
2. 如何實現一個promise，promise的原理，以及它的兩個參數是什麼？
3. promise中第二個參數的reject中執行的方法和promise.catch()都是失敗執行的，分別這麼寫有什麼區別，什麼狀況下會兩個都同時用到？
4. map和set有沒有用過，如何實現一個數組去重，map數據結構有什麼優勢？

計算機網絡篇(相對重要)

ennnnn,由於我專業是網絡工程的，在華三和另外一家公司面試的時候沒有被少問這些問題

1. http、https、以及websocket的區別
2. http常見的狀態碼，400,401,403狀態碼分別表明什麼？
3. 協商緩存和強緩存的區別
4. 說下計算機網絡的相關協議？

瀏覽器兼容性問題

由於個人工做主要還在專一在web端，因此瀏覽器兼容性的問題沒有少碰到過，因主要是兼容IE8以上以及其餘各個瀏覽器，這個就當作總結一下吧(在被問到這一塊的時候其實我是有加分的，由於回答的比較多2333)

1. 使用meta標籤來調節瀏覽器的渲染方式，告訴瀏覽器用哪一種內核渲染，360雙核瀏覽器就是在ie和chrome之間來回切換，如今使用meta標籤來強制使用最新的內核渲染頁面

   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

2. rgba不支持IE8
   解決：用opacity

3. CSS3前綴

   -webkit- webkit渲染引擎  chrome/safari
   -moz gecko引擎    firefox
   -ms- trident渲染引擎 IE
   -o-    opeck渲染引擎 opera

4. 過渡不兼容IE8，能夠用JS動畫實現
5. background-size不支持IE8，能夠用img

6. 使用PIE.htc讓IE6/7/8支持CSS3部分屬性，像CSS3的border-radius，box-shadow，css backgrounds(-pie-background),Gradients,RGBA屬性

   .border-radius {
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   background: #abcdef;
   behavior: url(css/PIE.htc);
    }

7. 用css hack

   IE6: _
   IE7/7: *
   IE7/Firefox: !important
   IE7: *+
   IE6/7/8: \9
   IE8: \0

8. :IE浮動margin產生的雙倍距離,一般使用float:left來實現，瀏覽器存在兼容性問題，致使圖片與 後面的內容存在margin不一致的問題，解決方法就是給圖片添加diaplay:inline便可

9. ie8不支持nth-child，但支持first-child和last-child，能夠經過轉化寫法來處理問題，span:nth-child(2)能夠轉換爲span:first-child+span,可使ie8顯示該內容，last-child能夠自定義一個class類兼容ie8寫法
10. IE8下不支持HTML5屬性placeholder，解決問題的js插件挺多的，經常使用的使用jquery.JPlaceholder.js插件處理問題
11. 識別HTML5元素，IE中可能沒法識別nav/footer，使用html5shiv
12. 火狐下表單阻止表單默認提交事件：在form中添加 action="javascript:",秒殺上述全部默認行爲;
13. 始終爲按鈕button添加type屬性，IE下的默認類型是button，其餘瀏覽器下的默認類型是submit
14. IE下刪除全部沒必要要的console語句，IE下當遇到console時不識別以後報錯，代碼不會執行，或者全局自定義一個window.console方法
15. IE瀏覽器下因爲參數過長致使經過GET請求下載文件方法報錯，解決改成POST請求
16. IE瀏覽器下iframe彈窗中輸入框光標丟失（沒法輸入）問題，解決清一下frame

17. 兼容IE8 new Date()返回NaN問題，解決自定義方法

    function parseISO8601(dateStringInRange) {
        var isoExp = /^\s*(\d{4})-(\d\d)-(\d\d)\s*$/,
            date = new Date(NaN), month,
            parts = isoExp.exec(dateStringInRange);
    
        if(parts) {
            month = +parts[2];
            date.setFullYear(parts[1], month - 1, parts[3]);
            if(month != date.getMonth() + 1) {
                date.setTime(NaN);
            }
        }
        return date;
    }

Vue相關知識點 (框架之一重要)

由於我簡歷上主要寫的是會vue啦，其實也不是精通，由於邊學邊開發，主要是實踐的項目不是特別複雜，不過常見的一些坑點仍是有遇到的啦，這個是看你會的框架問相應的知識點

1. 簡單闡述一下vue的生命週期
2. 如何實現一個自定義組件，不一樣組件之間如何通訊的？
3. 父子組件如何通訊的？
4. 前端路由有沒有用過，你在項目中怎麼實現路由的嵌套？
5. nextTick和Vuex兩個有沒有用過，分爲何狀況下用到？
6. Vue的響應式原理你知道是怎麼實現的嗎？你以爲訂閱者-發佈者模式和觀察者模式有區別嗎？有的話，說一下它們的區別。

構建工具

由於項目還在先後端未分離的時候，我研究的gulp比較多，像grunt、fis3也有了解過，webpack還不是很熟(感受要GG)，因此這塊問的比較少，面試官也就沒有這麼問，不過我以爲仍是有必要去熟悉或者實踐一下一下

Other

有一些技術主管會考量一下你除了前端以外的技術能力，例如你熟悉的後端語言，sql會不會，還有人問我Linux命令會不會的(我心裏:不會不會不會====),不過node多多少少都有在用，這個也是前端應該要會的啦(but技術小白我不會，只是用到一點點~)

最後

把面試當作學習，這個過程你會收益很大。本身也拿到了幾家還不錯的offer，最後選擇了我比較滿意的一家公司，我並無特別在乎薪資這塊，都是綜合考慮的一個結果啦！前端知識很雜，可能實際工做中用到的技術，像框架都是跟着公司的要求走的，像我最近也在看React啦，Vue和React都對比着再學習，不要問我爲何沒有在看Angular(懶懶懶),由於新公司說是偏向於React，因此最重要的仍是更看重基礎知識的積累吧，固然，開心最重要~