大家好，我是若川。最近組織了源碼共讀活動，感興趣的可以點此加我微信ruochuan12?進群參與，每周大家一起學習200行左右的源碼，共同進步。已進行4個月了，很多小伙伴表示收獲頗豐。

作者：刮涂層_贏大獎

原文地址：https://juejin.cn/post/7036581158670303240 ?(感謝小伙伴投稿，也歡迎去原文點贊)

高德滴滴美團網易快手騰訊金山 360 百度知乎微軟等大廠面試經驗
一年半以前，寫了個萬字前端面經，最終去了字節混飯吃，因為一些業務調整的原因，我又跑路了，沒寫一面二面都是一輪掛的或者后面我不想面了的，附帶部門的是掛了或者我拒了之后又面了另外的部門，按照一面開始時間先后排序，還有很多優秀的公司我面了但是忘記錄音，比如 momenta、完美世界、掌閱等等。現已完成更新，全文共計一萬三千字，

每家的自我介紹和離職原因部分我就省略了~

寫在前面

本次面試持續了整整四周，密度非常大，平均每天四家，身心俱疲，如果不是時間緊迫建議不要把面試安排得這么密集
八股文雖然很多沒什么用，但是該背還得背
算法和數據結構不是短時間就能練成的，不過好在前端不會有太難的算法題，都是基本的動態規劃，回溯，數組遍歷，鏈表，二叉樹的問題，如果自己算法實在不太行，找工作提前一兩個月把力扣上比較經典的題刷一刷，遇到題最起碼不至于沒思路，各種排序的原理還是要看看的，很容易被問到，而且一旦答不上來很減分
不管你寫 Vue 的還是 React 的（如果你寫 ng 當我沒說），很容易被問到兩者區別，建議從多個角度去聊，比如框架特性、生態、開發體驗、社區評價、性能、源碼等多個角度聊
有亮點的項目最好多準備幾個，最好是不同類型的，比如業務的、偏中后端的、組件庫的、工程化的和新興技術的，根據自己擅長的內容最起碼準備兩三個，有的面試官就是想看你都做過哪些有難度的事情，一招鮮這時候就不好用了
對不同的角色的面試官問的問題，要在不同的角度回答，比如同樣問你有沒有處理過兼容性問題，對前面的面試官，就可以回答遇到過的不兼容的場景和解決細節，遇到后面 leader 的面試就可以更多地從如何高效驗證排查兼容性問題這個角度回答，注意場景
最后一般面試官都會給提問題的時間，我個人一般是問業務內容、技術棧、團隊規模或者未來業務和技術上發展方向，到后面的面試官我會問一下這位面試官在這個團隊中的角色，根據他的角色結合他對上面幾個問題的表述可以初步判斷出這個團隊是邊緣的，還是核心的，還是單純是個畫大餅的
整體面下來，面試體驗最好的是微軟，謙卑，有禮貌，感覺微軟面試官是有一整套面試話術的，比如
- “接下來我會問你一些業務相關問題，請在不違反當前公司原則的情況下回答，如果我的問題你不方便回答可以直接告訴我”
- “接下來這個題你可以用你任何熟悉的編譯器進行作答”
- “我接下來描述的問題如果你有任何不清楚的都可以隨時打斷我”
- 我答的題，還有我描述的項目，面試官一般都會先給予肯定答復，如果有問題再做進一步的提問
- 中途有一輪，面試官的問題我理解錯了，實現了另一個東西，面試官第一反應是自己沒有表述清楚，而且說我理解的這個方向的代碼實現得很好
- 后面英文面試時，我英語很差，面試官說了一大段英語我基本沒聽明白，面試官問我是不是自己說太快了

Taptap

一面

換膚都做過什么處理，有沒有處理過可能改變尺寸的換膚
i18n 在團隊內部都做了哪些實踐
webpack 遷移 vite 遇到了哪些問題
CI/CD 做了哪些實踐
鑒權有了解么，jwt 如何實現踢人，session 和 jwt 鑒權的區別
TCP 三次握手 http1.0，1.1，2 都有哪些區別
https，為什么 https 可以防中間人攻擊
冒泡排序

二面

給你一個已經升序排列的數組，給一個數字，找一下這個數字在這個數組里出現了幾次
洗牌算法，如何驗證這個洗牌算法可以把牌洗得足夠亂
node stream 去取一個超大數據量的日志，由于內存限制每次只能取一部分，現在希望在全部日志中隨機取一萬條，如何做
介紹一下項目有哪些是由你主導提出的方案做的事情

京東

一面

介紹一下 promise，它為啥叫 promise
esmodule 介紹一下，它和 commonjs 的區別，主要的優勢是什么
介紹一下 vite 的原理，它會去編譯你的代碼嗎，vite 引用 commonjs 的包的時候怎么處理
如何轉成 esm vue3 的組合式 API 有了解嗎，它有哪些優勢
介紹 https cors 介紹一下
微前端有了解嗎
為什么你們移動端 h5 用 vue，pc 管理端用 react？
git 對象上的操作有了解過嗎？git reset、rebase 這些操作用過嗎？
看你之前跳的都比較頻繁，每段都沒超過兩年，京東有個二五原則，這個問題你怎么看

二面

你們小程序是用的 taro，對 taro 原理有了解嗎
你們 cms 系統的架構是怎樣的
你有了解過 webpack 現在也支持 esm 了嗎？
你們的組件庫是全公司公用的還是團隊內自己的，是從 0 開發還是參考其他開源組件庫在別人的基礎上搞的？
有用 vue3 嗎，為什么團隊沒有上 vue3？
你們 react 用的是什么語法？fiber 原理有了解嗎？
你們當前團隊有多少人，未來想做哪方面？

度小滿

