作者：LienJack

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

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

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

現(xiàn)狀

個人背景

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

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

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

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

面試情況

• 字節(jié)跳動 offer

• 虎牙 offer

• YY offer

• BIGO offer call

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

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

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

大廠面經(jīng)

字節(jié)跳動

1 面

• 對 tree-shaking 的了解

• • 雖然生產(chǎn)模式下默認開啟，但是由于經(jīng)過 babel 編譯全部模塊被封裝成 IIFE

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

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

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

• Common.js 和 es6 module 區(qū)別

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

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

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

  • webpack 的按需加載實現(xiàn)

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

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

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

  • 介紹一下 node 如何實現(xiàn)，和 webpack 配置合并策略

• 圖片編輯器做的性能優(yōu)化

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

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

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

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

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

• 能介紹一下緩存策略嗎

• • 強緩存 cache-control、express

  • 協(xié)商緩存 304、ETag、modify

• 301、302、307、308的區(qū)別

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

• 1. 兩數(shù)之和：5 分鐘內(nèi)就做完

• 洗牌算法：5分鐘內(nèi)寫完

做完上面 2 道題后：

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

• 215. 數(shù)組中的第K個最大元素

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

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

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

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

2 面

• 圖片編輯器做的性能優(yōu)化（以上）

• redux-saga 和 mobx 的比較

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

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

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

  • 然后說了一下 mobx 大概實現(xiàn)的原理，如數(shù)據(jù)劫持，發(fā)布訂閱。

• https 有了解嗎

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

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

• 跨域有了解過嗎

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

  • nginx 轉(zhuǎn)發(fā)

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

  • 非簡單請求下發(fā)起的 options

• localstorage、sessionStorage 和 cookie 的區(qū)別

• cookie 跨域時候要如何處理

然后就開始做題：

• 70. 爬樓梯

（又是 5 分鐘寫完）

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

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

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

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

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

3 面

• 自我介紹

• 介紹項目

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

• • ipcMain、ipcRenderer

  • localStorage

• webView 和 Iframe 區(qū)別

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

  • 應用和嵌入內(nèi)容之間的交互全部都是異步的

• 你這個 PC 應用做了哪些優(yōu)化

• • 錄屏優(yōu)化

  • 大型文件上傳優(yōu)化

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

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

• 大型文件上傳

• • 文件切片

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

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

  • 進度條

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

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

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

• 錄屏優(yōu)化

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

  • 對比了 FFmpeg 和 mediaSource 的性能差異，如 CPU 和內(nèi)存消耗

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

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

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

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

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

4 面

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

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

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

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

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

虎牙

1 面

• http 的 get 和 post 區(qū)別

• 緩存策略

• https 的握手過程

• http2 的特點

• • 二進制傳輸

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

  • 多路復用

  • 服務器推送

• weak-Set、weak-Map 和 Set、Map 區(qū)別

• mvvm 模型和 mvc 模型區(qū)別

• 如何實現(xiàn)一個 mvvm 模型

• • 數(shù)據(jù)劫持 + 發(fā)布訂閱

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

• • 簡單說了一下 mobx 的實現(xiàn)原理

• 說說 vnode 的了解

• • vnode 是作為數(shù)據(jù)和視圖的一種映射關系

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

• 講講 webpack 的性能優(yōu)化

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

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

• 有寫過 plugin

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

• 了解 webpack-dev-server 的 HMR 實現(xiàn)原理嗎

• 手寫一下防抖和節(jié)流

2 面

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

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

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

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

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

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

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

  • P 幀：參考幀。解碼時依賴于前面已解碼的數(shù)據(jù)

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

• RGB 和 YUV 區(qū)別

• 有了解過哪些直播協(xié)議

• • httpflv 傳輸方式：http 流，格式：flv，連續(xù)流

  • rtmp 傳輸方式：tcp 流，格式：flv，連續(xù)流

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

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

• flv 和 mp4 區(qū)別有了解過嗎

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

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

• MediaSource 規(guī)范有了解過

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

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

3 面

• webSocket 和 ajax 的區(qū)別

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

• 有了解過 React 的 fiber

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

• 能簡單介紹一下 react 執(zhí)行過程嗎

• • performUnitOfWork

  • beginWork

  • completeUnitOfWork

jsx 經(jīng)過 babel 轉(zhuǎn)變成 render 函數(shù)

create update

enqueueUpdate

scheduleWork 更新 expiration time

requestWork

workLoop大循環(huán)

Effect List

commit

