【面試流水賬】一年半經(jīng)驗前端年底求職路

（給前端大學(xué)加星標(biāo)，提升前端技能.）

作者：jacelynfish_

https://juejin.im/post/5de11deb5188256eaa0ebd5e

先簡單介紹一下我的基本情況~樓主是澳門某大學(xué)2018屆軟件專業(yè)本科，大四上學(xué)期通過日常實習(xí)入職360企業(yè)安全集團(tuán)的華南基地（Base 珠海，現(xiàn)改名為奇安信集團(tuán)），18年春招轉(zhuǎn)正擔(dān)任前端開發(fā)工程師，到今年11月份已經(jīng)有兩年左右開發(fā)經(jīng)驗。

在原單位里以 toB 端頁面開發(fā)為主，除了日常的業(yè)務(wù)系統(tǒng)開發(fā)，還參與了二/三維數(shù)據(jù)可視化大屏的項目，并接觸到一些項目研發(fā)管理相關(guān)的經(jīng)驗。

面試經(jīng)歷:

我從今年9月份開始確定跳槽意向，9-10月開始有針對性地進(jìn)行復(fù)習(xí)和刷題，11月上旬開始密集的面試流程，一共投遞了以下公司的崗位（主要是使用 Boss 來投遞）：

• Offer 收獲：字節(jié)跳動、快手、拼多多、滴滴、OPPO

• 技術(shù)面通過但由于流程較晚沒有繼續(xù)進(jìn)行HR面：有贊、百度、阿里L(fēng)azada、美團(tuán)

• 掛：平安、企業(yè)微信、歡聚YY、微眾銀行

這段時間經(jīng)常珠三角三地來回跑，最后11月底確定 offer 意向，最終也是拿到了滿意的 offer~而這三個月的經(jīng)歷也讓我有一些新的感悟：

• 簡歷一定要有突出的點作為敲門磚（例如我的是可視化開發(fā)經(jīng)驗），能夠讓你獲得面試機(jī)會之余，能更好地在面試過程中展開角度新穎的、有意義的對話；

• 心態(tài)保持平和、態(tài)度保持謙虛，面試中沒回答上來的問題并不是你的致命缺陷，面試者也在通過問題和回答不斷探索被面試者的技術(shù)邊界；

• 面試的問題都是大同小異的，每輪面試結(jié)束后最好對問題做一個復(fù)盤的記錄總結(jié)，不斷迭代出最全面的回答。

面試準(zhǔn)備:

雖然說作為軟件開發(fā)工程師，需要靠持之以恒的鍛煉、積累和沉淀提升個人技術(shù)水平；但在平常業(yè)務(wù)開發(fā)中很少有機(jī)會面面俱到地覆蓋到技術(shù)的每一方面，尤其對像我這樣畢業(yè)一年左右的職場新人來說，面試前期做好充足準(zhǔn)備是必不可少的。

• 算法：完整地精讀《劍指Offer》，對里面的60+道題嘗試復(fù)現(xiàn)，筆記記錄技巧并嘗試舉一反三；9-10月集中刷 leetcode 140+道，按照力扣網(wǎng)站上的“探索”模塊刷題效率更高；

• 專業(yè)技術(shù)：從 CSS、 JS 語法、HTTP 基礎(chǔ)、三大框架、瀏覽器原理和前端安全等幾個大方向去列復(fù)習(xí)提綱or腦圖，系統(tǒng)地、有時間規(guī)劃地復(fù)習(xí)記憶性的知識點，同時嘗試將知識點與工作中的實際業(yè)務(wù)聯(lián)系起來，在這個過程里你會發(fā)現(xiàn)除了鞏固自己的知識點，還能建立個人的知識圖譜，對自己的整體水平有更加清晰的了解，從而更有針對性地查漏補(bǔ)缺；

• 思考總結(jié)：除了基礎(chǔ)技術(shù)知識的掌握，候選人的綜合能力也是面試考察的重點。在“大前端”思維下，我們需要考慮：前端性能優(yōu)化、Node.js 工具鏈、異常監(jiān)控和部署打包等問題；在綜合軟技能上，我們需要提前總結(jié)以下幾點：對業(yè)務(wù)系統(tǒng)的理解、研發(fā)流程的推進(jìn)、開發(fā)難題的攻關(guān)和團(tuán)隊協(xié)作的實踐等。

