最近找工作階段，總結了不少前人的面經，總想整理的特別特別好再發出來，但是發現如果一直等等等的話，就不知道等到猴年馬月了，先發一些吧，持續更新！！！

答案自己去整理吧，整理的過程也是學習的過程~~~

格式沒有統一看著很尷尬啊，以後有時間再弄吧emmm

基礎

簡單介紹一下自己，為什麼選擇做前端？

介紹下你最近的專案？

說出你覺得自己身上最優秀的能力？

說出你未來的規劃？

你最近有沒有什麼想要學習的技術？

你有什麼要問我的？

HTML、CSS篇以及佈局相關

• 說下你常用的幾種佈局方式，集中往盒模型、flex佈局說(至於grid佈局，這個我看過沒有用到過)
• position的值有哪些？
• css選擇器有哪些？選擇器的優先順序？
• CSS屬性選擇器和偽類選擇器的優先順序?
• 使用css實現一個持續的動畫效果
• animate和translate有沒有用過，一些常見的屬性說下？
• CSS實現寬度自適應100%，寬高16:9的比例的矩形。
• 如何實現左邊兩欄一定比例，左欄高度隨右欄高度自適應？
• css有哪些垂直水平居中方式？
• 右邊寬度固定，左邊自適應怎麼佈局？
• Flex佈局用的多嗎？
• 移動端適配怎麼做的？
• 你用到了Flex，請問flex怎麼設定垂直水平居中？

JavaScript篇(重要)

• 變數提升遇到的一些簡單code題
• 說一下對閉包的理解，以及你在什麼場景下會用到閉包？
• 說一下你對原型與原型鏈的瞭解度，有幾種方式可以實現繼承，用原型實現繼承有什麼缺點，怎麼解決？
• iframe的缺點有哪些？ 
• Ajax的原生寫法
• 為什麼會有同源策略？
• 前端處理跨域有沒有遇到過，處理跨域的方式有哪幾種方式去解決
• 怎麼判斷兩個物件是否相等
• 程式碼實現一個物件的深拷貝
• 從傳送一個url地址到返回頁面，中間發生了什麼
• 說下工作中你做過的一些效能優化處理
•  js的基本型別有哪些？引用型別有哪些？null和undefined的區別。
•  如何判斷一個變數是Array型別？如何判斷一個變數是Number型別？（都不止一種）
• Object是引用型別嘛？引用型別和基本型別有什麼區別？哪個是存在堆哪一個是存在棧上面的？
• * JS常見的dom操作api
• * 解釋一下事件冒泡和事件捕獲
• * 事件委託（手寫例子），事件冒泡和捕獲，如何阻止冒泡？如何組織預設事件？
• * 對閉包的理解？什麼時候構成閉包？閉包的實現方法？閉包的優缺點？
• * this有哪些使用場景？跟C,Java中的this有什麼區別？如何改變this的值？
• * call，apply，bind
• * 顯示原型和隱式原型，手繪原型鏈，原型鏈是什麼？為什麼要有原型鏈
• * 建立物件的多種方式
• * 實現繼承的多種方式和優缺點
• * new 一個物件具體做了什麼
• * 手寫Ajax，XMLHttpRequest
• * 變數提升
• * 舉例說明一個匿名函式的典型用例
• * 指出JS的宿主物件和原生物件的區別，為什麼擴充套件JS內建物件不是好的做法？有哪些內建物件和內建函式？
• * attribute和property的區別
• * document load和document DOMContentLoaded兩個事件的區別
• * === 和 == , [] === [], undefined === undefined,[] == [], undefined == undefined
• * typeof能夠得到哪些值
• * 什麼是“use strict”,好處和壞處
• * 函式的作用域是什麼？js 的作用域有幾種？
• * JS如何實現過載和多型
• * 常用的陣列api，字串api
• * 原生事件繫結（跨瀏覽器），dom0和dom2的區別？
• * 給定一個元素獲取它相對於檢視視窗的座標
• * 如何實現圖片滾動懶載入
• * js 的字串型別有哪些方法？ 正則表示式的函式怎麼使用？
• * 深拷貝
• * 編寫一個通用的事件監聽函式
• * web端cookie的設定和獲取
• * setTimeout和promise的執行順序
• * JavaScript 的事件流模型都有什麼？
• * navigator物件，location和history
• * js的垃圾回收機制
• * 記憶體洩漏的原因和場景
• * DOM事件的繫結的幾種方式
• * DOM事件中target和currentTarget的區別
• * typeof 和 instanceof 區別，instanceof原理
• * js動畫和css3動畫比較
• * JavaScript 倒計時（setTimeout）
• * js處理異常
• * js的設計模式知道那些
• * 輪播圖的實現，以及輪播圖元件開發，輪播10000張圖片過程
• * websocket的工作原理和機制。
• * 手指點選可以觸控的螢幕時，是什麼事件？
• * 什麼是函式柯里化？以及說一下JS的API有哪些應用到了函式柯里化的實現？(函式柯里化一些瞭解，以及在函數語言程式設計的應用，最後說了一下JS中bind函式和陣列的reduce方法用到了函式柯里化。)
• * JS程式碼除錯

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

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

