來自：掘金，作者：LienJack

鏈接：https://juejin.im/post/5e85ec79e51d4547153d0738

本文將先從個人背景講起，然后談談在字節跳動、虎牙、YY 以及 BIGO 的面試經過，最后講一下關于計算機基礎、算法與數據結構、JavaScript 等方面的學習經驗，以及聊聊個人學習經驗。

文章整理不易，歡迎小伙伴們點贊、評論吐槽~

現狀

個人背景

2016 年到 2017 年在網易互動娛樂從事游戲品牌宣傳后期美術、CC 語音（現 CC 電競）的欄目包裝和現場導播助手，由于一些原因放棄美術這個行業。

于是在 2017 年畢業后準備了 6 個月考研計算機，那時候真的痛苦，從零開始學數據結構、計算機網絡、組成原理和操作系統，還要數學。

不負眾望，沒考上就出來找工作。

從以上背景來說，我的經歷可以是超級減法，被人按在地上摩擦。

面試情況

• 字節跳動 offer

• 虎牙 offer

• YY offer

• BIGO offer call

好像基本給我去面試就都過了，剩下內推投了簡歷基本連面試機會都沒有……

由于家在廣州，還是想在廣州發展所以深圳的崗位就沒去面了。

而且這幾家面試感覺都有點反套路，經常黑人問號。

大廠面經

字節跳動

1 面

• 對 tree-shaking 的了解

• • 雖然生產模式下默認開啟，但是由于經過 babel 編譯全部模塊被封裝成 IIFE

  • IIFE 存在副作用無法被 tree-shaking 掉

  • 需要配置?{ module: false }和?sideEffects: false

  • rollup 和 webpack 的 shaking 程度不同，以一個 Class 為例子

• Common.js 和 es6 module 區別

• • commonJs 是被加載的時候運行，esModule 是編譯的時候運行

  • commonJs 輸出的是值的淺拷貝，esModule 輸出值的引用

  • webpack 中的 webpack_require 對他們處理方式不同

  • webpack 的按需加載實現

• 你寫的腳手架其中有一個模板是針對銷售快速迭代的情節，能介紹一下嗎

• • 介紹項目背景：頁面多，迭代快，管理混亂，并且 webpack 配置不一樣

  • 使用只需要在 page 里面新建文件，然后放入 main 和一些配置文件，輸入命令：npm run page=[文件夾名稱] env=[環境] method=[dev|build]

  • 介紹一下 node 如何實現，和 webpack 配置合并策略

• 圖片編輯器做的性能優化

• • 圖片變化通過矩陣變化，移除 html2Canva

  • 抽離 Matrix.js 里面的三元一次方程求解公式來取代傳統的克拉默法則

  • 自定義棧，通過可逆矩陣，亮度，飽和度，色差的逆公式，做出返回效果，而不是每次結果用 base64 保存，消除內存消耗

  • webwork 的嘗試和數據測試，證明在計算量不大情況下反而更慢

  • window.performance.mark 埋點，和 1px 的 gif 上傳關鍵步驟時間優化

• 能介紹一下緩存策略嗎

• • 強緩存 cache-control、express

  • 協商緩存 304、ETag、modify

• 301、302、307、308的區別

OK，搞完上面問題，開始做題：

• 1. 兩數之和：5 分鐘內就做完

技術征文圖

• 洗牌算法：5分鐘內寫完

做完上面 2 道題后：

面試官：emm....面試時間還沒結束再做一道題目吧！

• 215. 數組中的第K個最大元素

技術征文圖

• 花了點個大頂堆，然后很快就求出來

• 面試官：emm。。。。還有點時間，你還有想到別的辦法嗎

• 又寫了個快排解法，寫完之后面試官說順便寫個歸并排序，我就改了一下寫出來

好了，面試結束，然而這才是噩夢的開始。由于算法題做的太快，不知面試官寫了我啥評價，后面的面試基本變成做各種題。

2 面

• 圖片編輯器做的性能優化（以上）

• redux-saga 和 mobx 的比較

