面試之前

先說(shuō)好，問(wèn)題的答案都不是唯一的， 大部分只提供題目哈 ，后面有答案會(huì)慢慢補(bǔ)上！當(dāng)時(shí)回答的都不是特別完全。面試過(guò)程比較長(zhǎng)，從年初開(kāi)始斷斷續(xù)續(xù)面試，沒(méi)有做太詳細(xì)的規(guī)劃，有些答案也不記得當(dāng)時(shí)怎么回答的。

年初面試的公司還是比較多的，美團(tuán)、頭條、阿里、快手、滴滴、Shopee等等以及幾個(gè)不知名小公司。從各種前輩的經(jīng)驗(yàn)來(lái)說(shuō)，是先拿小公司溫故而知新一下哈，把自己的知識(shí)通過(guò)一次一次小面試歸納在一起。但實(shí)際上我遇到的情況是，小公司并不問(wèn)太深的框架原理和基礎(chǔ)（可能會(huì)有注重的公司，只是我沒(méi)遇到）， 基本會(huì)著重于做過(guò)的項(xiàng)目經(jīng)歷 ，所以這幾次面試并沒(méi)有新的技術(shù)提升（畢竟每次面試都是在學(xué)習(xí)，從面試技巧來(lái)說(shuō)，起碼后面的時(shí)候你可以把自己做的項(xiàng)目說(shuō)的更精彩...）。

對(duì)于大廠的面試，我只能說(shuō)還是挺難的，首先和快手面試溝通的時(shí)候，最初的幾個(gè)問(wèn)題也比較緊張，回答的不在點(diǎn)上，面試官帶個(gè)鴨舌帽，基本上沒(méi)看我，偶爾和我對(duì)視一眼，從一開(kāi)始就一副對(duì)我沒(méi)有興趣的樣子，收到了十分大的打擊，當(dāng)時(shí)對(duì)快手很有好感，特意請(qǐng)了一天假準(zhǔn)備面試，沒(méi)想到慘淡收?qǐng)觥?/p>

其他的面試，面試官都很nice，雖然有的過(guò)了有的沒(méi)過(guò)，起碼體驗(yàn)上還不錯(cuò)，而且也學(xué)到了很多東西。因?yàn)槊嬖囶}都是比較類似的，會(huì)針對(duì)你的簡(jiǎn)歷去發(fā)問(wèn)，基本上 20 分鐘左右會(huì)講項(xiàng)目，20 分鐘討論技術(shù)原理和基礎(chǔ)，最后時(shí)間會(huì)手寫(xiě)幾道題，算法還是程序題跟面試官喜好有關(guān)，起碼個(gè)人覺(jué)得沒(méi)有特別為難的題。

同時(shí)因?yàn)槊嬖囶}類似，也就沒(méi)有特意區(qū)分題目是來(lái)自于哪家公司，希望同學(xué)自行腦補(bǔ)...

下面是我盡力回憶的面試題，以及雖然沒(méi)考，但是很有可能會(huì)考的題目，希望能幫助最近有想要跳槽的同學(xué)！

面經(jīng)部分

僅供參考，僅供參考，僅供參考?。。?/p>

因?yàn)閹缀鯖](méi)有 React 相關(guān)經(jīng)歷，問(wèn)我最多的 React 問(wèn)題就是你覺(jué)得和 vue 有什么區(qū)別？

啊...從這一點(diǎn)來(lái)說(shuō)，簡(jiǎn)歷環(huán)節(jié)確實(shí)很關(guān)鍵。 其實(shí)我做過(guò)，但我不精通，簡(jiǎn)歷上不寫(xiě)，所以我不會(huì)，別問(wèn)...

下面的面經(jīng)部分被我分為了八個(gè)方面：（下面題目的:star2:代表面試頻率出現(xiàn)過(guò)多次）

• JavaScript 基礎(chǔ)

• Css 以及優(yōu)化

• vue 或 react 框架相關(guān)

• 前端打包等工程化

• 瀏覽器及常見(jiàn)安全問(wèn)題相關(guān)

• 跨平臺(tái)技術(shù)

• 網(wǎng)絡(luò)相關(guān)

• 少量算法

其中并沒(méi)有 Html 相關(guān)的東西，一方面確實(shí)是相關(guān)的題目少，另外不會(huì)有太難的問(wèn)題，平時(shí)開(kāi)發(fā)時(shí)常見(jiàn)的情況基本可以解決。

