2019「寒冬」前端面試手冊

最近也在準備面試，就把前端面試中常考的知識點梳理了出來，爲了複習起來更方便，更有針對性，也但願可以幫到寒冬面試的一些朋友。本文包括 CSS，JS，ES6，瀏覽器，服務端與網絡，VUE，HTTP，webpack 和 算法 十個部分。

若是按照本文的思路來準備面試，您定會有所收穫。

1. CSS

一、怎麼實現三欄佈局？

• 浮動（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:0

三、盒模型

4. css單位

5. css選擇器

6. 層疊上下文

7. 常見頁面佈局？響應式佈局？

八、BFC

• 概念
• 如何觸發
• 怎麼應用（清除浮動）

9. css預處理器

通常回答 變量 / 嵌套 / 自動前綴 / 條件語句 / 循環語句

10. css3新特性

animation和transiton的相關屬性，animate和translate

display哪些取值

十一、相鄰的兩個inline-block節點爲何會出現間隔，該如何解決

十二、meta viewport 移動端適配

1三、CSS實現寬度自適應100%，寬高16:9的比例的矩形

1四、rem 佈局的優缺點

1五、畫三角形

1六、1px 邊框問題

二、JavaScript

一、數據類型的分類和判斷

二、原型、原型鏈、繼承、構造函數、實例

三、有幾種方式能夠實現繼承，用原型實現繼承有什麼缺點，解決辦法

四、做用域、做用域鏈、閉包

五、arguments 對象

六、Ajax的原生寫法

七、對象深拷貝、淺拷貝

八、圖片懶加載、預加載

九、實現頁面加載進度條

十、this關鍵字

十一、函數式編程

十二、手動實現parseInt

1三、爲何會有同源策略

1四、怎麼判斷兩個對象是否相等

1五、事件模型（事件委託、代理，如何讓事件先冒泡後捕獲）

1六、window 的 onload 事件和 domcontentloaded

1七、for...in 迭代和 for...of 有什麼區別

1八、函數柯里化

1九、call apply區別，原生實現bind

call，apply，bind 三者用法和區別：角度可爲參數、綁定規則（顯示綁定和強綁定），運行效率、運行狀況。

2一、async/await

2二、當即執行函數和使用場景

2三、設計模式(要求說出如何實現,應用,優缺點)/單例模式實現

2四、iframe的缺點有哪些

2五、數組問題

數組去重，數組經常使用方法，查找數組重複項，扁平化數組，按數組中各項和特定值差值排序

2六、BOM屬性對象方法

2七、服務端渲染

2八、垃圾回收機制

2九、eventloop，進程和線程，任務隊列

30、如何快速讓字符串變成已千爲精度的數字

3. ES6（web最新標準）

一、let、const 聲明

二、解構賦值

三、聲明類與繼承：class、extend

四、Promise 的使用與實現（原理）

五、generator（異步編程、yield、next()、await 、async）

六、箭頭函數 this 指向問題、拓展運算符

七、module

八、map 和 set 怎麼用，如何實現一個數組去重，map數據結構有什麼優勢？

九、ES6 怎麼編譯成 ES5，css-loader 原理,過程

十、ES6 轉成 ES5 的常見例子

使用 es5 實現 es6 的 class

4. 瀏覽器

一、輸入url到展現頁面過程發生了什麼？

二、重繪與迴流

重繪(repaint): 當元素樣式的改變不影響佈局時，瀏覽器將使用重繪對元素進行更新，此時因爲只須要UI層面的從新像素繪製，所以 損耗較少

迴流(reflow): 當元素的尺寸、結構或觸發某些屬性時，瀏覽器會從新渲染頁面，稱爲迴流。此時，瀏覽器須要從新通過計算，計算後還須要從新頁面佈局，所以是較重的操做。會觸發迴流的操做:

* 頁面初次渲染

* 瀏覽器窗口大小改變

* 元素尺寸、位置、內容發生改變

* 元素字體大小變化

* 添加或者刪除可見的 dom 元素

* 激活 CSS 僞類（例如：:hover）

* 查詢某些屬性或調用某些方法

* clientWidth、clientHeight、clientTop、clientLeft

* offsetWidth、offsetHeight、offsetTop、offsetLeft

* scrollWidth、scrollHeight、scrollTop、scrollLeft

* getComputedStyle()

* getBoundingClientRect()

* scrollTo()

迴流一定觸發重繪，重繪不必定觸發迴流。重繪的開銷較小，迴流的代價較高。

三、防抖與節流

四、cookies、session、sessionStorage、localStorage

五、瀏覽器內核

5. 服務端與網絡

一、常見狀態碼

二、緩存

200 From cache 和 200 ok

400,401,403狀態碼分別表明什麼

瀏覽器緩存

三、cookie, session, token

四、前端持久化的方式、區別

五、DNS是怎麼解析的

六、cdn

七、計算機網絡的相關協議

八、http/https/http2.0

九、get post區別

十、ajax、 axios庫

十一、tcp三次握手，四次揮手流程

十二、跨域

1三、前端安全XSS、CSRF

1四、websocket

1五、Http請求中的keep-alive有了解嗎

1六、網絡分層

1七、即時通訊，除了Ajax和websocket

1八、模塊化，commonJS，es6，cmd，amd

6. Vue

一、vue解決了什麼問題

二、MVVM的理解

三、如何實現一個自定義組件，不一樣組件之間如何通訊的？

四、nextTick

五、生命週期

六、虛擬dom的原理

七、雙向綁定的原理？數據劫持？

八、組件通訊

父->子

子->父

非父子組件

九、Proxy 相比於 defineProperty 的優點

十、watch computed區別

十一、virtual dom 原理實現

十二、vue-router(hash， HTML5 新增的 pushState

單頁應用，如何實現其路由功能---路由原理

vue-router如何作用戶登陸權限等

你在項目中怎麼實現路由的嵌套

1三、vuex的理解

前端性能優化

頁面DOM節點太多，會出現什麼問題？如何優化？

如何作性能監測

SEO和語義化

這個沒被問過

微信小程序

微信小程序和h5差別，若是有開發weex的經驗，可能會加上weex

7. git

• 基本操做

• git rebase vs git 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

一、打包原理

二、打包插件

三、webpack熱更新原理

四、優化構建速度

10. 算法

算法通常考得不難，不過基本每一次面試都會考到，常考的算法有：

一、排序算法

二、字符串中找出最長最多重複的子串

三、動態規劃，參見揹包問題

四、層次遍歷二叉樹

五、加油站問題(貪心算法)

六、二分法

七、單鏈表反轉

八、取1000個數字裏面的質數

九、找出數組中和爲給定值的兩個元素，如：[1, 2, 3, 4, 5]中找出和爲6的兩個元素。

十、線性順序存儲結構和鏈式存儲結構有什麼區別？以及優缺點