• • saga 還是遵循 mvc 模型，mobx 是接近 mvvm 模型

  • 介紹項目為何要使用 mobx 更合適

  • 由于是直播相關的 electron 項目，存在音視頻流，和一些底層 OS 操作，那么我們是否可以以麥克風視圖開關對于音頻流的處理為例子，把 OS 的一些操作與數據做一個映射層，就像數據和視圖存在映射關系一樣，那么數據的流動就是 view -> 觸發action -> 數據改變 -> 改變視圖 -> 進行 os 操作

  • 然后說了一下 mobx 大概實現的原理，如數據劫持，發布訂閱。

• https 有了解嗎

• • 簡單講了一下非對稱加密的握手過程

  • 證書簽名過程和如何防止被串改

• 跨域有了解過嗎

• • webpack-dev-server 原理和如何處理跨域

  • nginx 轉發

  • CROS 中的簡單請求和非簡單請求

  • 非簡單請求下發起的 options

• localstorage、sessionStorage 和 cookie 的區別

• cookie 跨域時候要如何處理

然后就開始做題：

• 70. 爬樓梯

技術征文圖

（又是 5 分鐘寫完）

• 面試官：那我們改編一下題目，改成 746. 使用最小花費爬樓梯。

技術征文圖

• 我：修改一下之前的答案，很快做出來。

• 面試官：還有點時間，我們再做一題稍微難一點的 72. 編輯距離

技術征文圖

我：這題居然說稍微難點？？？還好之前做過，那方法真的不是一般人想得出來。然后又做出來了。

面試結束了，感覺都是在做題。

3 面

• 自我介紹

• 介紹項目

• electron 的主進程，渲染進程之間區別和他們通信手段

• • ipcMain、ipcRenderer

  • localStorage

• webView 和 Iframe 區別

• • webView 應用和嵌入內容之間的交互全部都是異步的

  • 應用和嵌入內容之間的交互全部都是異步的

• 你這個 PC 應用做了哪些優化

• • 錄屏優化

  • 大型文件上傳優化

  • 用 mobx 重寫之前的 redux-saga，引入 os 層概念

  • electron-update 失效緊急處理辦法

• 大型文件上傳

• • 文件切片

  • 用 web-work 單獨線程計算文件的 hash 值

  • 上傳由于和其他接口同一域名，所以要做并發數處理

  • 進度條

  • 對于已經傳過的文件進行跳過秒傳，對于失敗做失敗重傳處理

  • 然后有說了一下感覺還能改進的地方

  • 要發揮 electron 能使用 node 的優勢，文件切片，hash 計算和上傳都可以用 node 實現，并且開不同的進程處理。由于上傳是用 node 模塊，不會有瀏覽器同一域名下 6 個連接的限制。為何沒做，因為在寫別的更加緊急的東西。。。。

• 錄屏優化

• • 需要對整個屏幕進行錄制

  • 對比了 FFmpeg 和 mediaSource 的性能差異，如 CPU 和內存消耗

  • 又對比一下 mediaSource 的各種編碼性能差異 vp8、daala、h264、opus 和 mpeg

  • 一開始是把視頻流寫在一個變量里面，這樣會造成很大的性能問題

  • 解決辦法是每個 10s 把流用 node 的 file 寫在硬盤里面，然后結束錄制時候，把每個 10s 的小視頻片段用 FFmpeg 合成一個大的文件

開始做題，做了一題比較偏冷的題目，看概念我都要理解幾分鐘的。

技術征文圖

雖然做出來，但是不是用數組實現，而是用鏈表，面試官問我如何再優化，我就是說改成跳表，空間換時間，但是其實正確答案是二分查找……

4 面

四面就比較輕松，問了一下項目就開始做題。

先從簡單開始?112. 路徑總和

技術征文圖

做完后在此基礎上，改變成

• 路徑不需要從根節點開始，也不需要在葉子節點結束

雖然題目不難，我也做了減枝的處理，但是面試官說還能優化，如何減少重復計算。這就難倒我了，我知道需要用一個 map 來保存中間的結果，但是這個 map 的 key 如何設計一時想不出來。想了很久說沒思路面試就結束了。

