三年經驗前端社招—

大家好，我是若川，祝大家中秋節快樂。最近組織了源碼共讀活動《1個月，200+人，一起讀了4周源碼》，已經有超50+人提交了筆記，群里已經有超1200人，感興趣的可以點此鏈接掃碼加我微信?ruochuan12?參與。

本文經作者@lxcan 授權轉載，未經授權請勿直接轉載。
原文標題：《三年經驗前端社招——樸樸科技》
原文鏈接：https://zhuanlan.zhihu.com/p/405785932
文末點擊閱讀原文直達

前言

本人畢業學校是雙非二本，非計算機科班出身，大學時自學的前端相關技能。截止2021年8月，有3年前端開發經驗，技術棧為 vue 全家桶，求職意向城市是深圳。想著找一個更大的平臺尋求發展（技術沉淀、漲薪），所以出來接受社會的毒打了。。。

本文的目的是記錄自己的面試經歷，各位路過的兄dei也可以參考一下，也讓自己有個回顧和反思。路漫漫其修遠兮，吾將上下而求索

下面的題目，都會標明每一題的性質，部分題目也會給出一些參考思路和參考回答，希望各位大佬不吝賜教~

描述：對概念、過程的描述，純理論性問答題為主
舉例：說出應用場景，或者是自己團隊實踐的情況
偽代碼：寫代碼，但不需要跑起來，甚至可以隨便寫偽代碼，主要目的是描述思路
編程：真正的寫代碼，需要跑起來，有測試用例，要看到效果

HR面的話，是一些日常、項目回顧（少說技術細節）、職業規劃、你的優勢和缺點、為什么跑路、為什么選擇這邊、目前薪資和職級、期望薪資，HR面基本離不開這些問題。

一面

1、項目問題，深挖細節，說幾個做過的項目中，你覺得比較復雜的功能【描述】

2、h5 首頁為什么做成了服務端渲染？【描述】

3、打包結果優化，具體做了哪些優化【描述】【舉例】

4、vue 中 beforeCreate 和 created 的區別【描述】

5、vue 中用過哪些修飾器？【舉例】
事件修飾符
.stop
.prevent
.capture
.self
.once
.passive

按鍵修飾符
.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

其他常用的修飾符
.trim
.number
.lazy
.sync

6、vue 中 computed 和 watch 的區別【描述】

computed 一般用于簡化模板中變量的調用
watch 一般用于監聽數據的變化，做一些邏輯處理或者異步處理，可以深度監聽、立即執行
computed 和 watch 在源碼里都是通過 Watcher 類創建出來的
初始化時，先創建 computed 再創建 watch 。數據改變時，先執行 computed 再執行 watch

7、vue 中 key 的作用是什么？【描述】
Key 的作用：
主要用來在虛擬 DOM 的 diff 算法中，在新舊節點的對比時辨別 vnode ，使用 key 時，Vue 會基于 key 的變化重新排列元素順序，盡可能的復用頁面元素，只找出必須更新的DOM，最終可以減少DOM操作。常見的列子是結合 v-for 來進行列表渲染，或者用于強制替換元素/組件。
設置 Key 的好處：
（1）數據更新時，可以盡可能的減少DOM操作；
（2）列表渲染時，可以提高列表渲染的效率，提高頁面的性能；

8、比如，在 v-for 時寫了 key ，將第二個元素和第三個元素交換了順序，實際的 diff 算法怎樣的【描述】

9、有沒有做過組件的抽離和組件庫的開發？具體做了什么工作【描述】

10、內部組件庫，怎么本地開發和調試？怎么上線？本地調試有哪些方式【描述】【舉例】

11、聊一聊瀏覽器的渲染機制，瀏覽器是怎么解析和渲染html的？【描述】

12、js 異步加載的方式？defer 和 async 的區別？【描述】
（1）defer 是在HTML解析完之后才會執行，如果是多個，按照加載的順序依次執行
（2）async 是在加載完之后立即執行，如果是多個，執行順序和加載順序無關

13、重定向的狀態碼有哪些？它們的區別是什么？【描述】【舉例】

