前端面試問題小聚集

問題集錦

年後回來到如今，大大小小的也去面了十幾家公司。騰訊、京東、阿里、頭條、shopee、百度、大豐收、深信服、平安科技等等，目前收到了其中5家的offer。在此分享一下經歷。

自我介紹

要有套路。如何引導面試官問你擅長的領域就看自我介紹了。學歷專業簡述、項目細說、興趣特長一句帶過。

react和vue你都使用過，說說它們的區別？

推薦這篇文章

vue的源碼看過沒？說說基本的實現？實現雙向綁定的原理？

即便沒有實際地閱讀過源碼，也要找別人分享的博客去了解其中的原理。

推薦博文

說說你理解的虛擬dom？diff算法是怎麼作的？

• 用JS對象模擬DOM樹
  
• 比較兩棵虛擬DOM樹的差別
  
• 把差別應用到真正的DOM樹上

推薦《深度剖析，如何實現一個Virtual Dom算法》

redux和vuex的區別？

摘取尤大的知乎回答：

Vuex 實際上是一個針對 Vue 特化的 Flux，主要是爲了配合 Vue 自己的響應式機制。固然吸收了一些 Redux 的特色，好比單狀態樹和便於測試和熱重載的 API，可是也選擇性的放棄了一些在 Vue 的場景下並不契合的特性，好比強制的 immutability（在保證了每一次狀態變化都能追蹤的狀況下強制的 immutability 帶來的收益就頗有限了）、爲了同構而設計得較爲繁瑣的 API、必須依賴第三方庫才能相對高效率地得到狀態樹的局部狀態等等（相比之下 Vuex 直接用 Vue 自己的計算屬性就能夠）

因此 Vue + Vuex 會更簡潔，也不須要考慮性能問題，代價就是 Vuex 只能和 Vue 配合。Vue + Redux 也不是不能夠，可是 Redux 做爲一個泛用的實現和 Vue 的契合度確定不如 Vuex。

說出你知道的全部選擇器權重？

important > 內聯 > ID > 類 > 標籤 | 僞類 | 屬性選擇 > 僞對象 > 繼承 > 通配符

說說你知道的全部僞類元素？（知道多少說多少）

LVHA（LV哈，簡單明瞭）、focus、before、after、checked、disabled、last-child、first-child......不少，就不一一列舉了。

你知道的父子選擇器和兄弟選擇器。

父子 > ， 兄弟 +

行內元素和塊級元素有哪些？區別是什麼？

不知道的童鞋前往前方

你理解的盒子模型？

必問，無非就是圍繞css3新屬性 box-sizing 的兩個值 content-box 和 border-box。

html5全部的新特性？以及對應屬性的兼容性（知道多少說多少）

兼容瀏覽器這個問題，知道一些經常使用API的就好，也不可能所有記住。像canvas這個兼容性仍是要知道的。

實現三列布局，左右固定寬度，中間響應式。兼容性儘可能好。

常見的兩列布局、三列布局實現要知道，知道2-3種實現方式爲上策。並且兼容性方面也要知道，好比用了flex的話就兼容IE10+。

BFC的理解。什麼狀況會產生BFC。

必問。什麼狀況下會產生BFC，怎麼處理等等。

你知道的ES6新特性？

這裏有個注意的點是，經常使用的一些API要知道基本的實現。好比你經常使用promise，相關的庫如bluebird是怎麼實現的。

你知道的全部前端安全知識？怎麼預防？怎麼測試？

前端安全XSS、CSRF、SQL注入。什麼場景會產生這些問題。預防和測試手段，測試手段比較少問。

你知道的http狀態碼？

必問。常見的狀態碼和說明必須知道。200、20四、20六、30一、30二、30四、30七、400、40一、40三、40四、500、503

304是怎麼產生的仍是要知道的。

你理解的cookie？跟session有什麼區別？http中設置cookie的頭部字段有哪些？

前兩個問題自行查閱哈，比較簡單。頭部字段的話有Cookie和Set-Cookie

你知道的http頭部？

通用首部字段、請求首部字段、響應首部字段。這個太多了，平時用到的一些熟悉就好。

Date、Upgrade、Connection、Authorization、Accept、Accept-Charset、Host、From、Referer、Location......

建議閱讀圖解HTTP。

緩存相關的頭部？

分爲強緩存、協商緩存去記會簡單點。

推薦博文

你知道的全部排序算法？手寫快排算法。

前端對基礎的數據結構和算法仍是要很是熟悉的。這個也常常會問到。

寫出全部你知道的git命令。

團隊協做方面，版本管理工具。

用ES3實現bind函數。

相似這種API的原理，好比new的過程、Object.create的實現、curry函數的實現也會常常碰到。推薦冴羽的深刻系列

js實現繼承的方式。

原型鏈、js實現繼承等相似基礎的問題都是必考的。這個仍是建議閱讀冴羽的深刻系列，整個系列閱讀下來有一個比較深入的概念。

使用promise模擬一個解決多級回調嵌套問題。

場景解決方案問題。這種方式出現的頻率仍是很高的。相似好比vue在不使用分頁的前提下如何處理海量數據。

平時開發用的工具。

前端經常使用的一些工具，例如抓包wireshark、fiddler，編碼工具vscode、sublime，調試工具瀏覽器控制檯等，webpack、gulp等等。webpack的原理要了解下。

項目開發流程。項目中有什麼比較複雜的難點。怎麼解決的。還有沒優化點。

自由發揮，針對性地突出本身擅長的領域。

平時開發中，有注意設計模式嗎？說說你知道的設計模式。

跪！！！可是被問的機率仍是蠻大的，須要瞭解一些基本的設計模式例如單例、工廠、迭代、裝飾者、代理等等。

寫在最後

還有其餘一些的問題在這裏就不一一列舉了。針對崗位所需的一些技能去發散，這類問題根據崗位要求而定。好比說京東手Q微信業務，對性能方面要求就很高，對CDN相關的技術也要去了解下。同一份簡歷不要海投，針對每個崗位要求，適當的改下關鍵字眼，可以提升面試機會哦，有面試機會就有了一切可能。

主要是想給正在找工做的小夥伴一個全局觀。文章並無詳細地給出每道題的答案，但基本都給出了其餘大神的參考文章啦。

找工做是一個煎熬的過程，有挫折，有打擊，固然少不了收穫。但願每一個求職者都能斬獲合心意的offer！