虎牙

1 面

• http 的 get 和 post 區別

• 緩存策略

• https 的握手過程

• http2 的特點

• • 二進制傳輸

  • Header 壓縮，順便吹了一下哈夫曼編碼

  • 多路復用

  • 服務器推送

• weak-Set、weak-Map 和 Set、Map 區別

• mvvm 模型和 mvc 模型區別

• 如何實現一個 mvvm 模型

• • 數據劫持 + 發布訂閱

• 為何你用 mobx 重構了 saga，說說兩者之間的區別

• • 簡單說了一下 mobx 的實現原理

• 說說 vnode 的了解

• • vnode 是作為數據和視圖的一種映射關系

  • vue 和 react 的 diff 算法有相同和有不同，相同是都是用同層比較，不同是 vue使用雙指針比較，react 是用 key 集合級比較

• 講講 webpack 的性能優化

• • 體積：講了一下 tree-shaking 了解

  • 打包速度：cache-loader、dll、多線程

• 有寫過 plugin

• • 沒有，但是了解他的原理，講了一下大概有哪些 compiler 鉤子

• 了解 webpack-dev-server 的 HMR 實現原理嗎

• 手寫一下防抖和節流

2 面

• 你做過直播，能介紹一下 webRTC 或者現在使用直播方案嗎

• • 雖然我是使用聲網的 SDK，但是大概了解過一般直播的直播方案

  • 講了一下 NAT、STUN、RTP、SDP 的基本概論

  • 然后兩個信令服務器，一個是聲網用來控制進房間媒體流的 socket，一個是業務邏輯的 socket

• 編碼方面有了解過嗎，能解釋一下碼率嗎

• 對于 P 幀、I 幀、B 幀有了解過

• • I 幀：關鍵幀。可以單獨解碼成一幅完整的圖像。

  • P 幀：參考幀。解碼時依賴于前面已解碼的數據

  • B 幀：前后參考幀 B 幀后面的 P 幀要優先于它進行解碼，然后才能將 B 幀解碼

• RGB 和 YUV 區別

• 有了解過哪些直播協議

• • httpflv 傳輸方式：http 流，格式：flv，連續流

  • rtmp 傳輸方式：tcp 流，格式：flv，連續流

  • hls 傳輸方式：http，格式：TS 文件，移動端兼容但 PC 不兼容

  • dash 這個不太常見只知道傳送方式是 http

• flv 和 mp4 區別有了解過嗎

• • 他們都是屬于容器，區別在于文件頭信息

  • flv 是屬于流式文件是可以邊傳邊解的，不需要通過索引分包，但是 mp4 是需要依賴索引表

• MediaSource 規范有了解過

• • 沒怎么了解，但是還是扯了一下不同碼率視頻切換是怎么做的

然后還問了一下別的東西，但是我不是很懂就不知清楚了，感覺這一輪面試好奇怪。前端基本沒面，反而音視頻處理問了很多。

3 面

• webSocket 和 ajax 的區別

• xss、csrf 有了解過嗎，如何防范

• 有了解過 React 的 fiber

• • fiber 誕生的背景，為何 react 有時間切片而 vue 不需要

• 能簡單介紹一下 react 執行過程嗎

• • performUnitOfWork

  • beginWork

  • completeUnitOfWork

jsx 經過 babel 轉變成 render 函數

create update

enqueueUpdate

scheduleWork 更新 expiration time

requestWork

workLoop大循環

Effect List

commit

• 能介紹一下 hook 嗎

• • 比起 hoc，hook 的復用性高

  • useState、useEffect、useRef 用法

  • 優化 usecallback、useMemo

• 情景題，做一個直播彈幕

