本文將先從個人背景講起鱼鼓，然后談?wù)勗谧止?jié)跳動拟烫、虎牙、YY 以及 BIGO 的面試經(jīng)過蚓哩，最后講一下關(guān)于計算機基礎(chǔ)构灸、算法與數(shù)據(jù)結(jié)構(gòu)、JavaScript 等方面的學習經(jīng)驗岸梨，以及聊聊個人學習經(jīng)驗。

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

現(xiàn)狀

個人背景

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

于是在 2017 年畢業(yè)后準備了 6 個月考研計算機，那時候真的痛苦奢米，從零開始學數(shù)據(jù)結(jié)構(gòu)抓韩、計算機網(wǎng)絡(luò)、組成原理和操作系統(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)的克拉默法則

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

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

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

能介紹一下緩存策略嗎

強緩存 cache-control、express

協(xié)商緩存 304呀非、ETag坚俗、modify

301、302岸裙、307猖败、308的區(qū)別

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

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

技術(shù)征文圖

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

做完上面 2 道題后：

面試官：emm....面試時間還沒結(jié)束再做一道題目吧恩闻！

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

技術(shù)征文圖

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

面試官：emm拟糕。判呕。倦踢。。還有點時間侠草，你還有想到別的辦法嗎

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

好了边涕，面試結(jié)束晤碘，然而這才是噩夢的開始。由于算法題做的太快功蜓，不知面試官寫了我啥評價园爷，后面的面試基本變成做各種題。

2 面

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

redux-saga 和 mobx 的比較

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

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

由于是直播相關(guān)的 electron 項目童社，存在音視頻流嗅义，和一些底層 OS 操作耻煤，那么我們是否可以以麥克風視圖開關(guān)對于音頻流的處理為例子，把 OS 的一些操作與數(shù)據(jù)做一個映射層划鸽，就像數(shù)據(jù)和視圖存在映射關(guān)系一樣美浦，那么數(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. 爬樓梯

技術(shù)征文圖

（又是 5 分鐘寫完）

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

技術(shù)征文圖

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

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

技術(shù)征文圖

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

面試結(jié)束了，感覺都是在做題响巢。

3 面

自我介紹

介紹項目

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

ipcMain、ipcRenderer

localStorage

webView 和 Iframe 區(qū)別

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

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

你這個 PC 應(yīng)用做了哪些優(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 寫在硬盤里面十绑，然后結(jié)束錄制時候聚至，把每個 10s 的小視頻片段用 FFmpeg 合成一個大的文件

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

技術(shù)征文圖

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

4 面

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

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

技術(shù)征文圖

做完后在此基礎(chǔ)上促脉，改變成

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

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

虎牙

1 面

http 的 get 和 post 區(qū)別

緩存策略

https 的握手過程

http2 的特點

二進制傳輸

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

多路復用

服務(wù)器推送

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

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

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

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

為何你用 mobx 重構(gòu)了 saga滩褥，說說兩者之間的區(qū)別

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

說說 vnode 的了解

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

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ù)器，一個是聲網(wǎng)用來控制進房間媒體流的 socket苛蒲，一個是業(yè)務(wù)邏輯的 socket

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

對于 P 幀、I 幀臂外、B 幀有了解過

I 幀：關(guān)鍵幀窟扑。可以單獨解碼成一幅完整的圖像漏健。

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)缺點亡哄，彈幕池的設(shè)計

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

4 面

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

Bigo

1 面

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

自我介紹

介紹項目

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

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

求一下三個三元一次方程

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

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

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

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

技術(shù)征文圖

然后有白板寫了一下

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

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

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

技術(shù)征文圖

然后是情景題重窟，當場設(shè)計系統(tǒng)载萌。

情景以下：

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

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

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

emm扭仁。垮衷。。乖坠。那我大概知道為何之前問我這么多數(shù)學問題

這個項目的難點有以下

視頻的時間幀的確定

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

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

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

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

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

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

使用信令服務(wù)器村缸，用 websocket 連接

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

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

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

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

第二題：假設(shè)有偶數(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ī)范

當場設(shè)計一個 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

約定了文件目錄結(jié)構(gòu)

鑒權(quán)有了解過了

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的每日學習

以下會分為：

計算機基礎(chǔ)

前端專業(yè)知識

學習心得

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