• 能介紹一下 hook 嗎

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

  • useState、useEffect、useRef 用法

  • 優(yōu)化 usecallback、useMemo

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

• • 字幕的速度，大小

  • requestAnimationFarme 和 setTimeout 區(qū)別

  • 彈幕節(jié)流問題

  • socket 和輪詢優(yōu)缺點，彈幕池的設計

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

  4 面

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

  Bigo

  1 面

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

  • 自我介紹

  • 介紹項目

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

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

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

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

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

  • 如何使用盡可能少的空間做矩陣的轉(zhuǎn)置

  • • 本質(zhì)上就是867. 轉(zhuǎn)置矩陣

  然后有白板寫了一下

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

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

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

  然后是情景題，當場設計系統(tǒng)。

  情景以下：

  • 這是一個多人在線協(xié)同網(wǎng)頁

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

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

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

  這個項目的難點有以下

  • 視頻的時間幀的確定

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

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

  • 繪畫過程中 canvas 的優(yōu)化

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

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

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

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

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

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

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

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

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

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

  2 面

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

  • 瀏覽器緩存策略

  • 跨域處理

  • https 握手

  • http2 特性

  • tcp 三次握手

  • 從 url 到頁面顯示

  • redux 和 mobx 的差異

  • tree-shaking

  • 項目的性能優(yōu)化

  • css 的 BEM 規(guī)范

  • 當場設計一個 toast

  • LRU 實現(xiàn)

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

  3 面

  聊得比較廣，沒啥重點

  YY

  1 面

  • mvvm 和 mvc 模型區(qū)別

  • mvvm 的實現(xiàn)

  • 了解 fiber 嗎

  • • 答案之前有

  • 了解 hook 嗎

  • • 答案之前有

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

  • • react 的事件合成

  • setState 是異步還是同步

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

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

    • 放在 setTimeout 就能實時改變

  • 有用過 node 嗎，講講流

  • koa2 和 express 區(qū)別

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

    • koa2 能使用 async await，express 不能

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

  • 講講洋蔥模型

  • 實現(xiàn)一個函數(shù) compose([fn1,fn2,fn3..]) 轉(zhuǎn)成 fn3(fn2(fn1()))

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

  • koa2 和 egg 的區(qū)別

  • • egg 是在 koa2 上的封裝

    • egg 有 controller，service，router

    • 約定了文件目錄結構

  • 鑒權有了解過了

  • • Seesion/cookie

    • Token

    • OAuth

    • SSO

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

  2 面

  • 瀏覽器緩存策略

  • 跨域處理

  • https 握手

  • xss 和 csrf 攻擊

  • Typscript 有了解嗎，能講講嗎

  • • 接口

    • 枚舉

    • 泛型

  • webpack 優(yōu)化

  • tree-shaking

  • HMR 實現(xiàn)原理

  • nginx 有了解嗎

  • • 扯了一下跨域如何配置/轉(zhuǎn)發(fā)

    • 緩存策略配置

    • 地址重定向配置

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

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

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

    • 用 requestanimationframe 繪畫動畫

    • 用 css3 開啟硬件 GPU 加速

  3 面

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

  學習過程

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

  以下會分為：

• 計算機基礎

• 前端專業(yè)知識

• 學習心得

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

計算機基礎

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

數(shù)據(jù)結構和算法

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

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

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

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

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

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

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

基本數(shù)據(jù)結構

• 數(shù)組

• 隊列和棧

• 鏈表

• 二叉樹

• hash

• 堆

常見的算法

• DFS

• BFS

• 滑動窗口（雙指針）

• 回溯

• 動態(tài)規(guī)劃

• 貪心（其實動態(tài)規(guī)劃可以解決）

• 排序

• 二分查找

參考資料：

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

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

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

• leetcode 字節(jié)跳動專欄

• leetcode 劍指 offer

blog:

• awesome-coding-js用 JavaScript 實現(xiàn)的算法和數(shù)據(jù)結構

• labuladong這個動態(tài)規(guī)范講得真的好

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

網(wǎng)絡

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

觀看順序：

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

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

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

最后補充的書籍

• 圖解 http 協(xié)議

• 圖解 tcp 協(xié)議

• TCP/IP 詳解（第一卷）

tips：

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

其他

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

前端專業(yè)知識

前端基礎-JS

以下必須要十分熟悉：

• 類型，涉及以下：

• • 類型種類

  • 判斷

  • 轉(zhuǎn)換

  • 深度拷貝

• 閉包，涉及以下：