• • 字幕的速度，大小

  • requestAnimationFarme 和 setTimeout 區別

  • 彈幕節流問題

  • socket 和輪詢優缺點，彈幕池的設計

  • 如何避免彈幕碰撞（這個我答得不好，后來搜索一下有一個飛機場算法）

  4 面

  這一面就是聊人生，扯得比較遠。講了一下產品一般盈利套路，如何拉新、留存、激活、轉換和收益。以前在網易 CC 電競做的事情。對中國電競前景的看法。

  Bigo

  1 面

  由于是年前面的，所以在會議室面

  • 自我介紹

  • 介紹項目

  • 你項目用到線形代數，我來考考你記不記得可逆矩陣的逆矩陣求法。

  • • 當場白板可逆矩陣的逆矩陣求法

  • 求一下三個三元一次方程

  • • 當場白板用克拉默法則求出方程 x,y,z 的解

    • 然后寫一下 matrix.js 里面的優化方程（雖然我也不知道他是什么原理）

  • 如何使用盡可能少的空間做矩陣的轉置

  • • 本質上就是867. 轉置矩陣

  技術征文圖

  然后有白板寫了一下

  • 能講講歐拉角和旋轉矩陣嗎，還有他們的相互轉換

  • • 我：？？？不過之前做項目有 AR 集成，調用接口時候用到，所以勉強講了一點，但是轉換公式我就不會寫了

  做到上面，我就十分懵逼，我是不是面錯崗位了。

  技術征文圖

  然后是情景題，當場設計系統。

  情景以下：

  • 這是一個多人在線協同網頁

  • 主要做的是視頻標識系統，用來訓練 AR 用的模型

  • 并且同一時間，用一視頻幀可以有多個人標識

  emm。。。。那我大概知道為何之前問我這么多數學問題

  這個項目的難點有以下

  • 視頻的時間幀的確定

  • • 由于視頻中會存在 I 幀、P 幀、B 幀作為干擾，所以一個視頻 25 幀的話，但是實際上不是每一秒都是 25 幀的，每秒幀的數目是動態的

    • 但是視頻信息又對應地方 DTS 即解碼時間戳，這個時間戳的意義在于告訴播放器該在什么時候解碼這一幀的數據，和 PTS 即顯示時間戳，這個時間戳用來告訴播放器該在什么時候顯示這一幀的數據。我們只需要拿到 PTS 就可以了

  • 繪畫過程中 canvas 的優化

  • • canvas 應該分兩層，一層是沒有選擇的圖形，一層是選中的圖形，當圖形選中時候會提升到編輯區域的 canvas

    • 對于不規則圖形，選擇判斷方法使用射線法思路，帶入公式就可以知道圖形是否被選擇

  • 多人協同問題，他們之間如何互相通知

  • • 使用信令服務器，用 websocket 連接

  • 如果兩個人以上同時對一個標簽做處理，這種沖突如何處理

  • • 其實這個在我做在線白板時候會遇到的問題，這種問題可以類比成游戲中的狀態同步和幀同步這兩種解決辦法，就和面試官扯了一下。

  面完情景題，就做算法題，題目也是很奇怪的。

  • 第一題：洗牌算法，這個可以

  • 第二題：假設有偶數位的整數，將整數分開兩邊，然后對每邊的每個數組的每一位求總和，當兩邊的總和相對就認為這組數符合要求，求2n位數的符合要求數占總數的多少。。。。。有點暈

  • 例子：287962 可以分成 287 962，其中 2 + 8 + 7 = 9 + 6 + 2，那么他就是符合要求的。

  2 面

  可能一面比較難，二面就比較隨便：

  • 瀏覽器緩存策略

  • 跨域處理

  • https 握手

  • http2 特性

  • tcp 三次握手

  • 從 url 到頁面顯示

  • redux 和 mobx 的差異

  • tree-shaking

  • 項目的性能優化

  • css 的 BEM 規范

  • 當場設計一個 toast

  • LRU 實現

  • DNS 的路徑選擇用了啥算法

  3 面

  聊得比較廣，沒啥重點

  YY

  1 面

  • mvvm 和 mvc 模型區別

  • mvvm 的實現

  • 了解 fiber 嗎

  • • 答案之前有

  • 了解 hook 嗎

  • • 答案之前有

  • 為何 react 點擊事件放在 settimeout 會拿不到 event 對象

  • • react 的事件合成

  • setState 是異步還是同步

  • • 本質上都是同步，只不過改變 state 的時機不同

    • 由一個是是否批量更新變量來決定

    • 放在 setTimeout 就能實時改變

  • 有用過 node 嗎，講講流

  • koa2 和 express 區別

  • • express 是大而全有路由等，koa2 小而精通過中間件

    • koa2 能使用 async await，express 不能

    • koa2 有洋蔥模型和 ctx 上下文，express 沒有

  • 講講洋蔥模型

  • 實現一個函數 compose([fn1,fn2,fn3..]) 轉成 fn3(fn2(fn1()))

  • • 這個本質上就是中間件實現邏輯，之前看了 Koa2 一點源碼，還好記得

  • koa2 和 egg 的區別

  • • egg 是在 koa2 上的封裝

    • egg 有 controller，service，router

    • 約定了文件目錄結構

  • 鑒權有了解過了

  • • Seesion/cookie

    • Token

    • OAuth

    • SSO

    • 還好項目都涉及過，雖然不是我用node寫的，是后端寫的，但是那時候好奇問了一下，并且查了一些資料，勉強答出來

  2 面

  • 瀏覽器緩存策略

  • 跨域處理

  • https 握手

  • xss 和 csrf 攻擊

  • Typscript 有了解嗎，能講講嗎

  • • 接口

    • 枚舉

    • 泛型

  • webpack 優化

  • tree-shaking

  • HMR 實現原理

  • nginx 有了解嗎

  • • 扯了一下跨域如何配置/轉發

    • 緩存策略配置

    • 地址重定向配置

  • 場景題，做一個頁面下雪

  • • 寫一個粒子 Class，里面有粒子、大小、圖片，每秒移動的距離

    • 一個粒子控制器 Class，包含粒子數量、分布情況，粒子的下落速度

    • 用 requestanimationframe 繪畫動畫

    • 用 css3 開啟硬件 GPU 加速

  3 面

  三面也是聊得很廣，基本木有前端。

  學習過程

  其實也沒有太過特意去準備面試，其實都是靠平時積累的，在 2019 年開始我就制定了自己的學習計劃了，并且每天都堅持學習。可參考 lien的每日學習

  以下會分為：

