【面試流水帳】一年半經驗前端年末求職路

時間 2020-01-09

原文原文鏈接

前言

先簡單介紹一下個人基本狀況~樓主是澳門某大學2018屆軟件專業本科，大四上學期經過平常實習入職360企業安全集團的華南基地（Base 珠海，現更名爲奇安信集團），18年春招轉正擔任前端開發工程師，到今年11月份已經有兩年左右開發經驗。在原單位裏以 toB 端頁面開發爲主，除了平常的業務系統開發，還參與了二/三維數據可視化大屏的項目，並接觸到一些項目研發管理相關的經驗。javascript

面試經歷

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

Offer 收穫：字節跳動、快手、拼多多、滴滴、OPPO
技術面經過但因爲流程較晚沒有繼續進行HR面：有贊、百度、阿里Lazada、美團
掛：平安、企業微信、歡聚YY、微衆銀行

這段時間常常珠三角三地來回跑，最後11月底肯定 offer 意向，最終也是拿到了滿意的 offer~而這三個月的經歷也讓我有一些新的感悟：前端

簡歷必定要有突出的點做爲敲門磚（例如個人是可視化開發經驗），可以讓你得到面試機會之餘，能更好地在面試過程當中展開角度新穎的、有意義的對話；
心態保持平和、態度保持謙虛，面試中沒回答上來的問題並非你的致命缺陷，面試者也在經過問題和回答不斷探索被面試者的技術邊界；
面試的問題都是大同小異的，每輪面試結束後最好對問題作一個覆盤的記錄總結，不斷迭代出最全面的回答。

面試準備

雖說做爲軟件開發工程師，須要靠鍥而不捨的鍛鍊、積累和沉澱提高我的技術水平；但在日常業務開發中不多有機會面面俱到地覆蓋到技術的每一方面，尤爲對像我這樣畢業一年左右的職場新人來講，面試前期作好充足準備是必不可少的。vue

算法：完整地精讀《劍指Offer》，對裏面的60+道題嘗試復現，筆記記錄技巧並嘗試觸類旁通；9-10月集中刷 leetcode 140+道，按照力扣網站上的「探索」模塊刷題效率更高；
專業技術：從 CSS、 JS 語法、HTTP 基礎、三大框架、瀏覽器原理和前端安全等幾個大方向去列複習提綱or腦圖，系統地、有時間規劃地複習記憶性的知識點，同時嘗試將知識點與工做中的實際業務聯繫起來，在這個過程裏你會發現除了鞏固本身的知識點，還能創建我的的知識圖譜，對本身的總體水平有更加清晰的瞭解，從而更有針對性地查漏補缺；
思考總結：除了基礎技術知識的掌握，候選人的綜合能力也是面試考察的重點。在「大前端」思惟下，咱們須要考慮：前端性能優化、Node.js 工具鏈、異常監控和部署打包等問題；在綜合軟技能上，咱們須要提早總結如下幾點：對業務系統的理解、研發流程的推動、開發難題的攻關和團隊協做的實踐等。

這裏推薦一下一些準備過程當中收穫很大的博客/文章：java

題目記錄

這裏以一個流水帳的形式記錄每輪技術面試涉及的問題，供你們參考各個公司如今業務的方向和麪試的傾向，暫時不整理完整答案。PS: 後期面試安排太過密集不少題目沒來得及記錄請見諒~😅node

Promise.resolve()😼

拼多多【電話一面】

如何在 React 項目中使用 Echarts，在哪一個生命週期實例化圖表（componentDidMount），什麼場景下使用了 Echarts 的高級特性
項目 i18n 的方案，在可視化圖表中如何引入 i18n
React Hooks 解決了什麼問題，如何用 Hooks 的方法去模擬 Class Components 的功能
Function Component 屢次執行，useRef() 會不會每次都執行生成新對象
React16 對比 15 有什麼更新（Fiber 歷史背景和原理）
什麼是受控組件和非受控組件
React項目的技術棧是怎樣的？講一下 redux-saga 的概念、API 和用法
Redux 的三大特色

單一數據源、State 是隻讀的、使用純函數來修改狀態webpack
項目中是否使用了 TypeScript，TS 中的枚舉是怎樣寫的，若是用原生 JS 怎樣實現
webpack 配置能夠怎樣優化，有哪些策略，若是項目要使用 TS 在 webpack 中須要配置什麼
項目使用了 ES6 嗎，是如何使用 ES6 的（Babel 使用 @babel/preset-env）
舉例子 window 對象下的一些屬性
講一下對閉包的理解
如何用原生 JS 實現 Promise 的 polyfill，須要注意哪些點
HTML 的字符實體是什麼，都有哪些（❌一開始沒反應過來字符實體是什麼）
前端模塊化是爲了解決什麼問題，簡單介紹目前有哪些模塊化規範，CommonJS 和 ES6 的區別
常見的前端涉及到的安全問題，以及如何防範
是否用 LESS/SASS，LESS 中如何寫函數
編程題：有一個長度爲 32 的數組，如何將它轉換爲長度爲4*8的二維數組