怎么理解 vue 單向數據流的
Vue 組件之間的通信方式都有哪些，用過 eventbus 么，eventbus 的思想是什么
寫個自定義 v-modal
和listener 有了解嗎
Vue 生命周期有哪些，都是做什么的，updated 什么情況下會觸發，beforeCreate 的時候能拿到 Vue 實例么，組件銷毀的時候調用的是哪個 API
什么情況下會觸發組件銷毀，銷毀的時候會卸載自定義事件和原生事件么
自定義指令寫過么，自定義指令都有哪些鉤子
傳統前端開發和框架開發的區別是什么
Vue2 的數據響應式有兩個缺陷，你知道是哪兩個缺陷么，為什么會有這樣的缺陷，如何解決
Vue 如何實現的數組的監聽，為什么 Vue 沒有對數組下標修改做劫持
Symbol 有了解嗎，迭代器有了解嗎，哪些是可迭代的
用 Set 獲取兩個數組的交集，如何做
實現 Promise.all
animation 和 transition 有什么區別
寫個動畫，一個盒子，開始時縮放是 0，50%時是 1，100%時是 0，開始結束都是慢速，持續 2 秒，延遲 2 秒，結束后固定在結束的效果

這是我面的比較離譜的一個，問各種 API，沒什么實際營養，說實話挺無聊的，面試體驗也一般

BOSS 直聘

聊一下最復雜的項目
在無障礙的項目中做過哪些
做黑夜模式有沒有考慮過用戶設置了定時切換手機黑夜模式的情況
你們開發的 h5 項目依賴的安卓和蘋果的 webview 的內核分別都是什么
Lottie 動畫上做過哪些優化，有考慮在低端機上用 CSS 動畫做么
如果讓你做一個動畫，一個地球本身在自轉，外面有個飛機圍著它轉，飛機的螺旋槳自己也在轉，有哪些需要考慮的點
CI/CD 上做過哪些
webpack 遷移 Vite 遇到過哪些問題，之前 webpack 慢是為什么，有過優化么
業務內的公共工具提煉了哪些
自己做著玩的這些項目介紹一下，主要都是做什么的
這次找工作主要看重什么

奇虎 360（安全衛士）

寫 Vue 多還是 React 多？
職業規劃
CSS 實現一個扇形
問輸出，以及原因（具體代碼我沒記，但是這個考點，以下題也都是）

var?a?=?{?name:?"Sam"?};
var?b?=?{?name:?"Tom"?};
var?o?=?{};
o[a]?=?1;
o[b]?=?2;
console.log(o[a]);

問輸出

async?function?async1()?{console.log("async1?start");await?async2();console.log("async1?end");
}
async?function?async2()?{console.log("async2");
}
console.log("script?start");
setTimeout(()?=>?{console.log("setTimeout");
},?0);
async1();
new?Promise((resolve)?=>?{console.log("promise1");resolve();
}).then(()?=>?{console.log("promise2");
});
console.log("script?end");

問輸出

const?promise1?=?Promise.resolve("First");
const?promise2?=?Promise.resolve("Second");
const?promise3?=?Promise.reject("Third");
const?promise4?=?Promise.resolve("Fourth");
const?runPromises?=?async?()?=>?{const?res1?=?await?Promise.all([promise1,?promise2]);const?res2?=?await?Promise.all([promise3,?promise4]);return?[res1,?res2];
};
runPromises().then((res)?=>?console.log(res)).catch((err)?=>?console.log(err));

Vue 的 nextTick 是做什么的？8.React 的合成事件和原生事件了解嗎？
webpack 和 vite 的區別是什么，切 Vite 的動力是什么
之前的開發模式是怎樣的，是一個人負責一個模塊還是按照需求排期分配
微前端有了解么

HR 約我現場二面，我說我去不了北京，HR 說幫我協調一下遠程面試，之后就再也沒聯系我

陌陌

之前做過哪些工具
移動端兼容性問題遇到過哪些
如何限制 Promise 請求并發數
實現這個 pipe

const?fn?=?pipe(addOne,?addTwo,?addThree,?addFour);?//?傳入pipe的四個函數都是已實現的
fn(1);?//?1?+?1?+?2?+?3?+?4?=?11，輸出11

了解過 Vue3 么，為什么還沒有上 Vue3，了解 Proxy 么，它和 defineProperty 的區別是什么，性能上有什么區別么
Vue 如果想做模板的復用，應該怎么做
有做過骨架屏么，是怎么做的
有做過懶加載么
有過 React Native 的經歷嗎
MySQL 優化有了解過么

高德

一面

如果實現一個三欄布局，需要三欄占同樣的寬度，放多個元素時會自動換行，有哪些做法
移動端適配是用 rem 還是 vw？分別的原理是什么？你們用什么方案？
ES6 語法用過哪些，都有哪些常用的特性
Promise 詳細聊一下，可以解決哪些問題
p 成功的會如何走，如果 p 失敗了進入 b 之后，b 中又失敗了是否會繼續執行后面的 c 或 d

p.then(a,?b).then(c).catch(d);

下面這個 class 的四個屬性分別屬于這個 class 的什么，fn 和 f 有什么區別

class?A?{static?a?=?1;b?=?2;fn()?{}f?=?()?=>?{};
}

實現一個 node 異步函數的 promisify
Vue 生命周期都有哪些
keep-alive 的原理是什么，如果不用它的話怎么自己實現類似的效果
v-if 和 v-show 的區別

二面

介紹一下之前做的項目
如果需要你實現一個全文翻譯功能，富文本的標簽部分你是如何處理的，翻譯之后數據如何回填
typescript 實現一個字符串類型去左側空格

type?A?=?"???Hello?world!???";
type?B?=?LeftTrim<A>;?//??'Hello?world!???'

如果需要你實現一個彈幕的組件，你需要如何設計這個組件的 props 和 state，內部如何實現，有哪些地方可以優化

三面

介紹一個有挑戰性的項目
無障礙方面你了哪些優化
i18n 方面你都做過哪些
你們做的是一個怎么樣的產品

const?data1?=?{?"a.b.c":?1,?"a.b.d":?2?};
const?data2?=?{?"a.b.e":?3,?"a.b.f":?4?};
//?把如上兩個對象合并成一個JSON，其中的.需要處理成對應的層級

你對 serverless 的理解是什么樣的
未來發展方向希望是怎樣的
對技術上有什么期望

滴滴

一面

之前做過 SSR 是哪種服務端渲染，是同構么
介紹一些上一份工作主要都負責哪些事情
介紹一下單例模式和它在前端的應用
介紹一下原型鏈
介紹一下前端的繼承方式
HTTP，TCP，七層網絡結構，講一下
chrome 瀏覽器最多同時加載多少個資源，那如果想同時加載更多資源應該怎么辦
http2 的多路復用是什么原理
實現一個改變 this 指向的 call 方法，介紹一下原理
求斐波那契數列第 N 項
跨端有了解過么，Taro，uniapp 有寫過么
有 Devops 相關的經驗么
Docker 和 k8s 有相關經驗么
了解 JSON Web Token 么，它和其他的鑒權方式有什么區別
網絡安全有了解么，CSRF 如何防御，SameSite 有哪幾個值