• 計算機基礎

• 前端專業知識

• 學習心得

順序有優先度之分，之所以把計算機基礎放在第一位，是因為經過這些面試發現計算機基礎考察還有比前端還要多，甚至有些公司面試都不怎么問我前端了。

計算機基礎

tip：里面涉及很多都是極客時間的課程，然而我并沒有打廣告。推薦是因為我看完后真心覺得講的好，當然好是指容易讓初學者了解和上手，深度還是去看專門的權威書做普通吧。

數據結構和算法

學習辦法不是一開始就刷題，要先學點入門。

• 入門方式有很多種看書看視頻，邊看邊敲。

• 然后就可以上網看別人面經和一些 leetcode 大神總結的經典題目，按照分類開始刷了。

• 每道題至少做 3 次，第一次時候遇到不會就不要想很久，8 分鐘沒有思路就看答案。因為大家一開始都是沒啥思路，只有做多多總結才會慢慢有思路。做完后一周后再做第二次。準備跳槽時候再做第三次。

• 算題順序為算法面試通關 40 講、劍指 offer、字節跳動專欄、自己總結的高頻題。

我刷的題目也不多，就 100 來道，和別人比起就差遠了。

技術征文圖

但是我做的題目范圍比較廣，而且都是自己總結高頻再去做，命中的幾率比較大。

基本數據結構

• 數組

• 隊列和棧

• 鏈表

• 二叉樹

• hash

• 堆

常見的算法

• DFS

• BFS

• 滑動窗口（雙指針）

• 回溯

• 動態規劃

• 貪心（其實動態規劃可以解決）

• 排序

• 二分查找

參考資料：

• JavaScript版 數據結構與算法，這個適合新人學習，入門基本。

• 極客時間- 數據結構與算法之美 在有基礎上看這個會更好，里面github有js實現方式，自己動手敲一遍