計算機基礎(chǔ)

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

數(shù)據(jù)結(jié)構(gòu)和算法

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

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

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

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

算題順序為算法面試通關(guān) 40 講斗塘、劍指 offer赢织、字節(jié)跳動專欄、自己總結(jié)的高頻題逛拱。

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

技術(shù)征文圖

但是我做的題目范圍比較廣俱两，而且都是自己總結(jié)高頻再去做，命中的幾率比較大曹步。

基本數(shù)據(jù)結(jié)構(gòu)

數(shù)組

隊列和棧

鏈表

二叉樹

hash

堆

常見的算法

DFS

BFS

滑動窗口（雙指針）

回溯

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

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

排序

二分查找

參考資料：

JavaScript版 數(shù)據(jù)結(jié)構(gòu)與算法宪彩，這個適合新人學習，入門基本讲婚。

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

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

leetcode 字節(jié)跳動專欄

leetcode 劍指 offer

blog:

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

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

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

網(wǎng)絡(luò)

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

觀看順序：

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

極客時間-趣談網(wǎng)絡(luò)協(xié)議作者生動用例子解釋網(wǎng)絡(luò)各層的作用和他們之間的關(guān)系，在此形成一個整體的架空捎泻，方便后面細節(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è)知識

前端基礎(chǔ)-JS

以下必須要十分熟悉：

類型捉貌，涉及以下：

類型種類

判斷

轉(zhuǎn)換

深度拷貝

閉包，涉及以下：

作用域

v8 垃圾回收

變量提升

異步冬念，涉及以下：

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

async await 原理急前，generator

宏任務(wù)與微任務(wù)區(qū)別

原型鏈醒陆，涉及以下

prototype和__proto__

繼承

oop 編程思想

模塊化

CommonJS 和 ES6 module

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

ES6 特性

let const

箭頭函數(shù)

Set、Map叔汁、WeakSet 和 WeakMap

之前提及的 Promsie统求，async检碗，Class，Es6 module

參考資料：

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

書籍：

入門

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

《你不知道的JavaScript(上)》

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

《阮一峰 ES6入門》

BLOG:

前端進階之道

前端面試與進階指南

ConardLi 的 blog

木易楊前端進階

FE-Interview

冴羽的博客

掘金好文章：

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

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

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

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

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

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

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

付費好東西：

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

前端面試之道|比較基礎(chǔ)的前端知識领突，適合新人

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

前端基礎(chǔ)-瀏覽器

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

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

頁面的渲染過程

頁面性能優(yōu)化

參考資料：

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

《webkit技術(shù)揭秘》

前端基礎(chǔ)-css

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

rem谱俭、em、vh宵蛀、vw 和 px 的關(guān)系昆著，以及移動端適配方式

清除浮動

盒子模型

flex

層級上下文

各種布局

前端框架-vue

第一個層次：使用

provide / inject

pros emit

atty? ?listen

event bus

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

vue 的生命周期

vue 全家桶使用，vuex术陶，vue-router

data凑懂，computer，watcher使用

組件通信

第二層：原理

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

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

data接谨，watcher摆碉，computer的源碼實現(xiàn)

nextTick 的原理

指令的本質(zhì)

vue 的性能優(yōu)化

Diff 本質(zhì)

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

參考資料：

基礎(chǔ)使用：

jspang的vue教程

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

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

源碼：

技術(shù)征文圖

技術(shù)征文圖

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 重構(gòu)旅游電商網(wǎng)站火車票

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

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

推薦按以下順序閱讀文章

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

Deep In React之淺談 React Fiber 架構(gòu)

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事件機制

談?wù)凴eact事件機制和未來(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 面試知識點拓劝，都在這了

組件設(shè)計：

準備看?ant.design的源碼

前端工程化-webpack

使用和基本概念

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

了解 babel

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

學會優(yōu)化

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

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

參考資料：

那些花兒笛匙，從零構(gòu)建Vue工程

Webpack 4 配置最佳實踐

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

原理

webpack構(gòu)建步驟

細說 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 分鐘后签财，我必須要去休息，可以結(jié)合以前說的番茄工作法偏塞。

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

技術(shù)征文圖

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

技術(shù)征文圖

計劃與執(zhí)行

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

技術(shù)征文圖

注重飲食

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

想要資料的小伙伴扣1

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