二面

之前的工作在每個階段給你帶來了哪些成長
你之前做過的比較有亮點的項目
如果你還在之前的部門的話，你有哪些事情是還想做的
對 TDD 的看法是怎樣的
移動端一套代碼適配多端是如何做的

二面前面聊了聊項目，最后一直在給我將部門未來的發展趨勢，說了很久，說實話我聽得有點困了，然后不知道為啥給我掛了

小紅書

介紹一個比較難的項目
如果用戶希望自己定義一個顏色生成對應的皮膚，應該怎么制定方案
webpack 遷移 Vite 遇到過哪些問題
Vue 和 React 的區別
Vue 和 React 的 Diff 算法有哪些區別
編寫一個方法，判斷一個字符串是否是合法的 XML

const?str1?=?"<html><div>123</div></html>";?//?true
const?str2?=?"<div><div>123</div><div></div></div>";?//?true
const?str2?=?"<html><div>123</html></div>";?//?false

在一個矩陣中查找一個字符串，可以上下左右移動，但是不能回頭，如果能找到這個字符串返回 true

const?str?=?"abcde";
const?matrix?=?[["0",?"0",?"0",?"0",?"0",?"0"],["0",?"0",?"a",?"b",?"0",?"0"],["0",?"0",?"0",?"c",?"d",?"0"],["0",?"0",?"0",?"0",?"e",?"0"],
];

青蛙跳臺階，一次可以跳 1 階，2 階或者 3 階，如果想跳上一個 N 階共有幾種跳法

前面吹逼時間有點長，導致后面三道算法題做題時間不太夠了，掛了

美團（酒旅）

一面

之前做過的有難度的項目
瀏覽器緩存機制
HTTPS 介紹一下
節流和防抖的原理是什么
事件循環介紹一下
輸出結果

async?function?async1()?{console.log("async1?start");await?async2();console.log("async1?end");
}
async?function?async2()?{console.log("async2");
}
console.log("script?start");
setTimeout(()?=>?{console.log("setTimeout");
},?0);
async1();
new?Promise((resolve)?=>?{console.log("promise1");resolve();
}).then(()?=>?{console.log("promise2");
});
console.log("script?end");

0.1 + 0.2 為什么不等于 0.3，為什么會有誤差，如何解決
大數加法如何實現
v-for 為什么會有 key
為什么 vue 的 data 用一個函數而不是一個對象
虛擬 DOM 介紹一下
diff 算法介紹一下
webpack 和 Vite 的區別，遷移過程是怎么樣的
前端工程化你是怎么理解的

二面

在之前公司業務和技術上主要都負責哪些
技術選型和技術架構都是怎樣的
研發流程上有做效率工具么
node 的框架用的是哪個，內存監控是怎么做的，你了解過哪些 node 的框架
vue 和 react 都看過哪些部分源碼，v-model 的原理是什么，虛擬 dom 的優缺點是什么
typescript 相比 JavaScript 的優點是什么
export 和 module.exports 的區別
node 的內存泄露是如何監控的
node 讀取文件的時候，fs.readFile 和 stream 有什么區別
你的優勢和劣勢是什么

聊了好多 node 監控相關的，說實話沒咋接觸過

知乎

一面

介紹有難點的項目
使用 Vite 遇到過哪些問題
esbuild 有了解嗎
當你們把體量很大的項目拆分后，有沒有遇到拆分之前沒有的問題
組內工具包你們是如何保證向下兼容的
以下兩種寫法有什么區別，會出現什么效果，如果不一樣的話如何能得到同樣的效果

export?default?class?App?extends?React.Component?{state?=?{cnt:?0};render()?{return?(<><buttononClick={()?=>?{this.setState({?cnt:?this.state.cnt?+?1?});setTimeout(()?=>?{this.setState({?cnt:?this.state.cnt?+?1?});},?1000);}}>add?cnt</button><div>cnt:?{this.state.cnt}</div></>);}
}export?default?function?App()?{const?[cnt,?setCnt]?=?useState(0);return?(<><buttononClick={()?=>?{setCnt(cnt?+?1);setTimeout(()?=>?{setCnt(cnt?+?1);},?1000);}}>add?cnt</button><div>cnt:?{cnt}</div></>);
}

問輸出

const?p1?=?new?Promise((resolve,?reject)?=>?{setTimeout(()?=>?{resolve(1);throw?new?Error();},?2000);
});
const?p2?=?p1.then((val)?=>?{console.log(val);return?val?+?1;}).catch((err)?=>?{console.log(err);return?err;});
Promise.all([p2,?Promise.reject(3)]).then((val2)?=>?{console.log(val2);}).catch((err2)?=>?{console.log(err2);});

寫個二叉樹遍歷，深度優先廣度優先
Typescript 類型了解過嗎，infer 是做什么的，實現一個 Pick 和一個 Omit

二面

SSR 和 CSR 的區別，Nuxt 這類的 SSR 方案和直接渲染 ejs 這類方案有什么本質的區別
Vue 和 React 使用的比重是怎樣的，這兩者各自的優劣介紹一下
PureComponent 會引入什么問題，什么情況下會需要用到它
Vue 的單文件開發模式，這個解析 vue-loader 是如何實現的。
如果 template 語言換掉的話，會如何處理。
script 的部分會如何處理，由于 babel-loader 是只能針對 js 類型的文件進行轉化，那.vue 文件中的 script 標簽是如何被 babel-loader 讀取的。
vue scoped 是怎么實現的，dom 上的哈希是如何和 style 中的哈希對應起來的，又是如何保證每次生成的哈希不變的
babel.config.js 和.babelrc 有什么區別，應該在什么場景使用，同時使用的話會出現什么現象
Vue 調用 render 函數的時機是在什么時機被觸發的，后續狀態變更導致 render 又是誰觸發的
Vue 和 React 在數據更新上的差異，Vue 這種數據劫持的方式會不會帶來額外的問題，Vue3 在這些問題上有優化么
和forceupdate 都做了哪些事
異步更新 DOM 這個操作，Vue 和 React 都是如何實現的，Vue 的異步處理還有其他方式可以做么，除了 MessageChannel 還有其他和他用法類似的 API 么
公用的代碼如何做提取，如何判斷一個資源是否應該被提取
Portal 除了做了把組件提到對應的 DOM 下之外，還做了哪些事
用什么方式發請求，axios 是個同構的工具，它是如何實現區分 Node 和瀏覽器環境的
axios 內部如何把 xhr 的 callback 轉換為 promise 的，如何處理請求異常的

