2 年前端面試心路曆程（位元組跳動、YY、虎牙、BIGO）

作者：lienjack

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

由于微信禁止外鍊，為了更好的閱讀體驗，可以直接點選閱讀原文

本文将先從個人背景講起，然後談談在位元組跳動、虎牙、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
  1. jsx 經過 babel 轉變成 render 函數
  2. create update
  3. enqueueUpdate
  4. scheduleWork 更新 expiration time
  5. requestWork
  6. workLoop大循環
  7. Effect List
  8. 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的每日學習

以下會分為：

1. 計算機基礎
2. 前端專業知識
3. 學習心得

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

計算機基礎

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

資料結構和算法

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

1. 入門方式有很多種看書看視訊，邊看邊敲。
2. 然後就可以上網看别人面經和一些 leetcode 大神總結的經典題目，按照分類開始刷了。
3. 每道題至少做 3 次，第一次時候遇到不會就不要想很久，8 分鐘沒有思路就看答案。因為大家一開始都是沒啥思路，隻有做多多總結才會慢慢有思路。做完後一周後再做第二次。準備跳槽時候再做第三次。
4. 算題順序為算法面試通關 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

1. 第一個層次：使用
   • provide / inject
   • pros emit

   

   listen
   • event bus
   • 自行實作 dispatch 和 broadcast 方法
   • vue 的生命周期
   • vue 全家桶使用，vuex，vue-router
   • data，computer，watcher使用
   • 元件通信
2. 第二層：原理
   • 如何簡單實作一個mvvm模型
   • new vue 時候發生什麼，每個生命周期對應的源碼做了什麼
   • data，watcher，computer的源碼實作
   • nextTick 的原理
   • 指令的本質
   • vue 的性能優化
   • Diff 本質
3. 第三層：元件的實作

參考資料：

1. 基礎使用：
   • jspang的vue教程
   • Vue2.0開發企業級移動端音樂Web App
   • 前端成長必經之路 元件化思維與技巧
2. 源碼：

技術征文圖

技術征文圖

• Vue.js源碼全方位深入解析做補充。電子書：《Vue.js 源碼揭秘》對于router，vuex，slot，keep-alive有詳細解釋。
• 尤雨溪教你寫vue 進階vue教程 源碼分析!!!!這個我特意去fronted master沖了幾百元，沒想到居然有搬運。
• 最後看完就做一下題目，看看自己能達到那種水準吧。12道vue高頻原理面試題,你能答出幾道?
• 《深入淺出Vue.js》， 這本書真的好，作者每單介紹一個部分的時候，都會由最簡單抽象的一個demo，一步一步變成架構實際的樣子，最後拿你寫的demo和架構實際的對比，分析雙方優缺點。
• 要先看剖析 Vue.js 内部運作機制把手教你如何寫一個最小mvvm模式，mvvm是最核心的思想。當你能懂下面的圖時候,那麼可以進入下一步了

1. 元件
   • 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 是解決什麼問題而誕生，以及相關的概念就好。

推薦按以下順序閱讀文章

1. 這可能是最通俗的 React Fiber(時間分片) 打開方式這文章如标題，真是最通俗易懂。
2. Deep In React之淺談 React Fiber 架構
3. Fiber 内部: 深入了解 React 的新 reconciliation 算法
4. 如何以及為什麼 React Fiber 使用連結清單周遊元件樹
5. Lin Clark - A Cartoon Intro to Fiber - React Conf 2017
6. Inside Fiber: in-depth overview of the new reconciliation algorithm in React
7. In-depth explanation of state and props update in React
8. The how and why on React’s usage of linked list in Fiber to walk the component’s tree
9. Practical application of reverse-engineering guidelines and principles

以下按自己喜歡挑選吧：

• react 的事件機制

1. 【React深入】React事件機制
2. 談談React事件機制和未來(react-events)

• react 排程機制

1. 【React深入】setState的執行機制
2. 再談react setState-setState如何處理更新？

• Hook

1. react hooks的誕生
2. react hooks進階與原理

• yck 系列

1. 剖析 React 源碼：先熱個身
2. 剖析 React 源碼：render 流程（一）
3. 剖析 React 源碼：render 流程（二）
4. 剖析 React 源碼：排程原理
5. 剖析 React 源碼：元件更新流程（一）

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

視訊：React源碼深度解析 進階前端工程師必備技能

電子書：React 源碼解析

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

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

• 中進階前端大廠面試秘籍，寒冬中為您保駕護航，直通大廠
• 你要的 React 面試知識點，都在這了

元件設計：

準備看 ant.design的源碼

前端工程化-webpack

1. 使用和基本概念
   • 了解 loader、plugin，并且掌握一些基本常用的
   • 了解 babel

參考資料：玩轉webpack

1. 學會優化
   • 體積優化：tree shaking、按需引入，代碼切割
   • 打包速度優化：緩存、多線程打包、優化打包路徑

參考資料：

• 那些花兒，從零建構Vue工程
• Webpack 4 配置最佳實踐
• webpack4 的30個步驟打造優化到極緻的 react 開發環境

1. 原理

• webpack建構步驟
• 細說 webpack 之流程篇
• Webpack HMR 原了解析
• 從零實作webpack熱更新HMR
• 幹貨！撸一個webpack插件(内含tapable詳解+webpack流程)
• 手把手教你撸一個 Webpack Loader

1. 項目參考

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

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

學習心得

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

刻意練習

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

連結：刻意練習

時間管理

對時間敏感

我桌面上有3個表

1. 倒計時 40 分鐘。每次到達 40 分鐘後，我必須要去休息，可以結合以前說的番茄工作法。
2. 秒表。用來檢測做題的速度，這就是為何我之前面試算法題基本都是能 5 分鐘寫出來的原因。還有是統計業務功能需要寫多久，友善之後評審排期的時間。

技術征文圖

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

技術征文圖

1. 計劃與執行

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

技術征文圖

1. 注重飲食

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

技術征文圖

1. 多鍛煉。每周起碼有2次的跑步||遊泳||撸鐵

「其實我做的事情沒有變，一直堅持做，改變的隻有結果而已。」

- End -