并且因?yàn)槭?nbsp;從自己的簡(jiǎn)歷 來(lái)發(fā)問(wèn)，所以有些也很常見(jiàn)的 nodejs、serverless、GraphQL 等等都不在我的面試題里，但很有可能 出現(xiàn)在你的題目里 ，相關(guān)題目可以自行補(bǔ)課！

原生 JS 代碼

1. JavaScript 實(shí)現(xiàn)對(duì)上傳圖片的壓縮？

答：讀取用戶上傳的 File 對(duì)象，讀寫(xiě)到畫(huà)布（canvas）上，利用 Canvas 的 API 進(jìn)行壓縮，完成壓縮之后再轉(zhuǎn)成 File（Blob） 對(duì)象，上傳到遠(yuǎn)程圖片服務(wù)器；不過(guò)有時(shí)候我們也需要將一個(gè) base64 字符串壓縮之后再變?yōu)?base64 字符串傳入到遠(yuǎn)程數(shù)據(jù)庫(kù)或者再轉(zhuǎn)成 File（Blob） 對(duì)象。

思路就是 File + Canvas 的 drawImage

可以看看張?chǎng)涡翊罄械奈恼?HTML5 file API加canvas實(shí)現(xiàn)圖片前端JS壓縮并上傳

2. 談一談 JavaScript 的異步？

答：setTimeout、MutationObserver、postMessage、Promise、async、await、generator

從 MutationObserver、postMessage 會(huì)牽扯到 vue 的 $nextTick

從 generator 會(huì)聊到 co.js 實(shí)現(xiàn)，代碼不長(zhǎng)，意思也好理解，但讓我寫(xiě)還真沒(méi)寫(xiě)出來(lái)，建議兄弟們好好看一遍！

從 Promise 和 setTimeout 會(huì)聊到下面要說(shuō)的 事件循環(huán)

3. 瀏覽器和 nodejs 事件循環(huán)？

答：執(zhí)行棧，promise 是 microTask，setTimeout 是 task

其中很多的階段，可以從這里看到完整的模型介紹：html.spec.whatwg.org/multipage/w…

需要說(shuō)出來(lái)的點(diǎn)：首先 setTimeout 并沒(méi)有特殊，也是一個(gè) task。另外每次的執(zhí)行過(guò) task 和 大量的 microtask（不一定在一次循環(huán)全執(zhí)行完）后，會(huì)進(jìn)行 renderUi 階段，雖然不是每次事件循環(huán)都進(jìn)行 renderUi ，但每次間隔，也就是傳說(shuō)中 60hz 的一幀 16ms 。

nodejs 事件循環(huán)略有不同...多了 process.nextTick 等

4. 手寫(xiě) Promise 或者 Promise 的靜態(tài)方法

答：手寫(xiě) Promise 盡量寫(xiě)出來(lái) Promise 的狀態(tài)，靜態(tài)方法以及 .then ， .catch 。當(dāng)然更細(xì)節(jié)的還原可以看 Promise A+ 規(guī)范。

靜態(tài)方法指 Promise.allSettled Promise.all Promise.race 等等。

5. 手寫(xiě)節(jié)流與防抖 

答：老生常談，原理很簡(jiǎn)單，主要還是看會(huì)不會(huì)封裝函數(shù)，以及封裝的高級(jí)與否，考慮的情況是否全面。

6. 手寫(xiě) bind 函數(shù)

答：同上。

7. service worker 使用

答：緩存，漸進(jìn)式應(yīng)用，攔截處理

聊到 worker 可能還會(huì)聊到 web worker， shared worder 等等，如果有自信，或者工作對(duì)這方面有深入理解，可以秀一下。能體現(xiàn)出自己的優(yōu)勢(shì)...

8. 嚴(yán)格模式

答：this 的 undefined，禁止 with，arguments 不允許更改，給只讀對(duì)象賦值拋異常，變量需要先聲明，call，apply 第一個(gè)參數(shù)不會(huì)被轉(zhuǎn)換...

能答出來(lái)一些就行。

9. 原型鏈以及繼承

答：很常問(wèn)，但隨便找個(gè)贊數(shù)高的講解，看一遍就懂了，記住?？键c(diǎn)即可。

10. 正則表達(dá)式匹配規(guī)則？

答：這個(gè)真沒(méi)辦法，只能是對(duì)正則表達(dá)式的規(guī)則進(jìn)行系統(tǒng)學(xué)習(xí)，當(dāng)然常考的可能是 郵箱，url 匹配。