拼多多【電話二面+coding】

詳細講講最近一個負責的項目的技術架構，爲何要遷移 UI 組件庫
Web Worker 是什麼，Echarts 和 Web Worker 結合使用場景
React 和 Vue 的優缺點對比，MVVM 雙向綁定流程
React/Vue 的 Hooks 是須要解決什麼問題，React Hooks 有哪些 API，介紹一下 useEffect 的調用時機
什麼是高階組件 HOC 和 Render Props，他們的的區別是什麼
講一下博客系統中 Vue SSR 的大體流程
頁面換膚方案

<link> 標籤請求新主題的樣式文件、React Context API、CSS 變量，這裏最後還提到了 localStorage 的使用，保存用戶上次的選擇git
編程題：數組去重

拼多多【視頻三面】

React 和 Vue 的分別的優勢，你以爲如今這些 MV* 框架之後會往哪一個方向/趨勢發展
有沒有作過項目的性能優化，從業務和工具鏈兩個方面講
最近遇到的技術難題
有沒有參加過開源社區給開源項目貢獻代碼；介紹一下本身業餘時間作的開發工做
在團隊內是否有維護公共組件或工具，你以爲維護公共邏輯跟我的開發上有什麼區別，如何去協調不一樣開發者的需求
團隊的組成狀況，在團隊協做上碰見什麼困難，是如何解決的；
未來的職業規劃是怎樣的，帶領團隊/下屬最重要的是什麼
最近讀了什麼書有什麼感想，有沒有寫技術文章

字節跳動【視頻一面】

WebGL 瞭解到什麼程度，都有哪些基本功能；項目中是如何使用 WebGL 的
講一下 GLSL Shader 實現亮度(Brightness)、對比度(Contrast) 和邊緣檢測(Edge Detection) 是如何實現的

回答的時候忘記了對比度的算法實現沒答上來，講了下明度 Luminance 的調節；亮度Brightness是RGB+亮度係數；邊緣檢測和圖像銳化是使用 Convolution Kernel 卷積核加深中心像素與周圍像素的色彩差值梯度，使邊緣更加突出github
亮度、對比度與原像素的 RGB 通道分別是什麼關係

這題其實我沒理解題意，其實如今想一想應該答案是亮度是在原RGB上直接添加亮度係數(color+brightness)，而對比度是在原色彩與中間值的差上與對比度係數相乘 (color-0.5)*contrast+0.5web
是否有進行過 node 開發；簡單介紹一下你開發的這一個 webpack 插件的功能和原理
Vue 響應式原理；響應式原理中的 Deps 數組訂閱發佈中心是在什麼時機去收集依賴的？
介紹這三個步驟的流程 Vue Template -> VDOM -> 真實 DOM；
Vue Template 生成的 render 函數裏面都有什麼內容（主要要提到 createElement 函數的遞歸調用）
編程題：Promise 調度相關，JS 實現一個帶併發限制的異步調度器 Scheduler，保證同時運行的任務最多有兩個

字節跳動【視頻二面】

如何預防/減小 Node.js 程序的崩潰，有沒有實際操做的案例
如何判斷一個點在正多邊形內部
Web Worker 的侷限性；如何使用動態的 JS 代碼生成動態的 Web Worker 實例（ArrayBuffer + URL.createObjectURL）
iframe 中腳本的執行是否會阻塞主頁面的渲染線程和 JS 線程，從不一樣瀏覽器內核去分析
websocket 和 TCP Socket的區別，websocket 的握手過程，爲何要基於 HTTP 請求來握手
CSS 選擇器的權重，使用什麼機制來計算的
CSS 後處理器和預處理器分別是什麼，有什麼區別
什麼狀況下會發生 Ajax 的跨域請求，瀏覽器是如何處理 Ajax 跨域的
ES6 箭頭函數與 ES5 普通函數的區別
Promise 的 then 方法能夠 chaining 調用，它是如何保存這個過程當中的值的；then 中回調函數若是返回 Promise/帶有 then 屬性的對象（then屬性值是function 或者非 function 的狀況下）/非上述兩種這些狀況下，then() 方法是如何處理的
Vue 中爲什麼不使用 Object.defineProperty 去轉換數組爲響應式數據，對數組是如何處理的

字節跳動【視頻三面】