• • 作用域

  • v8 垃圾回收

  • 變量提升

• 異步，涉及以下：

• • Promsie 的歷史，用法，簡單手寫 Promsie 實現(xiàn)

  • async await 原理，generator

  • 宏任務與微任務區(qū)別

• 原型鏈，涉及以下

• • prototype和?__proto__

  • 繼承

  • oop 編程思想

• 模塊化

• • CommonJS 和 ES6 module

  • AMD 與 CMD 區(qū)別（比較舊可以忽略）

• ES6 特性

• • let const

  • 箭頭函數(shù)

  • Set、Map、WeakSet 和 WeakMap

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

參考資料：

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

書籍：

入門

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

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

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

• 《阮一峰 ES6入門》

BLOG:

• 前端進階之道

• 前端面試與進階指南

• ConardLi 的 blog

• 木易楊前端進階

• FE-Interview

• 冴羽的博客

掘金好文章：

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

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

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

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

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

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

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

付費好東西：

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

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

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

前端基礎-瀏覽器

有以下比較經(jīng)典的問題：

• 緩存策略：協(xié)商緩存和強緩存

• 頁面的渲染過程

• 頁面性能優(yōu)化

參考資料：

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

• 《webkit技術揭秘》

前端基礎-css

• css 選擇器優(yōu)先度

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

• 清除浮動

• 盒子模型

• flex

• 層級上下文

• 各種布局

前端框架-vue

• 第一個層次：使用

• provide / inject

• pros emit

• listen

• event bus

• 自行實現(xiàn) dispatch 和 broadcast 方法

• vue 的生命周期

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

• data，computer，watcher使用

• 組件通信

• 第二層：原理

• • 如何簡單實現(xiàn)一個mvvm模型

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

  • data，watcher，computer的源碼實現(xiàn)

  • nextTick 的原理

  • 指令的本質(zhì)

  • vue 的性能優(yōu)化

  • Diff 本質(zhì)

• 第三層：組件的實現(xiàn)

• 參考資料：

• 基礎使用：

• jspang的vue教程

• Vue2.0開發(fā)企業(yè)級移動端音樂Web App

• 前端成長必經(jīng)之路 組件化思維與技巧

  源碼：

  
  
  

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

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

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

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

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

• 組件

• • vant

  • View

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

  • 推薦模仿對象：

  前端框架-react

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

  參考資料：

  • jspang的react教程

  • Hooks 重構旅游電商網(wǎng)站火車票

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

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

  推薦按以下順序閱讀文章

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

• Deep In React之淺談 React Fiber 架構

• Fiber 內(nèi)部: 深入理解 React 的新 reconciliation 算法

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

有能力者，可以直接科學上網(wǎng)看原文吧

• 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 調(diào)度機制

• 【React深入】setState的執(zhí)行機制

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

• Hook

• react hooks的誕生

• react hooks進階與原理

• yck 系列

• 剖析 React 源碼：先熱個身

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

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

• 剖析 React 源碼：調(diào)度原理

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

熱身做完，直接上戰(zhàn)場吧：

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

電子書：React 源碼解析

慚愧，我到現(xiàn)在還沒看完。

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

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

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

組件設計：

準備看?ant.design的源碼

前端工程化-webpack

• 使用和基本概念

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

• 了解 babel

參考資料：玩轉(zhuǎn)webpack

• 學會優(yōu)化

• 體積優(yōu)化：tree shaking、按需引入，代碼切割

• 打包速度優(yōu)化：緩存、多線程打包、優(yōu)化打包路徑

參考資料：

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

• Webpack 4 配置最佳實踐

• webpack4 的30個步驟打造優(yōu)化到極致的 react 開發(fā)環(huán)境

• 原理

• webpack構建步驟

• 細說 webpack 之流程篇

• Webpack HMR 原理解析

• 從零實現(xiàn)webpack熱更新HMR

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

• 手把手教你擼一個 Webpack Loader

• 項目參考

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

• le-cli

• fe-workflow這是我參考最多的項目，涉及了初始化項目、打包、測試、聯(lián)調(diào)、質(zhì)量把控、上線、回滾、線上監(jiān)控（性能監(jiān)控、異常監(jiān)控）等等

學習心得

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

刻意練習

這個之前 2018 年時候?qū)戇^，就不重復了~

鏈接：刻意練習

時間管理

對時間敏感

我桌面上有3個表

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

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

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

• 計劃與執(zhí)行

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




• 注重飲食

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




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

點贊是最大的支持?

總結

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。