前言
嗯(emmmm)，這篇面經我兩週在SegmentFault上寫過啦，現在在掘金上再更新一下會不會有人想揍我：你看又來了又來了~因為答應了一位技術經理不能食言在掘金上也寫寫文章，所以如果看過的那就再看一次吧(我已經推遲一天啦，摸摸自己的小肚子，週末吃喝玩樂+學習了)，但是我記得要更新，你看是吧！作為一位去年才畢業的前端妹子來說，其實還是個技術小白啦，近幾年還是想在技術上能有一個很大的提升，奔著我追求的永無止境的前端大神之路，開啟了我一週左右的面經之路，大大小小的公司都有面，我就是奔著漲知識和積累經驗去的！！！
面試前需要注意的細節點
-
簡歷一定要寫好，這個不用多說啦
-
先想清楚你辭職想去的下一家的初衷是什麼，是加薪資、提升技術 or 換個工作環境。根據你自己的真實情況，投簡歷的時候針對性地看看公司的招聘要求，先看看符合度是多少，以免遇到要求極度不符合又沒有在商量好的前提下去面試了，最後的結果可能就是你還不錯，但是不符合我們公司的要求。
-
準備工作要做好，我是因為才去年畢業啦，所以集中準備在基礎知識和目前在用的VUE框架這兩塊啦，其他的知識點我平時在擼程式碼的時候都有在做筆記，所以都會掃一遍知識點，其他的你實際工作中沒有用到的但是比較流行的也不能忽略哦，瞭解一下或者臨時補一下，不要被問到沒有聽過有點尷尬的。面試完一家記得被面到不會的要 做筆記做筆記！！！就當做是學習吧，而且有時候真的受益匪淺~
-
規劃好你自己的面試時間，提前對要面試的公司做個簡單的背景瞭解。我是一個比較想把事情集中在一個時間點一起做的人，所以提完離職後專心面試，一天會安排2-3家面試，面試前看看你即將面試的公司規模大小背景簡單地瞭解一下，公司的面試流程一般是筆試 or 電話面試 (可無) —> 技術面(1-2輪) —> HR面 PS：我有兩家公司還去了複試，不要管為什麼，我就是去學習的。一直在鼓勵自己給自己加油
面試知識點
在面兩個大公司和一個小公司的時候，尤其是一個傳統行業的大型公司時，也有可能是我年限的問題，尤其注意基礎，無論是筆試還是技術主管面試的時候都集中在這塊，像原生JS、原生Ajax等，，(這些雖然我在工作中用的也不是很多ennnn,原生的是用的不多，但是我自己很注重)，說下面試碰到的吧(一些記不住了，想起來我可能也來不及補了，我懶哦~)。
HTML以及CSS篇，集中在CSS(CSS重要重要重要！)
-
說下你常用的幾種佈局方式
集中往盒模型、flex佈局說(至於grid佈局，這個我看過沒有用到過) -
實現水平居中的幾種方法？
-
animate和translate有沒有用過，一些常見的屬性說下？
-
CSS實現寬度自適應100%，寬高16:9的比例的矩形。
-
如何實現左邊兩欄一定比例，左欄高度隨右欄高度自適應？
JavaScript篇(重要)
- 變數提升遇到的一些簡單code題
- 說一下對閉包的理解，以及你在什麼場景下會用到閉包？
- 說一下你對原型與原型鏈的瞭解度，有幾種方式可以實現繼承，用原型實現繼承有什麼缺點，怎麼解決？
- iframe的缺點有哪些？
- Ajax的原生寫法
- 為什麼會有同源策略？
- 前端處理跨域有沒有遇到過，處理跨域的方式有哪幾種方式去解決
- 怎麼判斷兩個物件是否相等
- 程式碼實現一個物件的深拷貝
- 從傳送一個url地址到返回頁面，中間發生了什麼
- 說下工作中你做過的一些效能優化處理
ES6篇(引導篇，相對重要)
這塊面試官主要是問你哪塊用的比較多，你可以引導性地把面試官往你會的地方說
-
箭頭函式中的this指向誰？
-
如何實現一個promise，promise的原理，以及它的兩個引數是什麼？
-
promise中第二個引數的reject中執行的方法和promise.catch()都是失敗執行的，分別這麼寫有什麼區別，什麼情況下會兩個都同時用到？
-
map和set有沒有用過，如何實現一個陣列去重，map資料結構有什麼優點？
計算機網路篇(相對重要)
emmmm(之前我在sf上打的是ennnn，一個小夥伴給我糾結了一下那我這裡就糾正一哈),因為我專業是網路工程的，在華三和另一家公司面試的時候沒有被少問這些問題
PS:其實我內心很奔潰啊，大學我沒有很認真聽課噠，哭哭哭哭哭
- http、https、以及websocket的區別
- http常見的狀態碼，400,401,403狀態碼分別代表什麼？
- 協商快取和強快取的區別
- 說下計算機網路的相關協議？
瀏覽器相容性問題
這個重點說下(僅僅相對我自己來說哈),因為我的工作主要還在專注在web端，所以瀏覽器相容性的問題沒有少碰到過，因主要是相容IE8以上以及其他各個瀏覽器，這個就當做總結一下吧(在被問到這一塊的時候其實我是有加分的，因為回答的比較多2333)
-
使用meta標籤來調節瀏覽器的渲染方式，告訴瀏覽器用哪種核心渲染，360雙核瀏覽器就是在ie和chrome之間來回切換，現在使用meta標籤來強制使用最新的核心渲染頁面
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 複製程式碼 -
rgba不支援IE8 解決：用opacity
-
CSS3字首
-webkit- webkit渲染引擎 chrome/safari -moz gecko引擎 firefox -ms- trident渲染引擎 IE -o- opeck渲染引擎 opera 複製程式碼 -
過渡不相容IE8，可以用JS動畫實現
-
background-size不支援IE8，可以用img
-
使用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); } 複製程式碼 -
用css hack
IE6: _ IE7/7: * IE7/Firefox: !important IE7: *+ IE6/7/8: \9 IE8: \0 複製程式碼 -
IE浮動下margin產生的雙倍距離，通常使用float:left來實現，瀏覽器存在相容性問題，導致圖片與 後面的內容存在margin不一致的問題，解決方法就是給圖片新增diaplay:inline即可
-
ie8不支援nth-child，但支援first-child和last-child，可以通過轉化寫法來處理問題，span:nth-child(2)可以轉換為span:first-child+span,可以使ie8顯示該內容，last-child可以自定義一個class類相容ie8寫法
-
IE8下不支援HTML5屬性placeholder，解決問題的js外掛挺多的，常用的使用jquery.JPlaceholder.js外掛處理問題
-
識別HTML5元素，IE中可能無法識別nav/footer，使用html5shiv
-
火狐下表單阻止表單預設提交事件：在form中新增 action="javascript:",秒殺上述所有預設行為;
-
始終為按鈕button新增type屬性，IE下的預設型別是button，其他瀏覽器下的預設型別是submit
-
IE下刪除所有不必要的console語句，IE下當遇到console時不識別之後報錯，程式碼不會執行，或者全域性自定義一個window.console方法
-
IE瀏覽器下由於引數過長導致通過GET請求下載檔案方法報錯，解決改為POST請求
-
IE瀏覽器下iframe彈窗中輸入框游標丟失（無法輸入）問題，解決清一下frame
-
相容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啦，其實也不是精通，因為邊學邊開發，主要是實踐的專案不是特別複雜，不過常見的一些坑點還是有遇到的啦，這個是看你會的框架問相應的知識點
-
簡單闡述一下vue的生命週期
-
如何實現一個自定義元件，不同元件之間如何通訊的？
-
父子元件如何通訊的？
-
前端路由有沒有用過，你在專案中怎麼實現路由的巢狀？
-
nextTick和Vuex兩個有沒有用過，分為什麼情況下用到？
-
Vue的響應式原理你知道是怎麼實現的嗎？你覺得訂閱者-釋出者模式和觀察者模式有區別嗎？有的話，說一下它們的區別。
構建相關
因為專案還在前後端未分離的時候，我研究的gulp比較多，像grunt、fis3也有了解過，webpack打包工具在用vue的時候肯定也接觸到啦，但是研究不深，只能算入門階級(別吐槽，實踐確實不多)，所以我就直接很誠實地和麵試官說了，面試官好像也能理解也就沒有這麼問(心裡暗自開心哈哈哈哈)，不過我覺得還是有必要都去熟悉或者實踐一下，多知道一點不會死噠！
Other
有一些技術主管會考量一下你除了前端之外的技術能力，例如你熟悉的後端語言，sql會不會，還有人問我Linux命令會不會的(我內心:不會不會不會====),哈哈哈，不過node多多少少都有在用，這個也是前端應該要會的啦(but技術小白我不會，只是用到一點點~)
PS：對啦，忘記說啦，還有版本控制工具svn和git，大部分會問你git會不會，這個用了github的肯定都會啦，我之前公司程式碼的控制工具都是svn啦，不過git我現在也很自信地說會啦，畢竟入職一週了唉唉唉~
最後
把面試當做學習，這個過程你會收益很大。自己也拿到了幾家還不錯的offer，最後選擇了我比較滿意的一家公司，我並沒有特別在意薪資這塊，都是綜合考慮的一個結果啦！前端知識很雜，可能實際工作中用到的技術，像框架都是跟著公司的要求走的，像我最近也在看React啦，Vue和React都對比著再學習，不要問我為什麼沒有在看Angular(懶懶懶),因為新公司說是偏向於React，所以最重要的還是更看重基礎知識的積累吧，當然，開心最重要~
最後的最後，說明一下，知識點是自己面試的時候被問到噠，參考參考，當然能幫助到一些人我已經很開心啦，我還是懶沒有附上答案，所以還有小心心支援我這個前端菇涼嗎
