面試之前

先說好，問題的答案都不是唯一的，大部分只提供題目哈，后面有答案會慢慢補上！當時回答的都不是特別完全。面試過程比較長，從年初開始斷斷續(xù)續(xù)面試，沒有做太詳細的規(guī)劃，有些答案也不記得當時怎么回答的。

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

對于大廠的面試，我只能說還是挺難的，首先和快手面試溝通的時候，最初的幾個問題也比較緊張，回答的不在點上，面試官帶個鴨舌帽，基本上沒看我，偶爾和我對視一眼，從一開始就一副對我沒有興趣的樣子，收到了十分大的打擊，當時對快手很有好感，特意請了一天假準備面試，沒想到慘淡收場??。

其他的面試，面試官都很nice，雖然有的過了有的沒過，起碼體驗上還不錯，而且也學到了很多東西。因為面試題都是比較類似的，會針對你的簡歷去發(fā)問，基本上 20 分鐘左右會講項目，20 分鐘討論技術(shù)原理和基礎，最后時間會手寫幾道題，算法還是程序題跟面試官喜好有關(guān)，起碼個人覺得沒有特別為難的題。

同時因為面試題類似，也就沒有特意區(qū)分題目是來自于哪家公司，希望同學自行腦補...

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

面經(jīng)部分

僅供參考，僅供參考，僅供參考！！！

因為幾乎沒有 React 相關(guān)經(jīng)歷，問我最多的 React 問題就是你覺得和 vue 有什么區(qū)別？

啊...從這一點來說，簡歷環(huán)節(jié)確實很關(guān)鍵。其實我做過，但我不精通，簡歷上不寫，所以我不會，別問...

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

• JavaScript 基礎
• Css 以及優(yōu)化
• vue 或 react 框架相關(guān)
• 前端打包等工程化
• 瀏覽器及常見安全問題相關(guān)
• 跨平臺技術(shù)
• 網(wǎng)絡相關(guān)
• 少量算法

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

并且因為是從自己的簡歷來發(fā)問，所以有些也很常見的 nodejs、serverless、GraphQL 等等都不在我的面試題里，但很有可能出現(xiàn)在你的題目里，相關(guān)題目可以自行補課！

原生 JS 代碼

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

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

思路就是 File + Canvas 的 drawImage

可以看看張鑫旭大佬的文章 HTML5 file API加canvas實現(xiàn)圖片前端JS壓縮并上傳

2. 談一談 JavaScript 的異步？??

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

從 MutationObserver、postMessage 會牽扯到 vue 的 $nextTick

從 generator 會聊到 co.js 實現(xiàn)，代碼不長，意思也好理解，但讓我寫還真沒寫出來，建議兄弟們好好看一遍！

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

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

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

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

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

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

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

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

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

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

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

6. 手寫 bind 函數(shù)

答：同上。

7. service worker 使用

答：緩存，漸進式應用，攔截處理

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

8. 嚴格模式

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

能答出來一些就行。

9. 原型鏈以及繼承

答：很常問，但隨便找個贊數(shù)高的講解，看一遍就懂了，記住常考點即可。

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

答：這個真沒辦法，只能是對正則表達式的規(guī)則進行系統(tǒng)學習，當然常考的可能是 郵箱，url 匹配。

css 以及優(yōu)化

1. flex 布局 ??

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

常用的 api 和兩列、三列布局等等，對于我來說稍微有點難度。之前項目對兼容性高，基本沒怎么用過 flex 布局。沒用過的建議用一用，幾個小時就會常見布局了。

2. 優(yōu)化長列表滾動效果

沒答上來，說了幾個 js 的方案沒答對點上。

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

后面分析了一下，可以用 transform 進行強制分層，第二種可以用 content-visibility 將看不見的元素不渲染，設置值為 auto 即可。第三個是對于某些動畫效果，可以用 will-change 作用在父元素上進行 gpu 加速，使用后刪掉。

3. 響應式布局 ??

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

4. 什么是 BFC？

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

問：什么會形成 BFC？它的作用是什么？

答：

• body 根元素
• 浮動元素：float 除 none 以外的值
• 絕對定位元素：position (absolute、fixed)
• display 為 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

作用嘛，為了布局??（千萬別這么答哈，具體可以看下面文章）

推薦一篇 BFC 文章

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

1. vue 響應式原理以及雙向綁定實現(xiàn)代碼 ? ??

2. vue3 響應式原理，有什么不同？

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

4. vue 的 compile 實現(xiàn)？??

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

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

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

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

8. 用過 TypeScript 嗎？有什么優(yōu)點，為什么用？具體的場景，使用 TypeScript 進行類型定義。

答：vue 項目多， ts 用的少，也用過，寫前端監(jiān)控 sdk 時，對接口進行類型校驗，它像一個文檔，每一個接口都有定義，后面再翻看瞬間理解意思。（強類型好處還有很多，但是個人覺得寫起來超級麻煩，當然有人很喜歡很爽。）

9. vue 的 keep-alive 使用場景，以及原理？??

前端打包等工程化

1. webpack 和 rollup 使用？

2. tree-shaking 原理？??

3. webpack loader 和 plugin 怎么寫？

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

5. 給 vite 做的貢獻和在實際項目的使用？

• vite-electron-quick Git 地址

• 代碼被 merge 的 pr 歷史

6. 如何統(tǒng)一對錯誤進行捕獲的？vue 的異步錯誤如何捕獲？

• 自己寫的 JS 錯誤捕獲 SDK Git 地址

順便求個 git 小????

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

1. 瀏覽器頁面加載過程，越詳細越好 ??

2. 瀏覽器緩存 ??

3. 跨域問題及處理 ??

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

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

答：美團的兩篇文章擺出來，面試官直接問下一題！

• xss 防范

• csrf 防范

跨平臺技術(shù)

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

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

3. js Bridge 的原理 ？??

4. flutter 的渲染引擎？

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

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

2. Oauth2.0 和 jwt 單點登錄等

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

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

5. https 加密原理？

6. http2.0 壓縮頭，以及并行請求原理？

7. tcp 的連接方式？

少量算法

• 回文串，中心擴散法

• 冒泡，快排 ??

• 二分查找 ??

• 二叉樹 ??

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

面試中的項目題

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

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

因為我簡歷中幾乎沒有涉及 nodejs 服務端的東西，但面試官總想問一問...

只能說做過自己博客的服務端...

服務端代碼 Git 地址

但是很簡陋...只能說開發(fā)過??

總結(jié)

• 對于框架原理只能說個大概，真的深入某一部分具體的代碼和實現(xiàn)方式就只能寫出一個框架，許多細節(jié)注意不到。
• 算法方面還是很薄弱，好在面試官都很和藹可親，擅長發(fā)現(xiàn)人的美哈哈哈...（最好多刷一刷，不然影響你的工資和成功率??）
• 在投遞簡歷之前，最好通過各種渠道找到公司內(nèi)部的人，先提前了解業(yè)務，也可以幫助后期優(yōu)秀 offer 的決策。
• 要勇于說不，對于某些 offer 待遇不滿意、業(yè)務不喜歡，應該相信自己，不要因為當下沒有更好的 offer 而投降，一份工作短則一年長則 N 年，為了幸福生活要慎重選擇！！！

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

祝愿大家都有美好的未來，拿下滿意的 offer。

希望我的文章能對你有所幫助，有問題隨時評論，歡迎批評，看到都會回復哈～

最后