二面問得比較細，很多地方的細節其實沒太關注過，掛了

騰訊（看點）

一面

實現 ob 和 watch 方法，希望當方法傳入 watch 函數時會執行一次，之后每次修改 data 上的屬性時，會觸發對應的 console

const?data?=?ob({?count:?0,?foo:?"test"?});watch(()?=>?{console.log("watch-count",?data.count);
});
watch(()?=>?{console.log("watch-foo",?data.foo);
});data.count?+=?1;
console.log("showcount",?data.count);
delete?data.count;
data.foo?=?"test2";

輸入一個字符串，遇到方括號則對方括號內的字符串重復 n 次，n 是方括號前面的數字，如果沒有數字則為 1 次，可能存在嵌套

const?test1?=?"a2[b]a2[b2[c]]";
//?abbabccbcc
const?test2?=?"2[3[c]]a2a";
//?cccccca2a
const?test3?=?"[abc][d]3[e2]4";
//?abcde2e2e24

二面

Vue2 和 3 的區別，依賴收集和派發更新都是如何做的，vue 是如何保證父組件重新渲染不導致子級重新渲染的
webpack 異步加載和分包的原理是什么
Vite 依賴與預構建是把所有的用到的依賴都合并到一起還是每個都是單獨的包，一個包安裝了多個版本問題如何處理？
node 的進程管理了解過么？多進程都有哪些方案？
4.1 worker 掛了如何能監測到？
4.2 IPC 通信是什么？
4.3 如果用 cluster 啟動多進程后，子進程是多個端口還是一個端口？
4.4 一個 worker 是一個進程嗎？它有獨立的 pid 么？
5.5 進程之間數據通信如何做
node 內存泄露是如何監控的？原理是什么？內存是監控進程的還是監控 docker 的？
webpack 打 polyfill 都有哪幾種方式
http2 都有哪些應用，多路復用和 1.1 版本 keep-alive 有什么區別和聯系，如果 http1.1 服務端需要按順序處理請求，那為什么有的時候在一個頁面里看圖片，有時下面的圖片會先出來，http pipeline 有了解嗎，http 流傳輸有了解嗎
前端的工程化都做了哪些事情？git CI/CD 都做了哪些事？比如 lint，安全檢查，圈復雜度都有關注嗎？lint 的規則是你們業務自己定制的嗎？組件測試和自動化測試有做嗎？上線的流水線有配過嗎？小流量上線是如何做測試的？
Taro 多平臺的兼容是怎樣做的，Taro 是怎么把 react 代碼編譯成運行時，運行時是什么樣的代碼，又是如何讓它在原生小程序的 DSL 中執行的
前端監控報警是怎么做的，都有哪些監控指標，報警的策略是怎樣的，關注哪些指標和維度，白屏如何監控
都做過哪些優化，動畫的剪包如何做，FPS 是如何監控的

這個真的是有點。。。難，很多完全是我知識盲區，尤其 node 的部分和 Taro 的部分，掛得服氣

金山

一面

主要做過哪些項目
Vue 兄弟組件傳值方式都有哪些
介紹一下 Vuex
介紹一下 diff 算法
Websocket 介紹一下，它和 http 有什么關系
介紹一下 https
用三個正面的詞和三個負面的詞評論一下你自己
介紹一下你最近讀過的一本書
有沒有做過哪些和代碼沒關系的但是比較精通的事情
你對下一份工作的期望是怎樣的

二面

對上家公司的感受，自己的成長，不滿的地方
之前的團隊規模是怎樣的
之前的業務是怎樣的
對下一份工作的期望是怎樣的

網易（靈犀）

一面

對下一份工作有怎么樣的期望，你對這個規劃做過哪些努力
介紹一個有難點的工作
為什么之前要把項目從 SSR 遷移到 CSR
實現一下 koa 中間件原理，如何判斷調用了多次 next 并拋出錯誤
事件循環介紹一下，Node 事件循環中如果在 Poll 階段不停地產生新的事件會怎樣
Node 中如果要對很大的字符串做 JSON.parse 應該怎樣處理
講一下瀏覽器中的重繪和重排
介紹一下瀏覽器的合成層
如果一個頁面需要同時適配 PC 端和移動端，應該怎么做，rem 和 vw 方案有什么區別
typescript 定義一個對象應該如何定義，如果定義對象的 key 必須是字符串，應該如何定義
Vue 的響應式原理介紹一下，Watcher 的 cleanDeps 是做什么的
computed 和 watch 是什么原理
如果 data 里有一個對象，不希望它被深層監聽，需要怎么做
給定任意二維數組，輸出所有的排列組合項。比如 [['A','B'], ['a','b'], ['1', '2']]，輸出 ['Aa1','Aa2','Ab1','Ab2','Ba1','Ba2','Bb1','Bb2']
給出任意一個二維數組，要求輸出數組元素的所有排列組合。如[['A', 'B', 'C'],[ 'A1', 'B1', 'C1'],[ 'A2', 'B2']]，輸出["AA1A2", "BA1A2", "CA1A2", "AB1A2", "BB1A2", "CB1A2", "AC1A2", "BC1A2", "CC1A2", "AA1B2", "BA1B2", "CA1B2", "AB1B2", "BB1B2", "CB1B2", "AC1B2", "BC1B2", "CC1B2"]

二面

Node 服務遷移到輕服務主要都做了什么
你們的 RPC 用的哪個框架，grpc 和 thrift 的區別有了解么，protobuf 有了解嗎
serverless 有多少了解，它適合做什么，都用它寫過什么
客戶端提供 API 版本不一致這類兼容性問題你是如何做的處理
webpack 遷移 Vite 有遇到什么問題，snowpack 有了解過么，它和 vite 有什么區別
對 React 熟悉么，hooks 有哪些最佳實踐
性能優化都做過哪些
一個頁面的性能指標都有哪些，你是如何做監控的，如何監控 node 服務的性能監控
實現一個二叉樹中序遍歷的迭代器，時間復雜度最好是多少，最差是多少，空間復雜度是多少

