一次有趣的面試經歷，當前端面試碰到後端面試官會發生什麼？

前言

金九銀十，又是一年跑路季。先介紹下我的狀況，一年半經驗，計算機專業的渣渣大專。憑着對前端的熱愛，基本天天都會抽點時間來學習，基礎還算能夠。其實上家公司呆着仍是挺舒服的，沒有加班，惟一很差就是不偏技術，業務也相對簡單。考慮到將來的職業發展，最終仍是選擇跳出這個溫馨圈。

9月中旬離職，在上週面試了有7家。其中一家是優居網，此次面試過程也是比較有趣的經歷，由於面試官基本不問前端的問題，有被毒打到。後面才瞭解到面試官是全棧偏後端的。因此這篇分享對於前端面試可能用處不大，小夥伴就當是看個熱鬧拓展知識。

一面

瀏覽器輸入url後會經歷什麼

這題也是老經典題目了，相信很多小夥伴也看過相關的文章。

大概過程是：

1. DNS解析ip
2. 根據ip對服務器發送鏈接請求
3. 三次握手，鏈接服務器
4. 數據傳輸
5. 四次揮手，斷開服務器（不必定會斷開鏈接，由於HTTP1.1中會複用TCP鏈接）
6. 瀏覽器解析數據
7. 並行構建DOM樹和CSSOM樹
8. 合成Render樹
9. 佈局
10. 繪製
11. 渲染層合成（展現內容在頁面上）。

面試過程當中可能有點緊張，後面頁面渲染那部分沒說出來。

https重定向

原題的描述是，爲何在瀏覽器上輸入http://www.baidu.com會跳轉到https下對應的域名，這樣作目的是什麼？

其實很簡單，跳轉是服務端作了重定向的處理，目的是爲了網站的安全性。

有幾種方式可讓網頁重定向

1. a標籤
2. location.href
3. window.open
4. 設置html的meta標籤

window.open有什麼弊端

window.open打開的網頁能夠經過window.opener屬性獲取到來源網站的window對象，或者經過document.referrer獲取到來源網站的地址。因此在使用window.open時，能夠把第三個參數設置爲noopener=yes,noreferrer=yes。

UTF-8和GBK的區別

這個扯了一下，沒答到點上。

正確答案：GBK包含所有中文字符；UTF-8則包含全世界全部國家須要用到的字符。UTF-8是國際編碼，它的通用性比較好，GBK是國家編碼，通用性比UTF-8差，不過UTF-8佔用的數據庫比GBK大。

一個請求由什麼組成

請求行（請求方法、URL、HTTP協議版本）、請求頭、請求體（post傳輸的數據）

瀏覽器緩存（強緩存、協商緩存）

大概說了強緩存使用的字段，使用緩存的過程。協商緩存的字段不太記得，模糊的說了下，比較重要的就是協商緩存的兩種策略，一種是根據文件修改時間對比，一種根據文件內容的哈希值來對比。

用過哪些http頭

content-type，以及一些自定義頭。工做中用到的廣泛就這些。

說下http2，以及它的應用場景

http2中新增「多路複用」的特性，基於「二進制分幀」把字節流數據分割成帶有編號的碎片傳輸，服務端接收到數據後，根據編號合成一個完整的數據。

應用場景沒想出來。

http3瞭解嗎

只瞭解到傳輸層是基於UDP協議。

https爲何比http安全，https加密過程

https比http安全是由於在傳輸數據時作了加密處理。

回答到瀏覽器生成隨機數給服務端構造對稱加密算法，而後是對稱加密和非對稱加密的配合使用，數據使用對稱加密，而對稱加密的密鑰使用非對稱加密。

在數據加密前，還有證書驗證的階段，忘記答上了。證書內的公鑰是用來加密隨機數發給服務端的。

對稱加密在工做中有哪些應用

工做中沒有應用過，可是知道AES對稱加密。

抓包工具是否能抓到https的數據，若是能抓到，安全又怎麼保證

能。由於是用戶主動進行操做，抓包工具能夠配置用戶信任的證書，因此數據能夠通過抓包工具被獲取。

jwt是什麼

jwt能夠用於驗證用戶身份信息，和傳統的token做用差很少。

傳統的token是服務端將用戶信息進行MD5處理髮送給客戶端，客戶端在請求時帶上token驗證。由於MD5是不可逆的，服務端須要去數據庫查詢相關用戶信息，再進行一次MD5，用該MD5和客戶端發來的MD5進行對比。

而jwt是不須要服務端通過數據庫查詢的操做，jwt有對應的加密解密算法，服務端拿到jwt後經過密鑰解密能夠把其中的用戶信息拿到。

oauth2.0驗證過程

有聽過，可是沒了解，沒答出來。

說下resfulApi

resfulApi是一種接口設計規範，使用get（獲取）、post（新建）、put（更新）、delete（刪除）等語義化的方法去描述請求。url裏會帶上版本號和資源名，資源以複數形式描述。

說下graphQL

graphQL是一種用於api查詢的語言，能讓客戶端只獲取所須要的數據。在開發中，後端返回的數據中會包含一些前端不須要的內容。使用graphQL能夠把獲取數據的主動權交給前端，經過數據模型去規定後端返回的數據，只取所須要的數據，減小接口的冗餘數據。

說下B+樹

懵，沒答出來

二面

二面就簡單問了下Vue生命週期，後面都是圍繞項目去問。並且我發現面的好多家公司都會問性能優化。這裏我也給點小建議，能夠從這幾個方面去回答：

• 渲染：減小回流重繪、dom操做使用Fragment
• 應用：防抖、節流
• 資源：vue路由懶加載、小程序分包、雪碧圖、圖片懶加載、dns預解析、壓縮、緩存
• webpack：dllPligin、多進程打包

三面

三面是老闆面，不聊技術，基本就聊一些經歷，性格，對職業的規劃，對公司的指望之類的。從交談中得知，老闆是程序員轉行，曾經也是個全棧工程師，在阿里待過。而後才知道這家公司成立不夠半年，應該是優居網旗下的公司吧。問了老闆對公司的技術團隊規劃，目前是隻有兩個全棧，技術團隊正在擴張，將來會保持在十多我的左右。

最後

雖然最後拿到了offer，但仍是選擇不去。主要是技術團隊和money的問題吧，我的傾向穩定一些的公司。

本文中的一些問題回答的不是很全面，有感興趣的能夠本身去查閱相關的資料。

面試前也作一些知識複習的總結：

• 金九銀十，初中級前端面試複習總結「JavaScript篇」
• 金九銀十，初中級前端面試複習總結「Vue篇」
• 金九銀十，初中級前端面試複習總結「瀏覽器、HTTP、前端安全」

但願正在面試的小夥伴不被毒打，早日拿到心儀的offer。