14、https 相較 http ，是怎么體現安全性的？【描述】
http: 超文本傳輸協議(Hypertext Transfer Protocol)，是互聯網上應用最為廣泛的一種網絡協議，是一個客戶端和服務器端請求和應答的標準（TCP），它是一個在計算機世界里專門在兩點之間傳輸文字、圖片、音頻、視頻等超文本數據的約定和規范。
https 的全稱是 Hypertext Transfer Protocol Secure , 它用來在計算機網絡上的兩個端系統之間進行安全的交換信息(secure communication). HTTPS 是 HTTP 協議的一種擴展，它本身并不保證傳輸的安全性，那么誰來保證安全性呢？在 HTTPS 中，使用傳輸層安全性(TLS)或安全套接字層(SSL)對通信協議進行加密。也就是 HTTP + SSL(TLS) = HTTPS。
（TLS(Transport Layer Security) 是 SSL(Secure Socket Layer) 的后續版本，它們是用于在互聯網兩臺計算機之間用于身份驗證和加密的一種協議。）
http 和 https 的區別

https 協議需要 ca 證書，費用較高
http 數據信息是明文傳輸，https 則是具有安全性的 ssl 加密傳輸協議。
使用不同的鏈接方式，端口也不同，一般而言，http 協議的端口為 80 , https 的端口為 443
http 的連接很簡單，是無狀態的；https 協議是由 http + ssl 協議構建的可進行加密傳輸、身份認證的網絡協議，比 http 協議安全

15、https 證書的作用是什么？【描述】
CA 的全稱是 Certificate Authority，證書認證機構，你必須讓 CA 頒布具有認證過的公鑰，才能解決公鑰的信任問題。

存在一個數字簽名的認證問題。因為私鑰是自己的，公鑰是誰都可以發布，所以必須發布經過認證的公鑰，才能解決公鑰的信任問題。

16、講一下js原型鏈【描述】

17、由構造函數創建的實例對象，和構造函數本身，他們的原型鏈有什么區別？【描述】

18、講一下閉包？實際開發中有什么應用？【描述】【舉例】

19、flex 布局相關都有哪些屬性？含義是什么？flex 屬性對應哪幾個屬性【描述】

20、flex-grow 和 flex-shrink 代表什么含義【描述】
flex-grow 屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。
flex-shrink 屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

21、CommonJS 與 ESModule 的區別【描述】

22、Tree-shaking 原理【描述】

23、ESModule 模塊化是怎么解決循環引用的問題的【描述】
參考 https://es6.ruanyifeng.com/#docs/module-loader#%E5%BE%AA%E7%8E%AF%E5%8A%A0%E8%BD%BD

24、你對 react 怎么看待？【描述】

25、你是通過什么手段去學習前端技術的？【描述】

二面

1、最近在學習什么新技術？Vue3.0做了哪些優化【描述】

2、說一個你做過印象最深刻的項目【描述】

3、對于首屏加速，你有哪些方案【描述】

4、路由懶加載有哪些方式【描述】

5、說一下你對模塊化的理解，CommonJS 和 ESModule 有什么區別？【描述】

CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。
CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。
CommonJS 模塊的 require() 是同步加載模塊，ES6 模塊的 import 命令是異步加載，有一個獨立的模塊依賴的解析階段。

6、打包結果里面出現重復包的情況，怎么解決【描述】

7、有哪些手段可以加快 webpack 打包速度【描述】

使用高版本的webpack (使用webpack4)
多線程/多實例構建：HappyPack(不維護了) thread-loader
縮小打包作用域
充分利用緩存提升二次構建速度
DLLPlugin 提前打包、分包，避免反復編譯浪費時間

8、移動端開發，是怎么適配的？有沒有辦法在打包時將 px 轉換為 rem【描述】

9、描述一下 Vue 中 template 模板編譯的過程【描述】

10、說下 vue-router 的實現原理【描述】

11、有沒有方案，當 history.pushState 改變了瀏覽器地址欄后，監聽到地址改變【描述】
- 利用觀察者模式
- 重寫 history 方法，并添加 window.addHistoryListener 事件機制

12、你覺得怎樣才算是一個高標準的組件庫【描述】

13、組件庫的文檔是怎么開發的？【描述】

手工維護方案：建工程手動引用組件，書寫示例和說明
elementUI 方案：示例和說明按照一定規則寫在md文件中，調用md-loader將md文件轉成相應的頁面
Storybook 方案：Storybook是UI組件的開發環境。它允許您瀏覽組件庫，查看每個組件的不同狀態，以及交互式開發和測試組件。

14、組件庫怎么進行本地開發調試？【描述】
（1）本地寫demo
（2）本地編譯，拷貝到業務系統，替換 node_module 下的靜態資源進行測試
15、求實現：有個請求，10秒內可以重試3次，如果3次都失敗，就拋出異常【偽代碼】
利用 setTimeout 和 Promise.race 實現
16、說一下你的職業規劃【描述】