三面

實現一個函數，傳入一個數組，數組中每一項代表一個線段的起止位置，計算所有線段覆蓋的長度總量，并編寫測試用例

lineCoverage([[0,?1],[2,?3],
]);?//?2
lineCoverage([[0,?2],[2,?3],[3,?4],
]);?//?4
lineCoverage([[0,?2],[1,?3],[2,?4],
]);?//?4
lineCoverage([[0,?5],[1,?3],[2,?4],
]);?//?5
lineCoverage([[0,?6],[2,?6],[6,?7],
]);?//?7

計算一個矩陣內，所有 1 覆蓋的區域（島嶼問題）力扣

//?howManyDots(canvas:number[][]):?number
//?//?上下左右相鄰視為一起
//?[[0,0,0],
//??[0,1,0],
//??[0,0,0]]
//?=>1//?[[1,1,0,1],
//??[0,0,1,0],
//??[0,1,1,0]]
//?=>3//?[[1,1,1,1],
//??[0,0,0,1],
//??[1,0,0,1],
//??[1,1,1,1]]
//?=>1

便利蜂

Vue 從修改屬性到渲染到頁面上都經歷了什么
詳見代碼

/\*\*-?目標:
-?實現一個簡單的觀察者模式(或發布-訂閱模式)\*/const?shop?=?{
apple:?5,?//?蘋果?5?元
potato:?2,?//?馬鈴薯?2?元
tomato:?3,?//?西紅柿?3?元
orange:?7,?//?橙子?7?元
}/***?現在我們有一個便利店的實例對象，目標是需要增加對商品價格的監聽，當商品價格發生變化時，觸發對應的事件。*?1、小明關注蘋果價格變化*?2、小剛關注橙子價格變化*?3、當價格變化時，自動觸發對應的事件*/class?Pubsub?{constructor()?{}list?=?{};//?監聽方法，添加監聽者，監聽對象，和監聽事件的方法，//?提示，可以將移除方法作為監聽方法的返回值listen?=?(key,?listener,?callback)?=>?{}//?發布消息的方法publish?=?(key,?price)?=>?{/**?該如何定義?發布方法？?**/}}//?定于一個Pubsub的實例對象const?pubsub?=?new?Pubsub();const?event1?=?pubsub.listen('apple',?'小明',?(listener,?price)?=>?{console.log(`${listener}關注的apple的最新價格是${price}元`);})const?event2?=?pubsub.listen('apple',?'小強',?(listener,?price)?=>?{console.log(`${listener}關注的apple的最新價格是${price}元`);})const?event3?=?pubsub.listen('orange',?'小剛',?(listener,?price)?=>?{console.log(`${listener}關注的orange的最新價格是${price}元`);})const?event4?=?pubsub.listen('orange',?'小強',?(listener,?price)?=>?{console.log(`${listener}關注的orange的最新價格是${price}元`);})/***?應該補充怎樣的邏輯能夠使得我們能夠監聽shop中的屬性值變化呢？*?提示：vue中雙向綁定是怎么實現的呢？*?vue2.0或vue3.0的實現方式都是可以的*//**?我們設置一個觀察者方法，讓?shop這個實例對象便成為可觀察對象?**/const?observable?=?()?=>?{};const?newShop?=?observable(shop);newShop.apple?=?6;/**?小明關注了蘋果的價格，蘋果價格變更將會觸發事件**?console.log將會輸出:??小明關注的apple的最新價格是6元**/newShop.tomato?=?10;/**?無人關注西紅柿價格，不會觸發事件?**/newShop.orange?=?11;/**?小剛關注了橙子的價格，橙子價格變更將會觸發事件**?console.log將會輸出:??小剛關注的orange的最新價格是11元**/console.log(newShop);/****?輸入出newShop**/console.log(newShop.apple);/****?輸入出newShop的apple新值**/

如果需要你實現掃碼登錄、單點登錄，有什么方案做的業務不太感興趣，后續沒有繼續面

快手（商業化）

為什么之前用 SSR，為什么又從 SSR 遷移成 CSR
離線包的原理是什么
React hooks 比 class component 的優勢在哪，如何在 hooks 中實現 shouldComponentUpdate 這個生命周期，有實現過自定義的 hooks 么，useCallback 和 useMemo 的區別是什么
為什么你們移動端選擇 vue，pc 選擇 react，這兩個在性能上有什么區別么
有做過哪些性能優化
vite 的原理是什么，遷移 vite 有遇到什么問題么
serverless 有什么了解，它背后的實現原理是什么，你用它做過哪些東西
反轉鏈表
一個字符串的全排列問題基本都答上來了，題也都寫出來了，但是不知道為啥掛了

藍湖

一面

主要的技術棧
主要都是和客戶端如何協作
Vue 新版本特性有了解么
在工作中有用到什么設計模式么
typescript 裝飾器有了解么，類裝飾器的 this 是如何處理的
有用過抽象類么
舉例一下 Map 和 object 的區別，如果需要一個字典的需求，都是 key: value 的形式，那應該怎么選擇這兩個呢
Map 和 WeakMap 有什么區別
js 垃圾回收機制有了解嗎
二分查找的時間復雜度是多少，簡要描述一下過程，O(logN)是怎么算出來的，TopK 的時間復雜度是多少，快排的時間復雜度是多少
ES5 的繼承都有哪幾種，主要介紹一下組合寄生，下面這個的輸出是什么，this 指向誰

class?A?{constructor()?{console.log(this.name);}
}
class?B?extends?A?{constructor()?{super();this.name?=?"B";}
}
const?b?=?new?B();

輸入一個二叉樹和兩個 node，輸出這兩個 node 的最近公共祖先

二面

如果讓你實現一個計算器，都需要考慮哪些問題比較開放的一個題，邊說邊寫

三面

看新的機會的時候你更看重哪些方面，對哪些方面會感興趣
當前薪資
接觸過哪些排序算法，歸并排序的思路是什么，一個數組做歸并排序的話，一共經歷了多少次合并
最有挑戰的項目是什么樣的
有沒有經歷過比較痛苦的階段
最近有在學什么新的東西么
之前的工作中有沒有你比較欣賞或者崇拜的工程師
前端緩存策略，last-modified 和 etag 有什么區別，分別的適用場景是什么

百度

一面

根據我的簡歷逐個捋項目
對一個樹形結構遍歷，輸出所有葉子節點
寫一共獲取 URL 后的參數的方法很簡單的一輪面試

二面

在上家公司做的主要業務是哪些，你負責哪些，哪些是迭代比較多的
換膚方案你們具體是如何實現的
國際化方案是如何做的
頁面間同步狀態一般都有哪些方案，分別的應用場景都是哪些
localstorage 的會不會出現不同項目的 key 覆蓋別人的 key 的問題，如何解決
業務的技術選型是如何考慮的
寫一個發布訂閱模式的 on/emit/off
7.1 如果需要把訂閱者執行成功和失敗的方法分開，需要怎么做
7.2 如果希望失敗的可追溯，找到是哪個訂閱者的報錯，需要怎么做
7.3 實現一下 before 和 after 方法，可以添加一些前置的和后置的訂閱者
7.4 現在希望給所有的訂閱者加打點上報的功能，并且提供全局的開關，需要如何設計
7.5 如果需要給某一個訂閱者單獨加一個打點，需要如何設計
如果想給一個對象上的所有方法在執行時加一些打點上報的功能，如何做

這一輪面試面了一個半小時，真的就是在一個功能上加來加去，其實想想還是挺考驗代碼健壯度的

三面

為什么考慮做前端
做好一個產品工程師或者軟件工程師，核心在于哪里
介紹一個有代表性的項目
主要都負責哪些業務，工作的 C 端和 B 端的占比是怎樣的
目前都看了哪些機會，下一份工作是怎么考慮的，希望做哪個方向
整體開發流程是怎樣的
工作節奏是怎樣的
個人優勢和缺點

大疆

一面

以什么樣的心態找下一份工作，對下一份工作有什么樣的要求
有什么比較感興趣的業務，你在這個業務中想要做什么
如果希望 DOM 中的一個值和 js 中的變量雙向綁定，使用原生 js 可以怎么做，React 和 Vue 分別又都是怎么做的
proxy 和 defineProperty 的區別是什么，各自的優勢和缺點是什么
瀏覽器發請求和 node 發請求都有什么區別，瀏覽器都為發請求做了哪些默認行為
如何理解線程和進程
為什么 Vite 比 webpack 快很多，ESM 和 commonJS 的區別是什么，為什么 ESM 加載會更快，如何理解 ESM 的靜態
都做過哪些打包的優化
在 CI/CD 中都需要做哪些事情可以把流程做得更好
最近在學習什么

二面

介紹一下你負責的業務
為什么要對一些項目做重構
組件庫你們是如何做的，你在里面是什么角色，組件與組件之間的調用關系如何處理
劉海屏你們如何適配的
有對小程序做過從打開到完全展現這個流程的監控么
講講對 TDD 的理解
有用到敏捷開發么，對代碼質量保障效果如何
提升開發效率你們有做過什么么
性能上優化有做過哪些事情
平時如何學習
這次換工作考慮的是什么
如果不考慮錢的問題，你最想做一個什么樣的產品

美團（買藥）

一面

輸出，原因，解釋一下調用棧和作用域鏈的關系

let?a?=?3;
function?func(a)?{a?=?10;console.log(a);
}
func();
console.log(a);

實現一下 Promise.all
數組轉成嵌套對象

["a","b","c","d"]?=>?{a:?{b:?{c:?{d:?null}}}}

解釋一下事件循環
解釋瀏覽器渲染機制：重繪、重排，如何優化？
Vue 和 React 對比

二面

在上家主要做哪些業務
對 B 端和 C 端在技術開發上側重點都有哪些
對技術選型是怎么考量的
下一步有哪些規劃
如何能創造出一個技術產品
請寫一個抽獎程序，已有參與抽獎的員工工號組成的數組 staffIds。
規則 1：同一員工不可重復中獎。
規則 2：每輪執行抽獎程序，入參是本輪要抽取的中獎人數 n，將中獎人工號打印出來
webpack 遷移到 Vite 有什么優勢，遇到過什么問題，遷移后如何測試

三面

在上一份工作主要負責哪部分業務
前后端架構是怎樣的
怎么理解 SSR，在項目中如何應用
B 端都做過哪些內容，架構是怎樣的

網易（傳媒）

一面

瀏覽器請求頭和響應頭都能記起哪些，都是做什么的
協商緩存與強緩存
響應頭和跨域相關都有哪些，之前都是如何解決跨域的
Access-Control-Allow-Origin 用 * 和指定域名的區別是什么
跨域是否允許攜帶 cookie，如果希望攜帶 cookie 需要如何做，如果 a.com 是我的域名，向 b.com 發請求，帶的是哪個域名的 cookie
請求頭的 host，origin，refer 的區別是什么
在什么場景下會發起 options 請求
!important 在什么場景用，css 選擇器權重是如何計算的
盒模型的邊距疊加，如何解決盒子塌陷，如何創建 BFC
==和===的區別，a==1&&a==2 有什么方式讓它返回 true
Object.create(null)和直接創建一個{}有什么區別
new 一個函數做了哪些事
對事件循環的理解
Vue 和 React 源碼讀過哪些部分，印象最深刻的是哪些
簡單介紹以下 Vue-router 的原理
diff 算法簡單介紹一下
前端工程化做過哪些
如何做到的逐步減少項目中的 typescript 報錯
寫過 webpack 插件么
babel 轉換的原理是什么
性能優化做過哪些
離線存儲是如何做的
都用過哪些設計模式
對線上各類異常如何處理，對線上的靜態資源加載失敗如何捕獲
node 多進程間通信是如何做的
koa 中間件原理實現是如何做的
如何界定一個依賴包的安全性
node 做過哪些性能優化

二面

在 git CI 做過哪些事，做的動機是什么
無障礙做過哪些事
業務上，前端和后端的工作占比是怎樣的
有升級到 Vue3 么，覺得 Vue 的優點是怎樣的
Vue 和 React 覺得哪個更優雅
有沒有做過給團隊開發提效的技術方案
在上家公司最大的成長是什么
今年的全年 OKR 是什么
下一份工作有什么期待

三面

有亮點的項目
腳手架用的是什么，有自己做過腳手架么，Vite 的原理是什么，如何區分環境
Vue3 的組合式 API 有了解么
typescript 和 Vue2 遇到過兼容性問題么
為什么要把 SSR 遷移到 CSR
離線包的原理是什么，有做離線包增量更新么
bridge 原理有了解么
對頁面的異常監控有了解嗎
介紹一下 React 的優化
性能優化都做過哪些
寫一個 EventBus，包含 emit/on/off
之前工作中的亮點
組件庫有做過嗎

奇虎 360（奇舞團）

一面

做 2B 多一些還是 2C 多一些
介紹一下盒模型，怪異模式和標準模式有什么區別
如何做 CSS 屏幕適配
移動端有沒有遇到過滑動穿透的問題
有沒有遇到過移動端瀏覽器兼容問題
js 的數據類型都有哪些，有什么區別，為什么基本數據類型存到棧但是引用數據類型存到堆
數據類型常用的判斷方式都有哪些
ES6 都用到哪些
Promise 都有哪些方法
Promise 的 then 的鏈式調用，返回的一個新的 promise 的狀態是什么
await 和 promise 的關系，分別的應用場景有哪些
esmodule 和 commonjs 區別是什么，還接觸過其他的模塊化方案么
瀏覽器都有過哪些了解，內核都有哪些，chrome 瀏覽器開啟一個頁簽時開啟了多少個進程，對應開啟了哪些線程
異步加載 js 的方式都有哪些
加載 css 和 js 時會阻塞 dom 渲染么
強緩存和協商緩存誰的優先級誰高，區別是什么，強緩存和服務器有通訊么，沒有通訊的話有狀態碼么，狀態碼是誰返回的，緩存是存到了哪里
cookie 都有哪些屬性
samesite 作用是什么
cookie 和 storage 的區別是什么
http 都有哪些版本，1.1 有什么不好的地方么，隊頭阻塞是什么引起的，2.0 有沒有完全解決了隊頭阻塞問題
get 和 post 有什么區別
工程化都做過哪些
Vue 和 React 的區別
SSR 和 CSR 的區別是什么，分別的適用場景是什么，什么叫同構，除了 SSR 還有什么方案可以解決首屏渲染問題
有寫過 webpack 插件么
babel 配置過么，preset 和 plugin 誰的優先級高
項目代碼規范是如何做的，如何避免有人本地跳過代碼規范
git commit 的有限制么
eslint 和 prettier 的沖突是如何解決的
CI 和 CD 的區別，除了 gitlab 的 CI/CD 之外還接觸過哪些
docker 有了解么，有實際用過么

二面

之前主要是 Vue 還是 React，用哪個多一些？有看過一些源碼么
Vue3 和之前版本的差異在哪兒
之前小程序是如何開發的
Node 了解過哪些，之前的 SSR 都是如何做的
接下來工作有哪些期望
wasm 之前有哪些了解
屏幕內有一個矩形，有一條對角線，如果在矩形上點擊，如何判斷點擊的位置是在對角線上方，還是下方，還是點到了對角線上
如果想給這個矩形畫個對角線，可以有哪些方式
之前的數據可視化是如何做的
有沒有一些技術沉淀的東西，比如在技術社區的交流或者寫一些文章
除了編碼以外，有沒有做過管理方面的事情
serverless 有哪些了解
現在工作分工的職責定界是怎么樣的
前端工程化都做了哪些

騰訊音樂

一面

主要技術棧有哪些
主要業務有哪些
主要的技術方案是什么樣的
SSR 遷移到 CSR 的背景是怎樣的，各自的優勢是什么，為什么服務端渲染頁面會比客戶端快
首屏性能優化都有哪些
都有用到過哪些協議
遇到的無障礙的挑戰是哪些，屏幕閱讀器功能是如何實現的了解嗎
國際化做過哪些
都做過哪些方面的重構，重構都做了哪些優化
webpack 遷移 vite 遇到了哪些問題
對 serverless 有哪些了解，都用它做了哪些事情
測試驅動開發是怎么樣的流程，有什么方案可以提高 TDD 的效率
前端安全都遇到過哪些問題
https 講一下
常見的 HTTP 狀態碼都有哪些
瀏覽器進程模型有了解嗎
瀏覽器渲染流程是怎樣的
事件循環介紹一下
Vue 的插槽的實現原理是什么
都做過哪些性能優化

二面

Vue 和 React 哪個寫的多一些
Vue 的組合式 API 的優勢是什么
Vue2 的重復邏輯封裝一般都有哪些方式
如果是需要通過調用 API 顯示 UI 組件，這種需要如何實現（比如 Toast、Dialog）
useCallback 和 useMemo 的區別和使用場景
對一個公共組件或者工具做打包，一般都需要產出哪些范式的文件
commonjs 和 esm 的模塊引入和加載執行的區別是什么
node 調用 RPC 是怎么做的，對 thrift 有哪些了解
SSR 和 CSR 的優勢分別是什么
Node 用的什么框架
如果頁面中有大量的 DOM 更新，導致頁面變卡，有哪些方案可以優化
換膚方案是如何做的
如果在 js 中執行 location.href = url，這個行為有可能會有哪些安全問題
CSRF 原理，整體的攻擊鏈路是怎樣的，都有哪些解決方案
XSS 都有哪些方式，如果過濾都需要過濾哪些內容

三面

面試官遲到五分鐘沒有任何道歉，讓我開攝像頭自己不開，面試全程一直在 pua，問我有挑戰的項目，我一句話得被打斷三次，極其沒有禮貌。以下是面試官原話

你這個項目我理解也沒什么難點啊
你沒做過客戶端你不懂
為什么你需要解決代碼里有很多報錯的問題，我理解頭條的程序員應該不會寫出都是報錯的代碼吧
頭條對你的培養可能真的不夠
我沒有覺得頭條不好的意思，我只是覺得頭條對你的成長可能真的沒什么幫助
你們這個架構本身就是有問題的
我認為你在計算機底層思維上還是有很大問題的
我這邊也有很多頭條來的程序員，他們都用過這個，你們那邊怎么沒用過

微軟中國

一面

為什么選擇做前端這個行業
Vue 和 React 的區別，項目是如何做選型的
介紹一個之前重構的項目
typescript 的優缺點
有沒有經歷過需求無法實現或實現難度較大的情況，這種情況如何處理呢
之前做過最有挑戰的問題
實現一個類似微信聊天列表頁的布局，有如下需求

1.?有一個吸頂的欄，內部的內容不需要實現
2.?一個吸底部的按鈕欄，內部有四個按鈕，按鈕功能不需要做，只需要實現布局
3.?中間的列表可滾動
//?多說一下，這個其實考察的是畫頁面的基本能力和細節，比如假如使用fixed布局，滾動條會是全屏的
//?但是如果使用absolute，限制屏幕高度100%，中間局部滾動就可以把滾動條限制到中間部分，甚至可以隱藏滾動條
//?面試考畫頁面的話，一定要多注意這類細節，還有比如BEM命名、1px邊框等問題是否有意識，這些都要考慮

最長遞增子序列力扣
最長連續遞增子序列力扣

二面

之前主要做的業務都是哪些
團隊的規模和分工是怎樣的
之前做過的有挑戰的項目
SSR 為什么要遷移到 CSR，如果不遷移的話如何能做到 CSR 離線包的效果
搜索旋轉排序數組力扣

三面

之前做過的有挑戰的項目
Vue 和 React 的區別
Vue 數據雙向綁定原理
頁面第一次加載會觸發哪些 Vue 的生命周期
Vue 的 filter 原理有了解嗎，如果需要你實現一個 filter，可以實現把一個字符串首字母大寫的功能，你要如何做（最開始問原理，導致我后面理解錯了，我以為是讓我實現一下 Vue 的 filter 功能了，然而人家其實要的是'abc' => 'Abc'的一個方法，但是面試官對我的實現持肯定態度）
用 css 實現一個 Tooltip：界面上有一個 Button，鼠標 hover 上去后會在 Button 上方顯示一個 tooltip，這個 tooltip 有圓角，下方有一個小三角形
對閉包的理解，閉包的適用場景和缺點
從輸入 URL 到頁面渲染都發生了什么
英語測試（說實話我沒太聽明白，我英文水平很差，直接跪了）

四面

做過的有挑戰的項目
無障礙都做過哪些
合并兩個有序數組力扣
合并多個有序數組（這題里我解答完之后自認為時間復雜度是 O(n2)，循環中用到了 shift 這個方法，面試官問我這個的時間復雜度是多少，我說是 O(n)，面試官說有什么辦法可以解決這個么，我說可以基于原有的方式倒著循環，這樣就可以用 pop 代替 shift 了，面試官問我為什么 pop 時間復雜度是 O(1)，我說不知道，面試官讓我有時間可以去了解一下均攤算法）

五面

下一份工作的期望
有挑戰的項目
SSR 遷移 CSR 的原因，遇到過哪些問題
LRU 算法力扣（這個題我最開始用 Map 做的，面試官跟我說如果不用 Map，如何實現每次查詢和刪除都能做到 O(1)，我沒思路，面試官問我查詢 O(1)用什么，我說用哈希，問我插入刪除 O(1)用什么，我說用鏈表，可我不知道怎么結合到一起，面試官提示我可以用雙向鏈表，然后我才做出來的）

六面

英語的自我介紹
為什么會選擇做前端，做前端的動機是怎樣的
在追求極致體驗方面做過哪些
都會關注哪些指標，如何做檢測
之前的工作中迭代速度是怎樣的
未來三到五年的規劃是怎樣的
有沒有做過自動化測試方案，對于兼容性如何做自動化測試
對于 UX 還原度，應該如何高效測試
一個 PC 頁面，如果需要適配手機屏幕，都有哪些需要注意的，可能需要解決哪些問題，需要如何去測試

快手（廣告）

主要技術棧是哪些
之前參與的重構的項目有哪些有難度的地方
SSR 遷移到 CSR 是基于什么考慮
項目的體量大概都有多大
項目優化或者重構后，一般從哪些方面評判效果好還是不好呢
bridge 的原理有了解么，有遇到過什么問題么，在一些沒有 bridge 的場景里有沒有做過特殊處理
做過喚起 app 么，有遇到過什么問題嗎，如何判斷喚起是否成功
國際化采用的什么方案
換膚方案是如何做的
小程序和 H5 都有哪些區別，有看過小程序底層如何實現的么
為什么要做 Vite 遷移，遷移有遇到了什么問題
寫一個 React Hooks，用來倒計時，傳入時間，返回 start、pause、restart、isRunning
實現一個方法，傳入一個 url 的數組和一個數字，對 url 進行請求，并根據數字限制最大請求數

騰訊（廣告）

一面

對下一份工作有什么期望
React 閱讀過哪部分源碼
Vue 和 React 的區別
proxy 和 defineproperty 的在 Vue 中區別是什么
Vue-router 原理
js 和 ts 混合開發有沒有最佳實踐
Vite 為什么會比 webpack 快
Rollup 和 webpack 打包結果有什么異同
問輸出，解釋一下函數調用棧和作用域鏈的關系

function?bar()?{console.log(project);
}function?foo()?{var?project?=?"foo";bar();
}var?project?=?"global";
foo();

問輸出，如果希望循環中輸出 123，有哪些方式可以改

for?(var?i?=?0;?i?<?3;?i++)?{setTimeout(()?=>?{console.log(new?Date(),?i);},?1000);
}console.log(new?Date(),?i);

對 js 的異步是如何理解的
如何理解閉包
求一個字符串的不重復的最長字串的長度力扣
判斷一個對象是否是循環引用對象
團隊內部 eslint 的規范是如何指定的
從輸入 url 到渲染頁面，都發生了什么

二面

主要負責的業務
換膚方案是如何做的
國際化方案是如何做的，都做了哪些語種
離線包的方案原理是什么
node 主要都做了哪些
安全問題遇到過哪些，CSRF 的加簽名是如何做的
單向鏈表反轉
快速排序

三面

主要負責哪些業務
有過帶人的經驗么
輸出數組中頻率第二高的元素的下標
冪等與非冪等的區別
get 請求是否可以傳圖片
有沒有遇到過前端安全問題
線上問題一般如何處理

最近組建了一個湖南人的前端交流群，如果你是湖南人可以加我微信?ruochuan12?私信湖南拉你進群。

時隔一年半，我，一個卑微的前端菜雞，又來寫面經了