這里推薦一下一些準(zhǔn)備過程中收獲很大的博客/文章：

• 冴羽的博客，包括 JS 深入系列、JS 專題系列等

• 前端工程師手冊

• The Book of Shaders

• 瀏覽器渲染詳細(xì)過程：重繪、重排和 composite 只是冰山一角

題目記錄

這里以一個流水賬的形式記錄每輪技術(shù)面試涉及的問題，供大家參考各個公司現(xiàn)在業(yè)務(wù)的方向和面試的傾向，暫時不整理完整答案。PS: 后期面試安排太過密集很多題目沒來得及記錄請見諒~?

Promise.resolve()?

拼多多【電話一面】

1. 如何在 React 項目中使用 Echarts，在哪個生命周期實例化圖表（componentDidMount），什么場景下使用了 Echarts 的高級特性

2. 項目 i18n 的方案，在可視化圖表中如何引入 i18n

3. React Hooks 解決了什么問題，如何用 Hooks 的方法去模擬 Class Components 的功能

4. Function Component 多次執(zhí)行，useRef() 會不會每次都執(zhí)行生成新對象

5. React16 對比 15 有什么更新（Fiber 歷史背景和原理）

6. 什么是受控組件和非受控組件

7. React項目的技術(shù)棧是怎樣的？講一下 redux-saga 的概念、API 和用法

8. Redux 的三大特點

   單一數(shù)據(jù)源、State 是只讀的、使用純函數(shù)來修改狀態(tài)

9. 項目中是否使用了 TypeScript，TS 中的枚舉是怎樣寫的，如果用原生 JS 怎樣實現(xiàn)

10. webpack 配置可以怎樣優(yōu)化，有哪些策略，如果項目要使用 TS 在 webpack 中需要配置什么

11. 項目使用了 ES6 嗎，是如何使用 ES6 的（Babel 使用 @babel/preset-env）

12. 舉例子 window 對象下的一些屬性

13. 講一下對閉包的理解

14. 如何用原生 JS 實現(xiàn) Promise 的 polyfill，需要注意哪些點

15. HTML 的字符實體是什么，都有哪些（?一開始沒反應(yīng)過來字符實體是什么）

16. 前端模塊化是為了解決什么問題，簡單介紹目前有哪些模塊化規(guī)范，CommonJS 和 ES6 的區(qū)別

17. 常見的前端涉及到的安全問題，以及如何防范

18. 是否用 LESS/SASS，LESS 中如何寫函數(shù)

19. 編程題：有一個長度為 32 的數(shù)組，如何將它轉(zhuǎn)換為長度為4*8的二維數(shù)組

拼多多【電話二面+coding】

1. 詳細(xì)講講最近一個負(fù)責(zé)的項目的技術(shù)架構(gòu)，為什么要遷移 UI 組件庫

2. Web Worker 是什么，Echarts 和 Web Worker 結(jié)合使用場景

3. React 和 Vue 的優(yōu)缺點對比，MVVM 雙向綁定流程

4. React/Vue 的 Hooks 是需要解決什么問題，React Hooks 有哪些 API，介紹一下 useEffect 的調(diào)用時機(jī)

5. 什么是高階組件 HOC 和 Render Props，他們的的區(qū)別是什么

6. 講一下博客系統(tǒng)中 Vue SSR 的大致流程

7. 頁面換膚方案

   ?標(biāo)簽請求新主題的樣式文件、React Context API、CSS 變量，這里最后還提到了 localStorage 的使用，保存用戶上次的選擇

8. 編程題：數(shù)組去重

拼多多【視頻三面】

1. React 和 Vue 的分別的優(yōu)點，你覺得現(xiàn)在這些 MV* 框架以后會往哪個方向/趨勢發(fā)展

2. 有沒有做過項目的性能優(yōu)化，從業(yè)務(wù)和工具鏈兩個方面講

3. 最近遇到的技術(shù)難題

4. 有沒有參加過開源社區(qū)給開源項目貢獻(xiàn)代碼；介紹一下自己業(yè)余時間做的開發(fā)工作

5. 在團(tuán)隊內(nèi)是否有維護(hù)公共組件或工具，你覺得維護(hù)公共邏輯跟個人開發(fā)上有什么區(qū)別，如何去協(xié)調(diào)不同開發(fā)者的需求