• 極客時間- 算法面試通關 40 講這門課真的是好，里面都是高頻經典的題目。

• leetcode 字節跳動專欄

• leetcode 劍指 offer

blog:

• awesome-coding-js用 JavaScript 實現的算法和數據結構

• labuladong這個動態規范講得真的好

• YaxeZhang/Just-Code針對面試訓練算法題， 目前包括字節跳動面試題、 LeetCode 和劍指 offer

網絡

網絡是前端重要中的重要，也是面試高頻的范圍。很多人都是一開始就去看計算機網絡、TCP/IP 協議、這些書入門，也不是說不好，但是對于新手入門門檻可能太高，還沒看幾頁就放棄了。可以一開始看點視頻跟著作者一起來抓包，慢慢熟悉。

觀看順序：

• 極客時間-透視 HTTP 協議HTTP 作為前端最經常接觸而且相對獨立，可以先學習這個，再學期其他層。

• 極客時間-趣談網絡協議作者生動用例子解釋網絡各層的作用和他們之間的關系，在此形成一個整體的架空，方便后面細節的學習

• 極客時間 - Web 協議詳解與抓包實戰。這門課從高層到底層，講解每一層的細節，由于里面講解很詳細也有很多理論知識，如 RSA 算法、基于橢圓曲線的 ECDH 算法等等可以考慮跳過

最后補充的書籍

• 圖解 http 協議

• 圖解 tcp 協議

• TCP/IP 詳解（第一卷）

tips：

對于前端來說，http，http2，https 的握手是高頻題，要主要復習。

其他

本來想聊聊計算機組成原理、操作系統和編譯原理，但是一個我學得不精，第二面試也沒有怎么問，操作系統就問 linux 的一些簡單指令和寫一下 Jenkins 的腳本而已。或者后端對這方面會問得比較多。

前端專業知識

前端基礎-JS

以下必須要十分熟悉：

• 類型，涉及以下：

• • 類型種類

  • 判斷

  • 轉換

  • 深度拷貝

• 閉包，涉及以下：

• • 作用域

  • v8 垃圾回收

  • 變量提升

• 異步，涉及以下：

• • Promsie 的歷史，用法，簡單手寫 Promsie 實現

  • async await 原理，generator

  • 宏任務與微任務區別

• 原型鏈，涉及以下

• • prototype和?__proto__

  • 繼承

  • oop 編程思想

• 模塊化

• • CommonJS 和 ES6 module

  • AMD 與 CMD 區別（比較舊可以忽略）

• ES6 特性

• • let const

  • 箭頭函數

  • Set、Map、WeakSet 和 WeakMap

  • 之前提及的 Promsie，async，Class，Es6 module

參考資料：

先做一份自我檢測，一名【合格】前端工程師的自檢清單。然后根據自己薄弱點去看相關資料。

書籍：

入門

• 《JavaScript高級程序(第三版)》

• 《你不知道的JavaScript(上)》

• 《JavaScript 忍者秘籍》（一定要買第二版）

• 《阮一峰 ES6入門》

BLOG:

• 前端進階之道

• 前端面試與進階指南

• ConardLi 的 blog

• 木易楊前端進階

• FE-Interview

• 冴羽的博客

掘金好文章：

• (1.6w字)瀏覽器與前端性能靈魂之問，請問你能接得住幾個？（上）

• (建議收藏)原生JS靈魂之問, 請問你能接得住幾個？(上)

• (建議精讀)原生JS靈魂之問(中)，檢驗自己是否真的熟悉JavaScript？

• (2.4w字,建議收藏)????原生JS靈魂之問(下), 沖刺????進階最后一公里(附個人成長經驗分享)

• 中高級前端大廠面試秘籍，為你保駕護航金三銀四，直通大廠(上)

• (中篇)中高級前端大廠面試秘籍，寒冬中為您保駕護航，直通大廠

• (下篇)中高級前端大廠面試秘籍，寒冬中為您保駕護航，直通大廠

付費好東西：