• 談一談 promise
• 如何實現一個promise，promise的原理，以及它的兩個引數是什麼？
• promise中第二個引數的reject中執行的方法和promise.catch()都是失敗執行的，分別這麼寫有什麼區別，什麼情況下會兩個都同時用到？
• 所有的 ES6 特性你都知道嗎？如果遇到一個東西不知道是 ES6 還是 ES5, 你該怎麼區分它
• es6的繼承和es5的繼承有什麼區別
• promise封裝ajax
• let const的優點
•  es6 generator 是什麼，async/await 實現原理
• ES6和node的commonjs模組化規範區別
• 箭頭函式，以及它的this
• map和set有沒有用過，如何實現一個數組去重，map資料結構有什麼優點？

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

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

1. Vue是如何實現雙向繫結的？看過Vue原始碼嗎？
2. 簡單闡述一下vue的生命週期
3. 如何實現一個自定義元件，不同元件之間如何通訊的？
4. 父子元件如何通訊的？
5. 前端路由有沒有用過，你在專案中怎麼實現路由的巢狀？
6. nextTick和Vuex兩個有沒有用過，分為什麼情況下用到？
7. Vue的響應式原理你知道是怎麼實現的嗎？你覺得訂閱者-釋出者模式和觀察者模式有區別嗎？有的話，說一下它們的區別。
8. CommonJS 中的 require/exports 和 ES6 中的 import/export 區別？

構建（工程化&模組化）

工程化

• 對webpack,gulp，grunt等有沒有了解?對比。
• webpack的入口檔案怎麼配置，多個入口怎麼分割。
• webpack的loader和plugins的區別
• gulp的具體使用。
• 前端工程化的理解、如何自己實現一個檔案打包，比如一個JS檔案裡同時又ES5 和ES6寫的程式碼，如何編譯相容他們

模組化

• 對AMD,CMD,CommonJS有沒有了解?
• 為什麼要模組化？不用的時候和用RequireJs的時候程式碼大概怎麼寫？
• 說說有哪些模組化的庫，有了解過模組化的發展的歷史嗎？
• 分別說說同步和非同步模組化的應用場景，說下AMD非同步模組化實現的原理？
• 如何將專案裡面的所有的require的模組語法換成import的ES6的語法？
• 使用模組化載入時，模組載入的順序是怎樣的，如果不知道，根據已有的知識，你覺得順序應該是怎麼樣的？

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