介紹以爲最有挑戰的項目，作了什麼工做
Vue 虛擬化列表的思路和實現原理
優化樹形圖表渲染的其餘方法
簡述思路：在不使用 Promise 或 async/await 等其餘 JS 異步控制的狀況下，設計一個網絡請求 Scheduler 類，確保每一個 ajax 請求的回調函數按發起請求的順序執行
項目開發流程，異地協做流程保證
有沒有特別想作的業務方向；之後的工做和技術規劃

快手【視頻一面】

六道筆試題和幾道簡單的編程題
手寫 bind 和 apply
水平垂直居中的幾種方法
擴展 flex:1
請用 React Hooks 實現無狀態組件的 componentDidMount、componentDidUpdate 生命週期效果
setState 的第二個參數的做用
useCallback 的使用
React 受控和非受控組件的區別
HTTPS 和 HTTP 的區別
CSRF 如何防護
Promise all/race/finally 的原理
節流和防抖的區別和應用場景
解釋 0.3-0.2=0.99999999...
原生 DOM API 相關：建立節點、插入/移除節點、選擇節點
element.style 和 getComputedStyle() 的區別

下面代碼的輸出結果是

// counter.js
let counter = 10;
export default counter;
// index.js
import myCounter from "./counter";
myCounter += 1;
console.log(myCounter);
複製代碼

請用JavaScript實現一個函數求解整數N，N知足 %2==1，%3==2，%5==4，%6==5，%7==0

快手【視頻二面】

輸出代碼結果：函數提高問題、JS 異步事件循環問題
React Hooks 優勢、解決什麼問題、useEffect 的調用時機
webpack 優化的方法和配置
webpack 開發插件的原理，簡單介紹你的插件
webpack watch 自己的 cache 機制
講以爲最有挑戰的項目，作了什麼工做，作了什麼優化
如何判斷模塊的循環引用（DFS 拓撲排序）

快手【現場技術終面】

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

項目技術選型，爲何又有 Vue 又有 React
項目的研發管理流程
前端項目自動化發佈方式
團隊狀況，團隊溝通中遇到最大的困難，我的在團隊中的角色

OPPO-商業化

一面電話溝通，都是前端很是基礎的問題，例如閉包、跨域、Vue響應式、HTTP 基礎等等；二面現場面、HR電話面

滴滴-兩輪車業務

技術面都是電話溝通，HR視頻面，後面題目沒有記錄了

webpack 打包的整個流程，簡述 webpack 插件的開發和功能
Commonjs 原理
Koa/Express 中的中間件是什麼
如何提升Node.js 程序的穩健性
如何理解 HTTP 協議
RESTful API
HR面：項目異地協做是如何保證流程，對流程推動作了什麼工做；從0開始帶項目的思路是什麼

Promise.reject()😿

平安人壽【電話一面掛】

數據看板開發流程，數據看板是靜態數據的仍是實時渲染的？
- 靜態數據數據量多大，數據量大的時候是如何優化性能的
- 可視化看板實時渲染的技術方案
Echarts 除了普通的柱狀圖折線圖，還用過什麼高級功能
Canvas 與 SVG 的區別，和它們在 Echarts 中使用的區別

Canvas 適合繪製圖形元素數量巨大的場景，如熱力圖、地理座標系或平行座標系上的大規模散點圖和線圖，SVG 本質上生成了 DOM 節點，會對瀏覽器渲染形成很大的負擔；SVG 的優點是佔用的內存更低（對移動端尤爲重要），渲染性能略高，而且用戶使用瀏覽器內置的縮放功能時不會模糊；並且由於是生成了 DOM 節點，在開發上直接使用 DOM API 進行用戶的交互會更方便

企業微信【視頻一面掛】

項目中的權限系統是怎樣實現的
Vue 虛擬化列表的實現原理
webpack 優化打包的策略、內部的機制和插件開發的原理
假設如今有一個微信公衆號文章的頁面，能夠展現文章、圖片、視頻和讀者留言，從安全和交互性能的角度去講一下如何優化

安全：用戶輸入的時候編輯頁面防止 XSS 攻擊、敏感字符過濾、外鏈資源白名單過濾、圖片資源脫敏處理轉換爲本地資源；優化：關鍵請求路徑優化、事件監聽節流、非首屏資源懶加載、代碼壓縮、服務端渲染、利用好緩存策略、開啓 HTTP2
HTTP2 相對於 HTTP1.1 有哪些優勢，解決了什麼問題

首部壓縮、數據分幀、多路複用，服務端推送
Webpack 實現熱更新的流程（webpack-dev-server 和 HotModuleReplacementPlugin 的實現）
Vue 生成 VDOM 的流程和 Vue 響應式原理
看過哪些項目的源代碼，爲何要去看源代碼
有沒有開發太小程序，是否有 TypeScript 開發經驗
介紹一下如今團隊的基本狀況，在團隊內部的貢獻（技術分享、維護工具）