css 以及優(yōu)化

1. flex 布局 :star2:

答：阮一峰老師的 flex 文章，清晰易懂。

常用的 api 和兩列、三列布局等等，對(duì)于我來(lái)說(shuō)稍微有點(diǎn)難度。之前項(xiàng)目對(duì)兼容性高，基本沒(méi)怎么用過(guò) flex 布局。沒(méi)用過(guò)的建議用一用，幾個(gè)小時(shí)就會(huì)常見(jiàn)布局了。

2. 優(yōu)化長(zhǎng)列表滾動(dòng)效果

沒(méi)答上來(lái)，說(shuō)了幾個(gè) js 的方案沒(méi)答對(duì)點(diǎn)上。

面試官答曰：transition 優(yōu)化動(dòng)畫(huà)效果，分層渲染

后面分析了一下，可以用 transform 進(jìn)行強(qiáng)制分層，第二種可以用 content-visibility 將看不見(jiàn)的元素不渲染，設(shè)置值為 auto 即可。第三個(gè)是對(duì)于某些動(dòng)畫(huà)效果，可以用 will-change 作用在父元素上進(jìn)行 gpu 加速，使用后刪掉。

3. 響應(yīng)式布局 :star2:

答：可能會(huì)涉及 css 函數(shù)，rem/em 區(qū)別，媒體查詢...

4. 什么是 BFC？

答：塊級(jí)格式化上下文，我布局總用！

問(wèn)：什么會(huì)形成 BFC？它的作用是什么？

答：

• body 根元素

• 浮動(dòng)元素：float 除 none 以外的值

• 絕對(duì)定位元素：position (absolute、fixed)

• display 為 inline-block、table-cells、flex

• overflow 除了 visible 以外的值 (hidden、auto、scroll)

作用嘛，為了布局:joy:（千萬(wàn)別這么答哈，具體可以看下面文章）

推薦一篇 BFC 文章

vue 或 react 框架相關(guān)

1. vue 響應(yīng)式原理以及雙向綁定實(shí)現(xiàn)代碼 ? :star2:

2. vue3 響應(yīng)式原理，有什么不同？

3. vue 的 diff 算法思路，怎么對(duì)比節(jié)點(diǎn)？

4. vue 的 compile 實(shí)現(xiàn)？:star2:

5. vue 如何自定義指令？具體的 api 寫(xiě)法？

6. vue3 對(duì)于 vue2 在性能上的優(yōu)化（從 compile 和 runtime 兩方面）？

7. react 有什么不同？了解 hooks 嗎？

答：（雖然我不會(huì)，但我可以說(shuō)點(diǎn)別的，比如 vue3 也有 hooks，它的使用和一些優(yōu)點(diǎn)？）

8. 用過(guò) TypeScript 嗎？有什么優(yōu)點(diǎn)，為什么用？具體的場(chǎng)景，使用 TypeScript 進(jìn)行類型定義。

答：vue 項(xiàng)目多， ts 用的少，也用過(guò)，寫(xiě)前端監(jiān)控 sdk 時(shí)，對(duì)接口進(jìn)行類型校驗(yàn)，它像一個(gè)文檔，每一個(gè)接口都有定義，后面再翻看瞬間理解意思。（強(qiáng)類型好處還有很多，但是個(gè)人覺(jué)得寫(xiě)起來(lái)超級(jí)麻煩，當(dāng)然有人很喜歡很爽。）

9. vue 的 keep-alive 使用場(chǎng)景，以及原理？:star2:

前端打包等工程化

1. webpack 和 rollup 使用？

2. tree-shaking 原理？:star2:

3. webpack loader 和 plugin 怎么寫(xiě)？

4. 你對(duì) vite 熟悉，和 webpack 區(qū)別？

5. 給 vite 做的貢獻(xiàn)和在實(shí)際項(xiàng)目的使用？

• vite-electron-quick Git 地址

• 代碼被 merge 的 pr 歷史

6. 如何統(tǒng)一對(duì)錯(cuò)誤進(jìn)行捕獲的？vue 的異步錯(cuò)誤如何捕獲？

• 自己寫(xiě)的 JS 錯(cuò)誤捕獲 SDK Git 地址

瀏覽器及常見(jiàn)安全問(wèn)題相關(guān)

1. 瀏覽器頁(yè)面加載過(guò)程，越詳細(xì)越好 :star2:

2. 瀏覽器緩存 :star2:

3. 跨域問(wèn)題及處理 :star2:

4. v8 快數(shù)組慢數(shù)組，hidden class 或者其他模塊？

5. xss 和 csrc 的意思？如何防范？:star2:

答：美團(tuán)的兩篇文章擺出來(lái)，面試官直接問(wèn)下一題！

• xss 防范

• csrf 防范

跨平臺(tái)技術(shù)

1. electron 使用，如何實(shí)現(xiàn)小托盤(pán)功能？

2. flutter 的 widget stateFullWidget stateLessWidget 區(qū)別？

3. js Bridge 的原理 ？:star2:

4. flutter 的渲染引擎？

網(wǎng)絡(luò)相關(guān)

1. dns 相關(guān)，dns 服務(wù)器是什么，如何查詢 dns 的？:star2:

2. Oauth2.0 和 jwt 單點(diǎn)登錄等

3. http/https 區(qū)別？為什么 https 更安全一點(diǎn)？https 為什么也不是十分安全？

4. http1.x 和 http2.0 的區(qū)別？http2.0 優(yōu)點(diǎn)，以及某些情況會(huì)比 1.x 速度更慢？

5. https 加密原理？

6. http2.0 壓縮頭，以及并行請(qǐng)求原理？

7. tcp 的連接方式？

少量算法

• 回文串，中心擴(kuò)散法

• 冒泡，快排 :star2:

• 二分查找 :star2:

• 二叉樹(shù) :star2:

• 動(dòng)態(tài)規(guī)劃 （沒(méi)遇到考這個(gè)的，可能難度太高，面試官看我簡(jiǎn)單的半天才拿下，這個(gè)直接不考慮了，大佬可以關(guān)注一下）

面試中的項(xiàng)目題

大概就是讓你去設(shè)計(jì)一個(gè)系統(tǒng)的技術(shù)選型，或者是如何設(shè)計(jì)組件庫(kù)，設(shè)計(jì)一個(gè)系統(tǒng)。個(gè)人猜測(cè)對(duì)于渣渣的我，這種題就是看看有沒(méi)有 owner 意識(shí)，而且也可以看一下我對(duì)哪些技術(shù)更感興趣？

除了系統(tǒng)，還有某些場(chǎng)景的設(shè)計(jì)方案，比如如何用鑒權(quán)控制登陸時(shí)間設(shè)計(jì) 保持七天登錄狀態(tài) 。

因?yàn)槲液?jiǎn)歷中幾乎沒(méi)有涉及 nodejs 服務(wù)端的東西，但面試官總想問(wèn)一問(wèn)...

只能說(shuō)做過(guò)自己博客的服務(wù)端...

服務(wù)端代碼 Git 地址

但是很簡(jiǎn)陋...只能說(shuō)開(kāi)發(fā)過(guò):joy:

總結(jié)

• 對(duì)于框架原理只能說(shuō)個(gè)大概，真的深入某一部分具體的代碼和實(shí)現(xiàn)方式就只能寫(xiě)出一個(gè)框架，許多細(xì)節(jié)注意不到。

• 算法方面還是很薄弱，好在面試官都很和藹可親，擅長(zhǎng)發(fā)現(xiàn)人的美哈哈哈...（最好多刷一刷，不然影響你的工資和成功率:hushed:）

• 在投遞簡(jiǎn)歷之前，最好通過(guò)各種渠道找到公司內(nèi)部的人，先提前了解業(yè)務(wù)，也可以幫助后期優(yōu)秀 offer 的決策。

• 要勇于說(shuō)不，對(duì)于某些 offer 待遇不滿意、業(yè)務(wù)不喜歡，應(yīng)該相信自己，不要因?yàn)楫?dāng)下沒(méi)有更好的 offer 而投降，一份工作短則一年長(zhǎng)則 N 年，為了幸福生活要慎重選擇?。。?/p>

第一次跳槽十分忐忑不安，和沒(méi)畢業(yè)的時(shí)候開(kāi)始找工作是一樣的感受，真的要相信自己，有條不紊的進(jìn)行。 如果有我能幫忙的地方歡迎隨時(shí)找我，比如簡(jiǎn)歷修改、內(nèi)推、最起碼，可以把煩心事說(shuō)一說(shuō) ，人嘛都會(huì)有苦惱的～

祝愿大家都有美好的未來(lái)，拿下滿意的 offer。