• http、https、以及websocket的區別
• http常見的狀態碼，400,401,403狀態碼分別代表什麼？
• 協商快取和強快取的區別
• 說下計算機網路的相關協議？
• HTTP協議頭含有哪些重要的部分，HTTP狀態碼
• 網路url輸入到輸出怎麼做？
• 效能優化為什麼要減少 HTTP 訪問次數？
• Http請求的過程與原理
• https（對是https）有幾次握手和揮手？https的原理。
• http有幾次揮手和握手？TLS的中文名？TLS在哪一網路層？
• TCP連線的特點，TCP連線如何保證安全可靠的？
• 為什麼TCP連線需要三次握手，兩次不可以嗎，為什麼
• 為什麼tcp要三次握手四次揮手？
• tcp的三次握手和四次揮手畫圖（當場畫寫ack 和 seq的值）？
• tcp與udp的區別
• get和post的區別？什麼情況下用到？
• http2 與http1 的區別？
• websocket
• 什麼是tcp流，什麼是http流
• babel是如何將es6程式碼編譯成es5的
• http2的持久連線和管線化
• 域名解析時是tcp還是udp
• 域名發散和域名收斂
• Post一個file的時候file放在哪的？
• HTTP Response的Header裡面都有些啥？

其他

• 正則表示式
• 前端渲染和後端渲染的優缺點
• 資料庫的四大特性，什麼是原子性，表的關係
• 你覺得前端體系應該是怎樣的？
• 一個靜態資源要上線，裡面有各種資源依賴，你如何平穩上線
• 如果要你去實現一個前端模板引擎，你會怎麼做
• 知道流媒體查詢嗎？
• SEO
• mysql 和 mongoDB 有什麼區別？
• restful的method解釋
• 資料庫知識、作業系統知識
• click在ios上有300ms延遲，原因及如何解決
• 移動端的適配，rem+媒體查詢/meta頭設定
• 移動端的手勢和事件；
• unicode，utf8，gbk編碼的瞭解，亂碼的解決

瀏覽器相關（相容性，跨域等等）

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

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

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

• rgba不支援IE8 解決：用opacity
• CSS3字首

1. -webkit- webkit渲染引擎 chrome/safari
2. -moz gecko引擎  firefox
3. -ms- trident渲染引擎 IE
4. -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屬性

1. .border-radius {
2. border-radius: 10px;
3. -webkit-border-radius: 10px;
4. -moz-border-radius: 10px;
5. background: #abcdef;
6. behavior: url(css/PIE.htc);
7. }

• 用css hack

1. IE6: _
2. IE7/7: *
3. IE7/Firefox: !important
4. IE7: *+
5. IE6/7/8: 9
6. IE8:

• :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問題，解決自定義方法

1. function parseISO8601(dateStringInRange) {
2. var isoExp = /^s*(d{4})-(dd)-(dd)s*$/,
3.  date = new Date(NaN), month,
4.  parts = isoExp.exec(dateStringInRange);
5. if(parts) {
6.  month = +parts[2];
7.  date.setFullYear(parts[1], month - 1, parts[3]);
8. if(month != date.getMonth() + 1) {
9.    date.setTime(NaN);
10. }
11. }
12. return date;
13. }

• 跨域，為什麼JS會對跨域做出限制
• 前端安全：xss，csrf...
• 瀏覽器怎麼載入頁面的？script指令碼阻塞有什麼解決方法？defer和async的區別？
• 瀏覽器強快取和協商快取
• 瀏覽器的全域性變數有哪些
• 瀏覽器同一時間能夠從一個域名下載多少資源
• 按需載入，不同頁面的元素判斷標準
• web儲存、cookies、localstroge等的使用和區別
• 瀏覽器的核心
• 如何實現快取機制？（從200快取，到cache到etag再到）
• 說一下200和304的理解和區別
• 什麼是預載入、懶載入
• 一個 XMLHttpRequest 例項有多少種狀態？
• dns解析原理，輸入網址後如何查詢伺服器
• 伺服器如何知道你？
• 瀏覽器渲染過程
• ie的某些相容性問題
• session
• 拖拽實現
• 拆解url的各部分