歡聚YY【現場面掛】

如何優化網頁上須要展現的超大圖片，從請求和性能來解釋
實現 Adblock 的策略
WebGL 渲染的流程；GLSL Shader 是什麼，有什麼做用
Shader 實現一個濾光濾鏡的思路
WebGL FrameBufferObject 的概念
是否有對動畫有了解、FLIP 的概念和應用；Vue Transition 源碼底層原理
Vuex 的單向數據流模型；對比直接在 window 下用變量儲存數據，使用狀態管理庫的優勢在哪裏

微衆銀行【現場一面沒有下文】

可視化大屏是怎樣使用 websocket 中遇到什麼問題
如何管理 redux 之間不一樣模塊的數據
講一下使用 redux-saga 控制數據流的具體需求的實現
一個監聽了 input 事件的輸入框，每次觸發input都會發送請求，這個輸入框的優化方案
防抖的做用和手寫實現
看了 Vue 代碼有哪些本身的心得
vue-router 的原理，history 模式和 hash 模式的區別，爲何 history 模式是先進行 app 內模塊的切換再去手動更新路由
介紹一下項目中單元測試的狀況，用例有多少，如何運行
編程題：將一個對象中全部值爲字符串的提出取出來，拼接成大的字符串
開放題：一共有103位參賽者的1v1賽事，設計一個比賽淘汰機制

未走完的流程👨‍💻‍

有贊-監控平臺【視頻+電話+在線coding 過】

CSS 選擇器有哪些，優先級是怎樣的，!important 的表現
display 有哪些值，inline 和 inline-block 的區別
float: left/right 的表現是什麼，什麼是 BFC，能解決什麼問題
websocket 在項目中的用途，握手過程
Babel 的原理、運行過程、如何作 Polyfill
=== 和 == 的區別
JS 基本類型
webpack 優化和配置策略
Service Worker的做用；如何劃分緩存策略，對同源/非同源的資源是如何處理緩存的
SSR 的好處，主要解決什麼問題
coding: 二叉樹的遍歷和鏡像；實現 EventEmitter

百度-基礎架構部【電話三輪技術面過】

項目技術選型，不一樣場景爲什麼使用 Vue/React
HTTPS 原理，CA、數字證書、數字證書的信任鏈；
對優化業務開發流程作了什麼推進工做；項目開發規範：API 規範、倉庫和分支規範、需求/開發/提測規範
從輸入 URL 到網頁渲染，發生了什麼事情
coding: 查找根節點到目標節點的路徑

美團【電話一面過】

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

阿里LAZADA【電話一面過】

一面完兩週過去了還沒消息我覺得已經涼了……跟我聯繫的面試的前輩跟我說還沒涼可是流程比較慢，這時候已經接到 offer 了就沒繼續等下去🤣

Flexbox 經常使用規則，如何垂直居中
CSSOM 是如何尋找 DOM 節點並生成 Render Tree 的，CSS 選擇器權重優先級
Service Worker 的註冊時機與頁面資源請求代理相關問題；資源緩存的策略
SSR 是怎麼作的；如何優化 SSR 致使的服務器渲染 CPU/Memory 太高問題
從輸入 URL 到瀏覽器渲染髮生了什麼事情
HTTPS 和 HTTP 的區別；瀏覽器緩存查找過程

關於技術終面和HR面

基本全部的技術終面都會問到如下主觀性問題：項目難點、項目研發流程、技術選型、團隊狀況、團隊內部的貢獻（技術分享、維護工具）、溝通技巧、我的職業規劃；最後的「你還有什麼問題要問我嗎」是瞭解團隊和公司狀況的一個極好的機會，我通常會提問：

可否對個人回答作總結性點評、對我有沒有什麼建議
團隊當前的技術棧和業務方向
團隊在公司內外維護的公共組件 or 開源產品，和在社區的活躍度
將來加入這個團隊後，個人角色、職責和 leader 對個人指望

寫在最後

經歷此次求職，其實我也更加深入地認識到前端工程經歷這15年的發展，已經進入了一個比較平穩的狀態：初級人員飽和、高級人才稀缺。初級新人找到突破口的惟一辦法就是在專業技能熟練的基礎上，往不一樣方向橫向挖掘亮點，如可視化產品開發、Node.js 工具鏈開發等，以實際業務爲基石，踏踏實實提高自我水平纔是最重要的事~求職的過程當中我也一度迷茫過、自我懷疑過，感謝智廣、劍訣、少傑、鉞鉞和予南這些深瞳小夥伴對個人鼓勵和建議，也但願這篇文章可以給正在求職的小夥伴帶來一點幫助😎~