6. 團(tuán)隊的組成情況，在團(tuán)隊協(xié)作上遇見什么困難，是如何解決的；

7. 將來的職業(yè)規(guī)劃是怎樣的，帶領(lǐng)團(tuán)隊/下屬最重要的是什么

8. 最近讀了什么書有什么感想，有沒有寫技術(shù)文章

字節(jié)跳動【視頻一面】

1. WebGL 了解到什么程度，都有哪些基本功能；項目中是如何使用 WebGL 的

2. 講一下 GLSL Shader 實現(xiàn)亮度(Brightness)、對比度(Contrast) 和邊緣檢測(Edge Detection) 是如何實現(xiàn)的

   回答的時候忘記了對比度的算法實現(xiàn)沒答上來，講了下明度 Luminance 的調(diào)節(jié)；亮度Brightness是RGB+亮度系數(shù)；邊緣檢測和圖像銳化是使用 Convolution Kernel 卷積核加深中心像素與周圍像素的色彩差值梯度，使邊緣更加突出

3. 亮度、對比度與原像素的 RGB 通道分別是什么關(guān)系

   這題其實我沒理解題意，其實現(xiàn)在想想應(yīng)該答案是 亮度是在原RGB上直接添加亮度系數(shù)(color+brightness)，而對比度是 在原色彩與中間值的差 上與對比度系數(shù)相乘 (color-0.5)*contrast+0.5

4. 是否有進(jìn)行過 node 開發(fā)；簡單介紹一下你開發(fā)的這一個 webpack 插件的功能和原理

5. Vue 響應(yīng)式原理；響應(yīng)式原理中的 Deps 數(shù)組訂閱發(fā)布中心是在什么時機(jī)去收集依賴的？

6. 介紹這三個步驟的流程 Vue Template -> VDOM -> 真實 DOM；

7. Vue Template 生成的 render 函數(shù)里面都有什么內(nèi)容（主要要提到 createElement 函數(shù)的遞歸調(diào)用）

8. 編程題：Promise 調(diào)度相關(guān)，JS 實現(xiàn)一個帶并發(fā)限制的異步調(diào)度器 Scheduler，保證同時運行的任務(wù)最多有兩個

字節(jié)跳動【視頻二面】

1. 如何預(yù)防/減少 Node.js 程序的崩潰，有沒有實際操作的案例

2. 如何判斷一個點在正多邊形內(nèi)部

3. Web Worker 的局限性；如何使用動態(tài)的 JS 代碼生成動態(tài)的 Web Worker 實例（ArrayBuffer + URL.createObjectURL）

4. iframe 中腳本的執(zhí)行是否會阻塞主頁面的渲染線程和 JS 線程，從不同瀏覽器內(nèi)核去分析

5. websocket 和 TCP Socket的區(qū)別，websocket 的握手過程，為什么要基于 HTTP 請求來握手

6. CSS 選擇器的權(quán)重，使用什么機(jī)制來計算的

7. CSS 后處理器和預(yù)處理器分別是什么，有什么區(qū)別

8. 什么情況下會發(fā)生 Ajax 的跨域請求，瀏覽器是如何處理 Ajax 跨域的

9. ES6 箭頭函數(shù)與 ES5 普通函數(shù)的區(qū)別

10. Promise 的 then 方法可以 chaining 調(diào)用，它是如何保存這個過程中的值的；then 中回調(diào)函數(shù)如果返回 Promise/帶有 then 屬性的對象（then屬性值是function 或者非 function 的情況下）/非上述兩種 這些情況下，then() 方法是如何處理的

11. Vue 中為何不使用 Object.defineProperty 去轉(zhuǎn)換數(shù)組為響應(yīng)式數(shù)據(jù)，對數(shù)組是如何處理的

字節(jié)跳動【視頻三面】

1. 介紹覺得最有挑戰(zhàn)的項目，做了什么工作

2. Vue 虛擬化列表的思路和實現(xiàn)原理

3. 優(yōu)化樹形圖表渲染的其他方法

4. 簡述思路：在不使用 Promise 或 async/await 等其他 JS 異步控制的情況下，設(shè)計一個網(wǎng)絡(luò)請求 Scheduler 類，確保每個 ajax 請求的回調(diào)函數(shù)按發(fā)起請求的順序執(zhí)行

