畢業一年左右的前端妹子面經總結

前言

嗯(emmmm)，這篇面經我兩週在SegmentFault上寫過啦，如今在掘金上再更新一下會不會有人想揍我：你看又來了又來了~由於答應了一位技術經理不能食言在掘金上也寫寫文章，因此若是看過的那就再看一次吧(我已經推遲一天啦，摸摸本身的小肚子，週末吃喝玩樂+學習了)，可是我記得要更新，你看是吧！做爲一位去年才畢業的前端妹子來講，其實仍是個技術小白啦，近幾年仍是想在技術上能有一個很大的提高，奔着我追求的永無止境的前端大神之路，開啓了我一週左右的面經之路，大大小小的公司都有面，我就是奔着漲知識和積累經驗去的！！！

加起來差很少10家公司左右吧，成績本身也還挺滿意的，拿到了6家公司的offer，大小公司也都有，像大華、華三，可是最終綜合考慮的結果，去了一家本身面試體驗最好的公司，至少也是一家上市公司啦~

面試前須要注意的細節點

1. 簡歷必定要寫好，這個不用多說啦

2. 先想清楚你辭職想去的下一家的初衷是什麼，是加薪資、提高技術 or 換個工做環境。根據你本身的真實狀況，投簡歷的時候針對性地看看公司的招聘要求，先看看符合度是多少，以避免遇到要求極度不符合又沒有在商量好的前提下去面試了，最後的結果可能就是你還不錯，可是不符合咱們公司的要求。

3. 準備工做要作好，我是由於纔去年畢業啦，因此集中準備在基礎知識和目前在用的VUE框架這兩塊啦，其餘的知識點我平時在擼代碼的時候都有在作筆記，因此都會掃一遍知識點，其餘的你實際工做中沒有用到的可是比較流行的也不能忽略哦，瞭解一下或者臨時補一下，不要被問到沒有聽過有點尷尬的。面試完一家記得被面到不會的要 作筆記作筆記！！！就當作是學習吧，並且有時候真的受益不淺~

4. 規劃好你本身的面試時間，提早對要面試的公司作個簡單的背景瞭解。我是一個比較想把事情集中在一個時間點一塊兒作的人，因此提完離職後專心面試，一天會安排2-3家面試，面試前看看你即將面試的公司規模大小背景簡單地瞭解一下，公司的面試流程通常是筆試 or 電話面試 (可無) —> 技術面(1-2輪) —> HR面 PS：我有兩家公司還去了複試，不要管爲何，我就是去學習的。一直在鼓勵本身給本身加油

面試知識點

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

HTML以及CSS篇，集中在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數據結構有什麼優勢？

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

emmmm(以前我在sf上打的是ennnn，一個小夥伴給我糾結了一下那我這裏就糾正一哈),由於我專業是網絡工程的，在華三和另外一家公司面試的時候沒有被少問這些問題
PS:其實我心裏很奔潰啊，大學我沒有很認真聽課噠，哭哭哭哭哭

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打包工具在用vue的時候確定也接觸到啦，可是研究不深，只能算入門階級(別吐槽，實踐確實很少)，因此我就直接很誠實地和麪試官說了，面試官好像也能理解也就沒有這麼問(內心暗自開心哈哈哈哈)，不過我以爲仍是有必要都去熟悉或者實踐一下，多知道一點不會死噠！

Other

有一些技術主管會考量一下你除了前端以外的技術能力，例如你熟悉的後端語言，sql會不會，還有人問我Linux命令會不會的(我心裏:不會不會不會====),哈哈哈，不過node多多少少都有在用，這個也是前端應該要會的啦(but技術小白我不會，只是用到一點點~)
PS：對啦，忘記說啦，還有版本控制工具svn和git，大部分會問你git會不會，這個用了github的確定都會啦，我以前公司代碼的控制工具都是svn啦，不過git我如今也很自信地說會啦，畢竟入職一週了唉唉唉~

最後

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