三年經驗前端社招—

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

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

前言

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

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

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

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

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

一面

1、說一個你印象最深刻的項目？遇到了什么問題？怎么解決的？有什么成果？【描述】

2、有個長列表上萬行，怎么做優化？【描述】
懶加載或者虛擬滾動

3、圖片資源怎么做優化？【描述】【舉例】
壓縮、雪碧圖、svg、base64、iconfont

首屏圖片優先加載，等首屏圖片加載完全后再去加載非首屏圖片。
對大部分圖片，特別是輪播廣告中的圖片進行按設備尺寸裁剪，減少圖片體積，減少網絡開銷，加快下載速率。

4、懶加載的話，如果異步請求返回很慢 1-3 秒，怎么優化？【描述】
后端處理，緩存

5、做過哪些 webpack 打包體積優化？具體怎么做怎么配置的？【描述】【舉例】

壓縮代碼
提取公共資源
tree-shaking
scope-hoisting
圖片壓縮
動態Polyfill

6、你覺得 webpack 里面最難配置是哪些？【舉例】
多入口打包、loader配置、external、tree-shaking等說幾個

7、瀏覽器加載網頁的主要步驟包括哪些？【描述】
（1）通過DNS進行域名解析得到域名映射的IP地址
（2）向此IP地址發起TCP的3次握手，取得連接
（3）建立TCP連接后發起http請求
（4）服務器響應http請求，瀏覽器得到html代碼
（5）瀏覽器解析html代碼，并請求html代碼中的資源（如 js、css、圖片等）
（6）瀏覽器對頁面進行渲染，最終呈現給用戶

8、瀏覽器對頁面進行渲染，是怎么渲染的？DOM 樹和 CSSOM 樹是怎么構建的？【描述】
渲染過程：
（1）構建DOM樹，將瀏覽器無法直接理解和使用的HTML，轉換為瀏覽器能夠理解的結構--DOM 樹。
（2）構建CSSOM，把 CSS 轉換為瀏覽器能理解的結構(styleSheets)，并轉換樣式表中的屬性值，使其標準化，計算出 DOM 樹中每個節點的具體樣式（根據繼承規則和層疊規則）。
（3）創建 Layout 布局樹，確定DOM 元素的幾何位置信息，遍歷 DOM 樹中的所有可見節點，加入到布局樹（display：none不包含），并計算布局樹節點的坐標位置。
（4）構建圖層樹，如果頁面有復雜的效果，如常見的頁面滾動，或者使用 z 軸排序等，為了更加方便地實現這些效果，渲染引擎還需要為特定的節點生成專用的圖層，并生成一棵對應的圖層樹（LayerTree）。
（5）Paint 圖層繪制，把一個圖層的繪制拆分成很多小的繪制指令，然后再把這些指令按照順序組成一個待繪制列表（聯想自己畫畫）。
（6）tiles：將圖層轉換成圖塊。
（7）光柵化：通過進程實現圖塊轉換成位圖。
（8）display：瀏覽器進程拿到 DrawQuad 信息生成頁面顯示。

9、在html頭部head 通過 link 外部引入一個樣式文件，會阻塞渲染嗎？【描述】
css樣式解析不會阻塞渲染

10、CDN 加速原理是什么？它和外鏈引入js這種有什么區別？【描述】
CDN 即內容分發網絡。CDN 的基本原理是廣泛采用各種緩存服務器，將這些緩存服務器分布到用戶訪問相對集中的地區或網絡中，在用戶訪問網站時，利用全局負載技術將用戶的訪問指向距離最近的工作正常的緩存服務器上，由緩存服務器直接響應用戶請求。

CDN 的適用場景：
解決因分布、帶寬、服務器性能帶來的訪問延遲問題,適用于網站站點/應用加速、點播、直播、視音頻點播、大文件下載分發加速、移動應用加速等場景

11、防抖和節流是什么？怎么實現？有哪些應用場景？【描述】【偽代碼】
常見問題

12、vue-router 有幾種模式？分別說下他們的實現原理？【描述】
兩種模式
- hash模式：利用 window 的 hashchange 事件，監聽到 hash 改變后拿到對應的路由組件，更新DOM
- history模式：利用 history.pushState 事件改變瀏覽器地址欄，以及 window 的 popstate 事件監聽瀏覽器的前進后退事件，更新DOM

13、說下 vue 響應式原理【描述】

14、說下 vue 都有哪些生命周期鉤子函數？都在什么階段觸發的？【描述】

15、vue 如果一個父組件嵌套了子組件，它們的加載順序是什么？觸發生命周期的順序又是什么？【描述】
先創建父組件，再創建子組件；先掛載子組件，再掛載父組件。

16、說下 Diff 算法的執行過程【描述】
DOM操作是很耗性能的，因此需要盡量減少DOM操作。找出本次DOM必須更新的節點來更新，其他的不更新，這個“找出”的過程，就需要diff算法。diff算法主要執行過程：

patch(container, vnode) ，首次渲染，將 container 轉為 vnode，并對比新舊 VNode 是否相同節點然后更新DOM
patch(vnode, newVnode) ，數據改變二次渲染，對比新舊 VNode 是否相同節點然后更新DOM
createElm(vnode, insertedVnodeQueue)，先執行用戶的 init 鉤子函數，然后把 vnode 轉換成真實 DOM（此時沒有渲染到頁面），最后返回新創建的 DOM
updateChildren(elm, oldCh, ch, insertedVnodeQueue), 如果 VNode 有子節點，并且與舊VNode子節點不相同則執行 updateChildren()，比較子節點的差異并更新到DOM

17、用過哪些ES6的新特性【舉例】

18、ES6 的 Map 有什么特性？可以設置重復的key嗎？Map 有順序嗎【描述】
Map最主要的特性就是可以設置任意數據類型的key。key不能重復，后續會覆蓋之前的，有順序。

19、可以改變原數組的方法有哪些【舉例】
push, pop, unshift, shift, splice, sort, reverse
20、怎么收集一個二維數組里的重復元素？【描述】
先拍平數組，再遍歷數組，判斷當前元素的前后索引值，如果前后索引值不一樣就是重復的

21、怎么判斷一個元素是否為數組？【描述】
（1）Array.isArray() 方法
（2）arr instanceof Array
（3）Object.prototype.toString.call(obj) === '[object Array]'

22、最近在學什么新技術？【描述】

23、你近期的職業規劃？有具體去做計劃嗎？你覺得怎樣才算是一個高級開發？【描述】

24、你有什么問題要問我的？【描述】