最近也在準備面試，就把前端面試中常考的知識點梳理了出來，為了複習起來更方便，更有針對性，也希望能夠幫到寒冬面試的一些朋友。本文包括 CSS，JS，ES6，瀏覽器，服務端與網路，VUE，HTTP，webpack 和 演算法 十個部分。如果按照本文的思路來準備面試，您定會有所收穫。
1. CSS
1、怎麼實現三欄佈局？
- 浮動（float）
- 定位（position）
- flex 佈局
- table-cell
- 網格佈局
- bfc (set middle area overflow is hidden)
2. 垂直居中
個人覺得問這個的挺多
line-height: height absolute + transform 居中為什麼要使用 transform（為什麼不使用marginLeft / Top），這是一道重繪重排的問題。flex + align-items: center 我會對 flex 容器以及 flex 專案的每個 css 屬性都瞭解一遍，並且寫了一些小 demo。absolute + top:0 bottom:03、盒模型
4. css單位
5. css選擇器
6. 層疊上下文
7. 常見頁面佈局？響應式佈局？
8、BFC
- 概念
- 如何觸發
- 怎麼應用（清除浮動）
9. css前處理器
一般回答 變數 / 巢狀 / 自動字首 / 條件語句 / 迴圈語句
10. css3新特性
animation和transiton的相關屬性，animate和translate
display哪些取值
11、相鄰的兩個inline-block節點為什麼會出現間隔，該如何解決
12、meta viewport 移動端適配
13、CSS實現寬度自適應100%，寬高16:9的比例的矩形
14、rem 佈局的優缺點
15、畫三角形
16、1px 邊框問題
2、JavaScript
1、資料型別的分類和判斷
2、原型、原型鏈、繼承、建構函式、例項
3、有幾種方式可以實現繼承，用原型實現繼承有什麼缺點，解決辦法
4、作用域、作用域鏈、閉包
5、arguments 物件
6、Ajax的原生寫法
7、物件深拷貝、淺拷貝
8、圖片懶載入、預載入
9、實現頁面載入進度條
10、this關鍵字
11、函數語言程式設計
12、手動實現parseInt
13、為什麼會有同源策略
14、怎麼判斷兩個物件是否相等
15、事件模型（事件委託、代理，如何讓事件先冒泡後捕獲）
16、window 的 onload 事件和 domcontentloaded
17、for...in 迭代和 for...of 有什麼區別
18、函式柯里化
19、call apply區別，原生實現bind
call，apply，bind 三者用法和區別：角度可為引數、繫結規則（顯示繫結和強繫結），執行效率、執行情況。
21、async/await
22、立即執行函式和使用場景
23、設計模式(要求說出如何實現,應用,優缺點)/單例模式實現
24、iframe的缺點有哪些
25、陣列問題
陣列去重，陣列常用方法，查詢陣列重複項，扁平化陣列，按陣列中各項和特定值差值排序
26、BOM屬性物件方法
27、服務端渲染
28、垃圾回收機制
29、eventloop，程式和執行緒，任務佇列
30、如何快速讓字串變成已千為精度的數字
3. ES6（web最新標準）
1、let、const 宣告
2、解構賦值
3、宣告類與繼承：class、extend
4、Promise 的使用與實現（原理）
5、generator（非同步程式設計、yield、next()、await 、async）
6、箭頭函式 this 指向問題、擴充運算子
7、module
8、map 和 set 怎麼用，如何實現一個陣列去重，map資料結構有什麼優點？
9、ES6 怎麼編譯成 ES5，css-loader 原理,過程
10、ES6 轉成 ES5 的常見例子
使用 es5 實現 es6 的 class
4. 瀏覽器
1、輸入url到展示頁面過程發生了什麼？
2、重繪與迴流
重繪(repaint): 當元素樣式的改變不影響佈局時，瀏覽器將使用重繪對元素進行更新，此時由於只需要UI層面的重新畫素繪製，因此 損耗較少
迴流(reflow): 當元素的尺寸、結構或觸發某些屬性時，瀏覽器會重新渲染頁面，稱為迴流。此時，瀏覽器需要重新經過計算，計算後還需要重新頁面佈局，因此是較重的操作。會觸發迴流的操作:
* 頁面初次渲染
* 瀏覽器視窗大小改變
* 元素尺寸、位置、內容發生改變
* 元素字型大小變化
* 新增或者刪除可見的 dom 元素
* 啟用 CSS 偽類（例如：:hover）
* 查詢某些屬性或呼叫某些方法
* clientWidth、clientHeight、clientTop、clientLeft
* offsetWidth、offsetHeight、offsetTop、offsetLeft
* scrollWidth、scrollHeight、scrollTop、scrollLeft
* getComputedStyle()
* getBoundingClientRect()
* scrollTo()
迴流必定觸發重繪，重繪不一定觸發迴流。重繪的開銷較小，迴流的代價較高。
3、防抖與節流
4、cookies、session、sessionStorage、localStorage
5、瀏覽器核心
5. 服務端與網路
1、常見狀態碼
2、快取
200 From cache 和 200 ok
400,401,403狀態碼分別代表什麼
瀏覽器快取
3、cookie, session, token
4、前端持久化的方式、區別
5、DNS是怎麼解析的
6、cdn
7、計算機網路的相關協議
8、http/https/http2.0
9、get post區別
10、ajax、 axios庫
11、tcp三次握手，四次揮手流程
12、跨域
13、前端安全XSS、CSRF
14、websocket
15、Http請求中的keep-alive有了解嗎
16、網路分層
17、即時通訊，除了Ajax和websocket
18、模組化，commonJS，es6，cmd，amd
6. Vue
1、vue解決了什麼問題
2、MVVM的理解
3、如何實現一個自定義元件，不同元件之間如何通訊的？
4、nextTick
5、生命週期
6、虛擬dom的原理
7、雙向繫結的原理？資料劫持？
8、元件通訊
父->子
子->父
非父子元件
9、Proxy 相比於 defineProperty 的優勢
10、watch computed區別
11、virtual dom 原理實現
12、vue-router(hash， HTML5 新增的 pushState
單頁應用，如何實現其路由功能---路由原理
vue-router如何做使用者登入許可權等
你在專案中怎麼實現路由的巢狀
13、vuex的理解
前端效能優化
頁面DOM節點太多，會出現什麼問題？如何優化？
如何做效能監測
SEO和語義化
這個沒被問過
微信小程式
微信小程式和h5差異，如果有開發weex的經驗，可能會加上weex
7. git
- 基本操作
git rebasevsgit merge- git merge
- 記錄下合併動作 很多時候這種合併動作是垃圾資訊
- 不會修改原 commit ID
- 衝突只解決一次
- 分支看著不大整潔，但是能看出合併的先後順序
- 記錄了真實的 commit 情況，包括每個分支的詳情
- git rebase
- 改變當前分支 branch out 的位置
- 得到更簡潔的專案歷史
- 每個 commit 都需要解決衝突
- 修改所有 commit ID
回答時候沒有答出很多，這是後面總結，深刻發現日常做總結的必要性，一直覺得自己是瞭解的，等到總結時候才發現有一些 point 還是不清楚的。
- 修改 commit message
8. HTTP
1. 跨域
基本都被問同源策略以及引申到跨域來，一般我會說 CORS 以及 jsonp，CORS 會從簡單請求跟非簡單請求區分開，再講 options 請求的意義。
2. HTTP 報文
請求行 + 頭部資訊 + 空白行 + body 有被問到說空白行的意義，我一直以為就是純粹來標識 headers 的結束，但是面試官說不止這個功能，我後面看了HTTP 權威指南 也沒有找到，Stack Overflow 也沒找到。。。希望有人知道可以跟我說一下。不過有可能是我聽錯了題目，畢竟是電話面試。
3. cookie session
一般會問兩者的差別，以及引申到 sessionStorage, localStorage, cookie 區別
4. 從輸入 URL 到頁面載入全過程
一般我會答連結的大部分步驟，按照理解來，這裡面我被問到的點有：
- 快取，分為強快取、協議快取，一般會問到 304 的表現，以及再引申到 301 302 的區別，我會再說 307 的區別。
- 三次握手
- HTTPS 的工作原理
- CDN 的工作原理，以及重新整理快取的原理。
- 瀏覽器渲染的步驟
- 重繪重排的概念，以及最佳實踐。一直都知道應該用 transform 代替 margin，但是一被問原理，就不太清楚，查了資料是對 translate3d 的元素進行 GPU 加速。
- 會因為 JS 是單執行緒而問到阻塞的問題，引申到 async defer 等屬性。
- status code 有哪些，我們是嚴格按照 restful 的規範來設計介面，所以這個問題我一直覺得很簡單，但是被問到不少次。我記得趣頭條的筆試就有，我會把用過的按照 2xx(200, 201, 204, 206) 3xx(301, 302, 304, 307) 4xx(400, 401, 403, 405) 5xx(500, 502, 504) 來分類，我偶爾寫寫 rails，所以對對應的名詞都比較熟悉 貼一篇 list of rails status codes
- DNS 解析過程
5. xss，csrf
- xss 注入攻擊
- 轉義
- csrf (cross site request forgery)
- Get 請求無副作用
- cookie httponly
- cors （origin not *）
我是通過看 這篇文章 對安全有更多瞭解的，推薦一下。
6. sse( server sent event)
9. 打包工具 webpack
1、打包原理
2、打包外掛
3、webpack熱更新原理
4、優化構建速度
10. 演算法
演算法一般考得不難，不過基本每一次面試都會考到，常考的演算法有：
1、排序演算法
2、字串中找出最長最多重複的子串
3、動態規劃，參見揹包問題
4、層次遍歷二叉樹
5、加油站問題(貪心演算法)
6、二分法
7、單連結串列反轉
8、取1000個數字裡面的質數
9、找出陣列中和為給定值的兩個元素，如：[1, 2, 3, 4, 5]中找出和為6的兩個元素。
10、線性順序儲存結構和鏈式儲存結構有什麼區別？以及優缺點