5. 項目開發(fā)流程，異地協(xié)作流程保證

6. 有沒有特別想做的業(yè)務(wù)方向；以后的工作和技術(shù)規(guī)劃

快手【視頻一面】

1. 六道筆試題和幾道簡單的編程題

2. 手寫 bind 和 apply

3. 水平垂直居中的幾種方法

4. 擴(kuò)展 flex:1

5. 請用 React Hooks 實現(xiàn)無狀態(tài)組件的 componentDidMount、componentDidUpdate 生命周期效果

6. setState 的第二個參數(shù)的作用

7. useCallback 的使用

8. React 受控和非受控組件的區(qū)別

9. HTTPS 和 HTTP 的區(qū)別

10. CSRF 如何防御

11. Promise all/race/finally 的原理

12. 節(jié)流和防抖的區(qū)別和應(yīng)用場景

13. 解釋 0.3-0.2=0.99999999...

14. 原生 DOM API 相關(guān)：創(chuàng)建節(jié)點、插入/移除節(jié)點、選擇節(jié)點

15. element.style 和 getComputedStyle() 的區(qū)別

16. 下面代碼的輸出結(jié)果是

    // counter.jslet counter = 10;export default counter;// index.jsimport myCounter from "./counter";myCounter += 1;console.log(myCounter);

17. 請用JavaScript實現(xiàn)一個函數(shù)求解整數(shù)N，N滿足 %2==1，%3==2，%5==4，%6==5，%7==0

快手【視頻二面】

1. 輸出代碼結(jié)果：函數(shù)提升問題、JS 異步事件循環(huán)問題

2. React Hooks 優(yōu)點、解決什么問題、useEffect 的調(diào)用時機(jī)

3. webpack 優(yōu)化的方法和配置

4. webpack 開發(fā)插件的原理，簡單介紹你的插件

5. webpack watch 本身的 cache 機(jī)制

6. 講覺得最有挑戰(zhàn)的項目，做了什么工作，做了什么優(yōu)化

7. 如何判斷模塊的循環(huán)引用（DFS 拓?fù)渑判颍?/span>

快手【現(xiàn)場技術(shù)終面】

這輪面試我臨時訂機(jī)票從珠海坐飛機(jī)飛北京到快手總部，11月里從24攝氏度到零下一度的落差真的要把我這個廣東人凍僵了QAQ 不禁感嘆祖國幅員遼闊啊~

1. 項目技術(shù)選型，為什么又有 Vue 又有 React

2. 項目的研發(fā)管理流程

3. 前端項目自動化發(fā)布方式

4. 團(tuán)隊情況，團(tuán)隊溝通中遇到最大的困難，個人在團(tuán)隊中的角色

OPPO-商業(yè)化

一面電話溝通，都是前端非常基礎(chǔ)的問題，例如閉包、跨域、Vue響應(yīng)式、HTTP 基礎(chǔ)等等；二面現(xiàn)場面、HR電話面

滴滴-兩輪車業(yè)務(wù)

技術(shù)面都是電話溝通，HR視頻面，后面題目沒有記錄了

1. webpack 打包的整個流程，簡述 webpack 插件的開發(fā)和功能

2. Commonjs 原理

3. Koa/Express 中的中間件是什么

4. 如何提高Node.js 程序的穩(wěn)健性

5. 如何理解 HTTP 協(xié)議

6. RESTful API

7. HR面：項目異地協(xié)作是如何保證流程，對流程推進(jìn)做了什么工作；從0開始帶項目的思路是什么

Promise.reject()?

平安人壽【電話一面掛】

1. 數(shù)據(jù)看板開發(fā)流程，數(shù)據(jù)看板是靜態(tài)數(shù)據(jù)的還是實時渲染的？

• 靜態(tài)數(shù)據(jù)數(shù)據(jù)量多大，數(shù)據(jù)量大的時候是如何優(yōu)化性能的

• 可視化看板實時渲染的技術(shù)方案

Echarts 除了普通的柱狀圖折線圖，還用過什么高級功能

Canvas 與 SVG 的區(qū)別，和它們在 Echarts 中使用的區(qū)別

