前言

  先簡單介紹一下我的基本情況~樓主是澳門某大學2018屆軟件專業本科,大四上學期通過日常實習入職360企業安全集團的華南基地(Base 珠海,現改名為奇安信集團),18年春招轉正擔任前端開發工程師,到今年11月份已經有兩年左右開發經驗。在原單位里以 toB 端頁面開發為主,除了日常的業務系統開發,還參與了二/三維數據可視化大屏的項目,并接觸到一些項目研發管理相關的經驗。
  面試經歷
  我從今年9月份開始確定跳槽意向,9-10月開始有針對性地進行復習和刷題,11月上旬開始密集的面試流程,一共投遞了以下公司的崗位(主要是使用 Boss 來投遞):
  Offer 收獲:字節跳動、快手、拼多多、滴滴、OPPO
  技術面通過但由于流程較晚沒有繼續進行HR面:有贊、百度、阿里Lazada、美團
  掛:平安、企業微信、歡聚YY、微眾銀行
  這段時間經常珠三角三地來回跑,最后11月底確定 offer 意向,最終也是拿到了滿意的 offer~而這三個月的經歷也讓我有一些新的感悟:
  簡歷一定要有突出的點作為敲門磚(例如我的是可視化開發經驗),能夠讓你獲得面試機會之余,能更好地在面試過程中展開角度新穎的、有意義的對話;
  心態保持平和、態度保持謙虛,面試中沒回答上來的問題并不是你的致命缺陷,面試者也在通過問題和回答不斷探索被面試者的技術邊界;
  面試的問題都是大同小異的,每輪面試結束后最好對問題做一個復盤的記錄總結,不斷迭代出最全面的回答。
  面試準備
  雖然說作為軟件開發工程師,需要靠持之以恒的鍛煉、積累和沉淀提升個人技術水平;但在平常業務開發中很少有機會面面俱到地覆蓋到技術的每一方面,尤其對像我這樣畢業一年左右的職場新人來說,面試前期做好充足準備是必不可少的。
  算法:完整地精讀《劍指Offer》,對里面的60+道題嘗試復現,筆記記錄技巧并嘗試舉一反三;9-10月集中刷 leetcode 140+道,按照力扣網站上的“探索”模塊刷題效率更高;
  專業技術:從 CSS、 JS 語法、HTTP 基礎、三大框架、瀏覽器原理和前端安全等幾個大方向去列復習提綱or腦圖,系統地、有時間規劃地復習記憶性的知識點,同時嘗試將知識點與工作中的實際業務聯系起來,在這個過程里你會發現除了鞏固自己的知識點,還能建立個人的知識圖譜,對自己的整體水平有更加清晰的了解,從而更有針對性地查漏補缺;
  思考總結:除了基礎技術知識的掌握,候選人的綜合能力也是面試考察的重點。在“大前端”思維下,我們需要考慮:前端性能優化、Node.js 工具鏈、異常監控和部署打包等問題;在綜合軟技能上,我們需要提前總結以下幾點:對業務系統的理解、研發流程的推進、開發難題的攻關和團隊協作的實踐等。
  題目記錄
  這里以一個流水賬的形式記錄每輪技術面試涉及的問題,供大家參考各個公司現在業務的方向和面試的傾向,暫時不整理完整答案。PS: 后期面試安排太過密集很多題目沒來得及記錄請見諒~??
  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 是只讀的、使用純函數來修改狀態
  項目中是否使用了 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 的使用,保存用戶上次的選擇
  編程題:數組去重
  拼多多【視頻三面】
  React 和 Vue 的分別的優點,你覺得現在這些 MV* 框架以后會往哪個方向/趨勢發展
  有沒有做過項目的性能優化,從業務和工具鏈兩個方面講
  最近遇到的技術難題
  有沒有參加過開源社區給開源項目貢獻代碼;介紹一下自己業余時間做的開發工作
  在團隊內是否有維護公共組件或工具,你覺得維護公共邏輯跟個人開發上有什么區別,如何去協調不同開發者的需求
  團隊的組成情況,在團隊協作上遇見什么困難,是如何解決的;
  將來的職業規劃是怎樣的,帶領團隊/下屬最重要的是什么
  最近讀了什么書有什么感想,有沒有寫技術文章
  字節跳動【視頻一面】
  WebGL 了解到什么程度,都有哪些基本功能;項目中是如何使用 WebGL 的
  講一下 GLSL Shader 實現亮度(Brightness)、對比度(Contrast) 和邊緣檢測(Edge Detection) 是如何實現的
  回答的時候忘記了對比度的算法實現沒答上來,講了下明度 Luminance 的調節;亮度Brightness是RGB+亮度系數;邊緣檢測和圖像銳化是使用 Convolution Kernel 卷積核加深中心像素與周圍像素的色彩差值梯度,使邊緣更加突出
  亮度、對比度與原像素的 RGB 通道分別是什么關系
  這題其實我沒理解題意,其實現在想想應該答案是 亮度是在原RGB上直接添加亮度系數(color+brightness),而對比度是 在原色彩與中間值的差 上與對比度系數相乘 (color-0.5)*contrast+0.5
  是否有進行過 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-商業化
  一面電話溝通,都是前端非?;A的問題,例如閉包、跨域、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 工具鏈開發等,以實際業務為基石,踏踏實實提升自我水平才是最重要的事~求職的過程中我也一度迷茫過、自我懷疑過,感謝智廣、劍訣、少杰、鉞鉞和予南這些深瞳小伙伴對我的鼓勵和建議,也希望這篇文章能夠給正在求職的小伙伴帶來一點幫助~