對知識付費其實是好事情，站在巨人的肩膀上看東西才會遠。

• 前端面試之道|比較基礎的前端知識，適合新人

• 前端開發核心知識進階| 從基礎出發，由淺入深，還有關于很多工程方面的文章，十分推薦。

前端基礎-瀏覽器

有以下比較經典的問題：

• 緩存策略：協商緩存和強緩存

• 頁面的渲染過程

• 頁面性能優化

參考資料：

• 瀏覽器工作原理與實踐。這個也是個人十分推薦，因為本人看過《webkit技術揭秘》，發現書上很多東西都是講瀏覽器一些實現方式，一堆 C++ 十分難受，但是這個專欄卻用十分簡單生動的方式來講述瀏覽器本質，個人收獲很多。

• 《webkit技術揭秘》

前端基礎-css

• css 選擇器優先度

• rem、em、vh、vw 和 px 的關系，以及移動端適配方式

• 清除浮動

• 盒子模型

• flex

• 層級上下文

• 各種布局

前端框架-vue

• 第一個層次：使用

• provide / inject

• pros emit

• listen

• event bus

• 自行實現 dispatch 和 broadcast 方法

• vue 的生命周期

• vue 全家桶使用，vuex，vue-router

• data，computer，watcher使用

• 組件通信

• 第二層：原理

• • 如何簡單實現一個mvvm模型

  • new vue 時候發生什么，每個生命周期對應的源碼做了什么

  • data，watcher，computer的源碼實現

  • nextTick 的原理

  • 指令的本質

  • vue 的性能優化

  • Diff 本質

• 第三層：組件的實現

• 參考資料：

• 基礎使用：

• jspang的vue教程

• Vue2.0開發企業級移動端音樂Web App

• 前端成長必經之路 組件化思維與技巧

• 源碼：

  技術征文圖技術征文圖

• • Vue.js源碼全方位深入解析做補充。電子書：《Vue.js 源碼揭秘》對于router，vuex，slot，keep-alive有詳細解釋。

  • 尤雨溪教你寫vue 高級vue教程 源碼分析!!!!這個我特意去fronted master沖了幾百元，沒想到居然有搬運。

  • 最后看完就做一下題目，看看自己能達到那種水平吧。12道vue高頻原理面試題,你能答出幾道?

  • 《深入淺出Vue.js》， 這本書真的好，作者每單介紹一個部分的時候，都會由最簡單抽象的一個demo，一步一步變成框架實際的樣子，最后拿你寫的demo和框架實際的對比，分析雙方優缺點。

  • 要先看剖析 Vue.js 內部運行機制把手教你如何寫一個最小mvvm模式，mvvm是最核心的思想。當你能懂下面的圖時候,那么可以進入下一步了

• 組件

• • vant

  • View

  • 先看一下別人的寫組件的經驗 Vue.js 組件精講。看完之后就開始動手自己模仿別人的組件了。

  • 推薦模仿對象：

  前端框架-react

  使用：- Class 的生命周期 - Hooc 高階組件 - Hook 的使用 - react-router 的使用 - Context - redux（包括mobx或saga)

  參考資料：

  • jspang的react教程

  • Hooks 重構旅游電商網站火車票

  • React.js 小書先來簡單實現一個mvc模型的react吧。

  然后 react 最難就是 fiber，fiber 的代碼實現十分復雜，這時候無需太過關注代碼，只需要知道，fiber 是解決什么問題而誕生，以及相關的概念就好。

  推薦按以下順序閱讀文章

• 這可能是最通俗的 React Fiber(時間分片) 打開方式這文章如標題，真是最通俗易懂。

• Deep In React之淺談 React Fiber 架構

• Fiber 內部: 深入理解 React 的新 reconciliation 算法

• 如何以及為什么 React Fiber 使用鏈表遍歷組件樹

有能力者，可以直接科學上網看原文吧

• Lin Clark - A Cartoon Intro to Fiber - React Conf 2017

• Inside Fiber: in-depth overview of the new reconciliation algorithm in React

• In-depth explanation of state and props update in React