Canvas 適合繪制圖形元素數(shù)量巨大的場景，如熱力圖、地理坐標(biāo)系或平行坐標(biāo)系上的大規(guī)模散點圖和線圖，SVG 本質(zhì)上生成了 DOM 節(jié)點，會對瀏覽器渲染造成很大的負(fù)擔(dān)；SVG 的優(yōu)勢是占用的內(nèi)存更低（對移動端尤其重要），渲染性能略高，并且用戶使用瀏覽器內(nèi)置的縮放功能時不會模糊；而且因為是生成了 DOM 節(jié)點，在開發(fā)上直接使用 DOM API 進(jìn)行用戶的交互會更方便

企業(yè)微信【視頻一面掛】

1. 項目中的權(quán)限系統(tǒng)是怎樣實現(xiàn)的

2. Vue 虛擬化列表的實現(xiàn)原理

3. webpack 優(yōu)化打包的策略、內(nèi)部的機(jī)制和插件開發(fā)的原理

4. 假設(shè)現(xiàn)在有一個微信公眾號文章的頁面，可以展示文章、圖片、視頻和讀者留言，從安全和交互性能的角度去講一下如何優(yōu)化

   安全：用戶輸入的時候編輯頁面防止 XSS 攻擊、敏感字符過濾、外鏈資源白名單過濾、圖片資源脫敏處理轉(zhuǎn)換為本地資源；優(yōu)化：關(guān)鍵請求路徑優(yōu)化、事件監(jiān)聽節(jié)流、非首屏資源懶加載、代碼壓縮、服務(wù)端渲染、利用好緩存策略、開啟 HTTP2

5. HTTP2 相對于 HTTP1.1 有哪些優(yōu)點，解決了什么問題

   首部壓縮、數(shù)據(jù)分幀、多路復(fù)用，服務(wù)端推送

6. Webpack 實現(xiàn)熱更新的流程（webpack-dev-server 和 HotModuleReplacementPlugin 的實現(xiàn)）

7. Vue 生成 VDOM 的流程和 Vue 響應(yīng)式原理

8. 看過哪些項目的源代碼，為什么要去看源代碼

9. 有沒有開發(fā)過小程序，是否有 TypeScript 開發(fā)經(jīng)驗

10. 介紹一下現(xiàn)在團(tuán)隊的基本情況，在團(tuán)隊內(nèi)部的貢獻(xiàn)（技術(shù)分享、維護(hù)工具）

歡聚YY【現(xiàn)場面掛】

1. 如何優(yōu)化網(wǎng)頁上需要展示的超大圖片，從請求和性能來解釋

2. 實現(xiàn) Adblock 的策略

3. WebGL 渲染的流程；GLSL Shader 是什么，有什么作用

4. Shader 實現(xiàn)一個濾光濾鏡的思路

5. WebGL FrameBufferObject 的概念

6. 是否有對動畫有了解、FLIP 的概念和應(yīng)用；Vue Transition 源碼底層原理

7. Vuex 的單向數(shù)據(jù)流模型；對比直接在 window 下用變量儲存數(shù)據(jù)，使用狀態(tài)管理庫的優(yōu)點在哪里

微眾銀行【現(xiàn)場一面 沒有下文】

1. 可視化大屏是怎樣使用 websocket 中遇到什么問題

2. 如何管理 redux 之間不同模塊的數(shù)據(jù)

3. 講一下使用 redux-saga 控制數(shù)據(jù)流的具體需求的實現(xiàn)

4. 一個監(jiān)聽了 input 事件的輸入框，每次觸發(fā)input都會發(fā)送請求，這個輸入框的優(yōu)化方案

5. 防抖的作用和手寫實現(xiàn)

6. 看了 Vue 代碼有哪些自己的心得

7. vue-router 的原理，history 模式和 hash 模式的區(qū)別，為什么 history 模式是先進(jìn)行 app 內(nèi)模塊的切換再去手動更新路由

8. 介紹一下項目中單元測試的情況，用例有多少，如何運行

9. 編程題：將一個對象中所有值為字符串的提出取出來，拼接成大的字符串

10. 開放題：一共有103位參賽者的1v1賽事，設(shè)計一個比賽淘汰機(jī)制

未走完的流程????

有贊-監(jiān)控平臺【視頻+電話+在線coding 過】