• The how and why on React’s usage of linked list in Fiber to walk the component’s tree

• Practical application of reverse-engineering guidelines and principles

以下按自己喜歡挑選吧：

• react 的事件機制

• 【React深入】React事件機制

• 談談React事件機制和未來(react-events)

• react 調度機制

• 【React深入】setState的執行機制

• 再談react setState-setState如何處理更新？

• Hook

• react hooks的誕生

• react hooks進階與原理

• yck 系列

• 剖析 React 源碼：先熱個身

• 剖析 React 源碼：render 流程（一）

• 剖析 React 源碼：render 流程（二）

• 剖析 React 源碼：調度原理

• 剖析 React 源碼：組件更新流程（一）

熱身做完，直接上戰場吧：

視頻：React源碼深度解析 高級前端工程師必備技能

電子書：React 源碼解析

慚愧，我到現在還沒看完。

看得差不多就做點題目吧：

• 中高級前端大廠面試秘籍，寒冬中為您保駕護航，直通大廠

• 你要的 React 面試知識點，都在這了

組件設計：

準備看?ant.design的源碼

前端工程化-webpack

• 使用和基本概念

• 了解 loader、plugin，并且掌握一些基本常用的

• 了解 babel

參考資料：玩轉webpack

• 學會優化

• 體積優化：tree shaking、按需引入，代碼切割

• 打包速度優化：緩存、多線程打包、優化打包路徑

參考資料：

• 那些花兒，從零構建Vue工程

• Webpack 4 配置最佳實踐

• webpack4 的30個步驟打造優化到極致的 react 開發環境

• 原理

• webpack構建步驟

• 細說 webpack 之流程篇

• Webpack HMR 原理解析

• 從零實現webpack熱更新HMR

• 干貨！擼一個webpack插件(內含tapable詳解+webpack流程)

• 手把手教你擼一個 Webpack Loader

• 項目參考

其實 webpack 配置都是靠抄。。。。

• le-cli

• fe-workflow這是我參考最多的項目，涉及了初始化項目、打包、測試、聯調、質量把控、上線、回滾、線上監控（性能監控、異常監控）等等

學習心得

其實學習心得并沒改變，只不過堅持做兩年而已

刻意練習

這個之前 2018 年時候寫過，就不重復了~

鏈接：刻意練習

時間管理

對時間敏感

我桌面上有3個表

• 倒計時 40 分鐘。每次到達 40 分鐘后，我必須要去休息，可以結合以前說的番茄工作法。

• 秒表。用來檢測做題的速度，這就是為何我之前面試算法題基本都是能 5 分鐘寫出來的原因。還有是統計業務功能需要寫多久，方便之后評審排期的時間。

技術征文圖

• 手機 Ihour 記時。用來記錄學習了多少個小時，從量變到質變的過程。

技術征文圖

• 計劃與執行

按以前一樣我會有年度計劃、月度計劃、周計劃和日需要執行的任務，并且打卡記錄當天所學

技術征文圖

• 注重飲食

為了確保大腦的清醒和減肥，我采取的是輕食。盡量不吃高 GI 食物，如過度加工過的食物，米飯等等，盡量吃低 GI 食物。GI 其實是血糖指數（glycemic index, GI）的英文縮寫，也譯作血糖生成指數。主要原理是當人血糖過高或者過低時候，會容易犯困，大腦運轉速度變慢。所以要保持血糖的一定穩定，就能減少疲憊感，使效率更高。順便可以達到減肥效果。

技術征文圖

• 多鍛煉。每周起碼有2次的跑步||游泳||擼鐵

??愛心三連擊1.看到這里了就點個在看支持下吧，你的「在看」是我創作的動力。 2.關注公眾號程序員成長指北，「帶你一起學Node」！ 3.特殊階段，帶好口罩，做好個人防護。 4.添加微信【ikoala520】，拉你進技術交流群一起學習。“在看轉發”是最大的支持

總結

以上是生活随笔為你收集整理的2 年前端面试心路历程总结（字节跳动、YY、虎牙、BIGO）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。