1. CSS 選擇器有哪些，優(yōu)先級是怎樣的，!important 的表現(xiàn)

2. display 有哪些值，inline 和 inline-block 的區(qū)別

3. float: left/right 的表現(xiàn)是什么，什么是 BFC，能解決什么問題

4. websocket 在項目中的用途，握手過程

5. Babel 的原理、運行過程、如何做 Polyfill

6. === 和 == 的區(qū)別

7. JS 基本類型

8. webpack 優(yōu)化和配置策略

9. Service Worker的作用；如何劃分緩存策略，對同源/非同源的資源是如何處理緩存的

10. SSR 的好處，主要解決什么問題

11. coding: 二叉樹的遍歷和鏡像；實現(xiàn) EventEmitter

百度-基礎(chǔ)架構(gòu)部 【電話三輪技術(shù)面 過】

1. 項目技術(shù)選型，不同場景為何使用 Vue/React

2. HTTPS 原理，CA、數(shù)字證書、數(shù)字證書的信任鏈；

3. 對優(yōu)化業(yè)務(wù)開發(fā)流程做了什么推動工作；項目開發(fā)規(guī)范：API 規(guī)范、倉庫和分支規(guī)范、需求/開發(fā)/提測規(guī)范

4. 從輸入 URL 到網(wǎng)頁渲染，發(fā)生了什么事情

5. coding: 查找根節(jié)點到目標(biāo)節(jié)點的路徑

美團(tuán)【電話一面 過】

剩下的流程需要到北京總部，放棄流程

阿里L(fēng)AZADA【電話一面 過】

一面完兩周過去了還沒消息我以為已經(jīng)涼了……跟我聯(lián)系的面試的前輩跟我說還沒涼但是流程比較慢，這時候已經(jīng)接到 offer 了就沒繼續(xù)等下去?

1. Flexbox 常用規(guī)則，如何垂直居中

2. CSSOM 是如何尋找 DOM 節(jié)點并生成 Render Tree 的，CSS 選擇器權(quán)重優(yōu)先級

3. Service Worker 的注冊時機(jī)與頁面資源請求代理相關(guān)問題；資源緩存的策略

4. SSR 是怎么做的；如何優(yōu)化 SSR 導(dǎo)致的服務(wù)器渲染 CPU/Memory 過高問題

5. 從輸入 URL 到瀏覽器渲染發(fā)生了什么事情

6. HTTPS 和 HTTP 的區(qū)別；瀏覽器緩存查找過程

關(guān)于技術(shù)終面和HR面

基本所有的技術(shù)終面都會問到以下主觀性問題：項目難點、項目研發(fā)流程、技術(shù)選型、團(tuán)隊情況、團(tuán)隊內(nèi)部的貢獻(xiàn)（技術(shù)分享、維護(hù)工具）、溝通技巧、個人職業(yè)規(guī)劃；最后的“你還有什么問題要問我嗎”是了解團(tuán)隊和公司情況的一個極好的機(jī)會，我一般會提問：

• 能否對我的回答做總結(jié)性點評、對我有沒有什么建議

• 團(tuán)隊當(dāng)前的技術(shù)棧和業(yè)務(wù)方向

• 團(tuán)隊在公司內(nèi)外維護(hù)的公共組件 or 開源產(chǎn)品，和在社區(qū)的活躍度

• 未來加入這個團(tuán)隊后，我的角色、職責(zé)和 leader 對我的期望

寫在最后

經(jīng)歷這次求職，其實我也更加深刻地認(rèn)識到前端工程經(jīng)歷這15年的發(fā)展，已經(jīng)進(jìn)入了一個比較平穩(wěn)的狀態(tài)：初級人員飽和、高級人才稀缺。初級新人找到突破口的唯一辦法就是在專業(yè)技能熟練的基礎(chǔ)上，往不同方向橫向挖掘亮點，如可視化產(chǎn)品開發(fā)、Node.js 工具鏈開發(fā)等，以實際業(yè)務(wù)為基石，踏踏實實提升自我水平才是最重要的事~求職的過程中我也一度迷茫過、自我懷疑過，感謝智廣、劍訣、少杰、鉞鉞和予南這些深瞳小伙伴對我的鼓勵和建議，也希望這篇文章能夠給正在求職的小伙伴帶來一點幫助?~

分享前端好文，點亮?在看?