時(shí)隔一年半,我,一個(gè)卑微的前端菜雞,又來(lái)寫面經(jīng)了

一面

1. 之前做過(guò) SSR 是哪種服務(wù)端渲染，是同構(gòu)么
2. 介紹一些上一份工作主要都負(fù)責(zé)哪些事情
3. 介紹一下單例模式和它在前端的應(yīng)用
4. 介紹一下原型鏈
5. 介紹一下前端的繼承方式
6. HTTP，TCP，七層網(wǎng)絡(luò)結(jié)構(gòu)，講一下
7. chrome 瀏覽器最多同時(shí)加載多少個(gè)資源，那如果想同時(shí)加載更多資源應(yīng)該怎么辦
8. http2 的多路復(fù)用是什么原理
9. 實(shí)現(xiàn)一個(gè)改變 this 指向的 call 方法，介紹一下原理
10. 求斐波那契數(shù)列第 N 項(xiàng)
11. 跨端有了解過(guò)么，Taro，uniapp 有寫過(guò)么
12. 有 Devops 相關(guān)的經(jīng)驗(yàn)么
13. Docker 和 k8s 有相關(guān)經(jīng)驗(yàn)么
14. 了解 JSON Web Token 么，它和其他的鑒權(quán)方式有什么區(qū)別
15. 網(wǎng)絡(luò)安全有了解么，CSRF 如何防御，SameSite 有哪幾個(gè)值

二面

1. 之前的工作在每個(gè)階段給你帶來(lái)了哪些成長(zhǎng)
2. 你之前做過(guò)的比較有亮點(diǎn)的項(xiàng)目
3. 如果你還在之前的部門的話，你有哪些事情是還想做的
4. 對(duì) TDD 的看法是怎樣的
5. 移動(dòng)端一套代碼適配多端是如何做的

二面前面聊了聊項(xiàng)目，最后一直在給我將部門未來(lái)的發(fā)展趨勢(shì)，說(shuō)了很久，說(shuō)實(shí)話我聽(tīng)得有點(diǎn)困了，然后不知道為啥給我掛了

1. 介紹一個(gè)比較難的項(xiàng)目
2. 如果用戶希望自己定義一個(gè)顏色生成對(duì)應(yīng)的皮膚，應(yīng)該怎么制定方案
3. webpack 遷移 Vite 遇到過(guò)哪些問(wèn)題
4. Vue 和 React 的區(qū)別
5. Vue 和 React 的 Diff 算法有哪些區(qū)別
6. 編寫一個(gè)方法，判斷一個(gè)字符串是否是合法的 XML

const?str1?=?"
123
";?//?true
const?str2?=?"
123
";?//?true
const?str2?=?"
123
";?//?false

1. 在一個(gè)矩陣中查找一個(gè)字符串，可以上下左右移動(dòng)，但是不能回頭，如果能找到這個(gè)字符串返回 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. 青蛙跳臺(tái)階，一次可以跳 1 階，2 階或者 3 階，如果想跳上一個(gè) N 階共有幾種跳法

前面吹逼時(shí)間有點(diǎn)長(zhǎng)，導(dǎo)致后面三道算法題做題時(shí)間不太夠了，掛了

一面

1. 之前做過(guò)的有難度的項(xiàng)目
2. 瀏覽器緩存機(jī)制
3. HTTPS 介紹一下
4. 節(jié)流和防抖的原理是什么
5. 事件循環(huán)介紹一下
6. 輸出結(jié)果

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");

1. 0.1 + 0.2 為什么不等于 0.3，為什么會(huì)有誤差，如何解決
2. 大數(shù)加法如何實(shí)現(xiàn)
3. v-for 為什么會(huì)有 key
4. 為什么 vue 的 data 用一個(gè)函數(shù)而不是一個(gè)對(duì)象
5. 虛擬 DOM 介紹一下
6. diff 算法介紹一下
7. webpack 和 Vite 的區(qū)別，遷移過(guò)程是怎么樣的
8. 前端工程化你是怎么理解的

二面

1. 在之前公司業(yè)務(wù)和技術(shù)上主要都負(fù)責(zé)哪些
2. 技術(shù)選型和技術(shù)架構(gòu)都是怎樣的
3. 研發(fā)流程上有做效率工具么
4. node 的框架用的是哪個(gè)，內(nèi)存監(jiān)控是怎么做的，你了解過(guò)哪些 node 的框架
5. vue 和 react 都看過(guò)哪些部分源碼，v-model 的原理是什么，虛擬 dom 的優(yōu)缺點(diǎn)是什么
6. typescript 相比 JavaScript 的優(yōu)點(diǎn)是什么
7. export 和 module.exports 的區(qū)別
8. node 的內(nèi)存泄露是如何監(jiān)控的
9. node 讀取文件的時(shí)候，fs.readFile 和 stream 有什么區(qū)別
10. 你的優(yōu)勢(shì)和劣勢(shì)是什么

聊了好多 node 監(jiān)控相關(guān)的，說(shuō)實(shí)話沒(méi)咋接觸過(guò)

一面

1. 介紹有難點(diǎn)的項(xiàng)目
2. 使用 Vite 遇到過(guò)哪些問(wèn)題
3. esbuild 有了解嗎
4. 當(dāng)你們把體量很大的項(xiàng)目拆分后，有沒(méi)有遇到拆分之前沒(méi)有的問(wèn)題
5. 組內(nèi)工具包你們是如何保證向下兼容的
6. 以下兩種寫法有什么區(qū)別，會(huì)出現(xiàn)什么效果，如果不一樣的話如何能得到同樣的效果

export?default?class?App?extends?React.Component?{
??state?=?{
????cnt:?0
??};
??render()?{
????return?(
??????<>
????????<button
??????????onClick={()?=>?{
????????????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?(
????<>
??????<button
????????onClick={()?=>?{
??????????setCnt(cnt?+?1);
??????????setTimeout(()?=>?{
????????????setCnt(cnt?+?1);
??????????},?1000);
????????}}
??????>
????????add?cnt
??????button>
??????<div>cnt:?{cnt}div>
????
??);
}

1. 問(wèn)輸出

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);
??});

1. 寫個(gè)二叉樹遍歷，深度優(yōu)先廣度優(yōu)先
2. Typescript 類型了解過(guò)嗎，infer 是做什么的，實(shí)現(xiàn)一個(gè) Pick 和一個(gè) Omit

二面

1. SSR 和 CSR 的區(qū)別，Nuxt 這類的 SSR 方案和直接渲染 ejs 這類方案有什么本質(zhì)的區(qū)別
2. Vue 和 React 使用的比重是怎樣的，這兩者各自的優(yōu)劣介紹一下
3. PureComponent 會(huì)引入什么問(wèn)題，什么情況下會(huì)需要用到它
4. Vue 的單文件開發(fā)模式，這個(gè)解析 vue-loader 是如何實(shí)現(xiàn)的。
5. 如果 template 語(yǔ)言換掉的話，會(huì)如何處理。
6. script 的部分會(huì)如何處理，由于 babel-loader 是只能針對(duì) js 類型的文件進(jìn)行轉(zhuǎn)化，那.vue 文件中的 script 標(biāo)簽是如何被 babel-loader 讀取的。
7. vue scoped 是怎么實(shí)現(xiàn)的，dom 上的哈希是如何和 style 中的哈希對(duì)應(yīng)起來(lái)的，又是如何保證每次生成的哈希不變的
8. babel.config.js 和.babelrc 有什么區(qū)別，應(yīng)該在什么場(chǎng)景使用，同時(shí)使用的話會(huì)出現(xiàn)什么現(xiàn)象
9. Vue 調(diào)用 render 函數(shù)的時(shí)機(jī)是在什么時(shí)機(jī)被觸發(fā)的，后續(xù)狀態(tài)變更導(dǎo)致 render 又是誰(shuí)觸發(fā)的
10. Vue 和 React 在數(shù)據(jù)更新上的差異，Vue 這種數(shù)據(jù)劫持的方式會(huì)不會(huì)帶來(lái)額外的問(wèn)題，Vue3 在這些問(wèn)題上有優(yōu)化么
11. 和forceupdate 都做了哪些事
12. 異步更新 DOM 這個(gè)操作，Vue 和 React 都是如何實(shí)現(xiàn)的，Vue 的異步處理還有其他方式可以做么，除了 MessageChannel 還有其他和他用法類似的 API 么
13. 公用的代碼如何做提取，如何判斷一個(gè)資源是否應(yīng)該被提取
14. Portal 除了做了把組件提到對(duì)應(yīng)的 DOM 下之外，還做了哪些事
15. 用什么方式發(fā)請(qǐng)求，axios 是個(gè)同構(gòu)的工具，它是如何實(shí)現(xiàn)區(qū)分 Node 和瀏覽器環(huán)境的
16. axios 內(nèi)部如何把 xhr 的 callback 轉(zhuǎn)換為 promise 的，如何處理請(qǐng)求異常的

二面問(wèn)得比較細(xì)，很多地方的細(xì)節(jié)其實(shí)沒(méi)太關(guān)注過(guò)，掛了

一面

1. 實(shí)現(xiàn) ob 和 watch 方法，希望當(dāng)方法傳入 watch 函數(shù)時(shí)會(huì)執(zhí)行一次，之后每次修改 data 上的屬性時(shí)，會(huì)觸發(fā)對(duì)應(yīng)的 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";

1. 輸入一個(gè)字符串，遇到方括號(hào)則對(duì)方括號(hào)內(nèi)的字符串重復(fù) n 次，n 是方括號(hào)前面的數(shù)字，如果沒(méi)有數(shù)字則為 1 次，可能存在嵌套

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

二面

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

這個(gè)真的是有點(diǎn)。。。難，很多完全是我知識(shí)盲區(qū)，尤其 node 的部分和 Taro 的部分，掛得服氣

一面

1. 主要做過(guò)哪些項(xiàng)目
2. Vue 兄弟組件傳值方式都有哪些
3. 介紹一下 Vuex
4. 介紹一下 diff 算法
5. Websocket 介紹一下，它和 http 有什么關(guān)系
6. 介紹一下 https
7. 用三個(gè)正面的詞和三個(gè)負(fù)面的詞評(píng)論一下你自己
8. 介紹一下你最近讀過(guò)的一本書
9. 有沒(méi)有做過(guò)哪些和代碼沒(méi)關(guān)系的但是比較精通的事情
10. 你對(duì)下一份工作的期望是怎樣的

二面

1. 對(duì)上家公司的感受，自己的成長(zhǎng)，不滿的地方
2. 之前的團(tuán)隊(duì)規(guī)模是怎樣的
3. 之前的業(yè)務(wù)是怎樣的
4. 對(duì)下一份工作的期望是怎樣的

一面

1. 對(duì)下一份工作有怎么樣的期望，你對(duì)這個(gè)規(guī)劃做過(guò)哪些努力
2. 介紹一個(gè)有難點(diǎn)的工作
3. 為什么之前要把項(xiàng)目從 SSR 遷移到 CSR
4. 實(shí)現(xiàn)一下 koa 中間件原理，如何判斷調(diào)用了多次 next 并拋出錯(cuò)誤
5. 事件循環(huán)介紹一下，Node 事件循環(huán)中如果在 Poll 階段不停地產(chǎn)生新的事件會(huì)怎樣
6. Node 中如果要對(duì)很大的字符串做 JSON.parse 應(yīng)該怎樣處理
7. 講一下瀏覽器中的重繪和重排
8. 介紹一下瀏覽器的合成層
9. 如果一個(gè)頁(yè)面需要同時(shí)適配 PC 端和移動(dòng)端，應(yīng)該怎么做，rem 和 vw 方案有什么區(qū)別
10. typescript 定義一個(gè)對(duì)象應(yīng)該如何定義，如果定義對(duì)象的 key 必須是字符串，應(yīng)該如何定義
11. Vue 的響應(yīng)式原理介紹一下，Watcher 的 cleanDeps 是做什么的
12. computed 和 watch 是什么原理
13. 如果 data 里有一個(gè)對(duì)象，不希望它被深層監(jiān)聽(tīng)，需要怎么做
14. 給定任意二維數(shù)組，輸出所有的排列組合項(xiàng)。比如 [['A','B'], ['a','b'], ['1', '2']]，輸出 ['Aa1','Aa2','Ab1','Ab2','Ba1','Ba2','Bb1','Bb2']
15. 給出任意一個(gè)二維數(shù)組，要求輸出數(shù)組元素的所有排列組合。如[['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"]

二面

1. Node 服務(wù)遷移到輕服務(wù)主要都做了什么
2. 你們的 RPC 用的哪個(gè)框架，grpc 和 thrift 的區(qū)別有了解么，protobuf 有了解嗎
3. serverless 有多少了解，它適合做什么，都用它寫過(guò)什么
4. 客戶端提供 API 版本不一致這類兼容性問(wèn)題你是如何做的處理
5. webpack 遷移 Vite 有遇到什么問(wèn)題，snowpack 有了解過(guò)么，它和 vite 有什么區(qū)別
6. 對(duì) React 熟悉么，hooks 有哪些最佳實(shí)踐
7. 性能優(yōu)化都做過(guò)哪些
8. 一個(gè)頁(yè)面的性能指標(biāo)都有哪些，你是如何做監(jiān)控的，如何監(jiān)控 node 服務(wù)的性能監(jiān)控
9. 實(shí)現(xiàn)一個(gè)二叉樹中序遍歷的迭代器，時(shí)間復(fù)雜度最好是多少，最差是多少，空間復(fù)雜度是多少

三面

1. 實(shí)現(xiàn)一個(gè)函數(shù)，傳入一個(gè)數(shù)組，數(shù)組中每一項(xiàng)代表一個(gè)線段的起止位置，計(jì)算所有線段覆蓋的長(zhǎng)度總量，并編寫測(cè)試用例

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. 計(jì)算一個(gè)矩陣內(nèi)，所有 1 覆蓋的區(qū)域（島嶼問(wèn)題） 力扣

//?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

1. Vue 從修改屬性到渲染到頁(yè)面上都經(jīng)歷了什么
2. 詳見(jiàn)代碼

/\*\*

-?目標(biāo):
-?實(shí)現(xiàn)一個(gè)簡(jiǎn)單的觀察者模式(或發(fā)布-訂閱模式)
??\*/

const?shop?=?{
apple:?5,?//?蘋果?5?元
potato:?2,?//?馬鈴薯?2?元
tomato:?3,?//?西紅柿?3?元
orange:?7,?//?橙子?7?元
}

????/**
????*?現(xiàn)在我們有一個(gè)便利店的實(shí)例對(duì)象，目標(biāo)是需要增加對(duì)商品價(jià)格的監(jiān)聽(tīng)，當(dāng)商品價(jià)格發(fā)生變化時(shí)，觸發(fā)對(duì)應(yīng)的事件。
????*?1、小明關(guān)注蘋果價(jià)格變化
????*?2、小剛關(guān)注橙子價(jià)格變化
????*?3、當(dāng)價(jià)格變化時(shí)，自動(dòng)觸發(fā)對(duì)應(yīng)的事件
????*/

????class?Pubsub?{
??????constructor()?{
??????}

??????list?=?{};

??????//?監(jiān)聽(tīng)方法，添加監(jiān)聽(tīng)者，監(jiān)聽(tīng)對(duì)象，和監(jiān)聽(tīng)事件的方法，
??????//?提示，可以將移除方法作為監(jiān)聽(tīng)方法的返回值
??????listen?=?(key,?listener,?callback)?=>?{
??????}

??????//?發(fā)布消息的方法
??????publish?=?(key,?price)?=>?{
????????/**?該如何定義?發(fā)布方法？?**/
??????}
????}
????//?定于一個(gè)Pubsub的實(shí)例對(duì)象
????const?pubsub?=?new?Pubsub();

????const?event1?=?pubsub.listen('apple',?'小明',?(listener,?price)?=>?{
??????console.log(`${listener}關(guān)注的apple的最新價(jià)格是${price}元`);
????})

????const?event2?=?pubsub.listen('apple',?'小強(qiáng)',?(listener,?price)?=>?{
??????console.log(`${listener}關(guān)注的apple的最新價(jià)格是${price}元`);
????})

????const?event3?=?pubsub.listen('orange',?'小剛',?(listener,?price)?=>?{
??????console.log(`${listener}關(guān)注的orange的最新價(jià)格是${price}元`);
????})

????const?event4?=?pubsub.listen('orange',?'小強(qiáng)',?(listener,?price)?=>?{
??????console.log(`${listener}關(guān)注的orange的最新價(jià)格是${price}元`);
????})

????/**
????*?應(yīng)該補(bǔ)充怎樣的邏輯能夠使得我們能夠監(jiān)聽(tīng)shop中的屬性值變化呢？
????*?提示：vue中雙向綁定是怎么實(shí)現(xiàn)的呢？
????*?vue2.0或vue3.0的實(shí)現(xiàn)方式都是可以的
????*/

????/**?我們?cè)O(shè)置一個(gè)觀察者方法，讓?shop這個(gè)實(shí)例對(duì)象便成為可觀察對(duì)象?**/
????const?observable?=?()?=>?{
????};

????const?newShop?=?observable(shop);

????newShop.apple?=?6;
????/**?小明關(guān)注了蘋果的價(jià)格，蘋果價(jià)格變更將會(huì)觸發(fā)事件
????**?console.log將會(huì)輸出:??小明關(guān)注的apple的最新價(jià)格是6元
????**/

????newShop.tomato?=?10;
????/**?無(wú)人關(guān)注西紅柿價(jià)格，不會(huì)觸發(fā)事件?**/

????newShop.orange?=?11;
????/**?小剛關(guān)注了橙子的價(jià)格，橙子價(jià)格變更將會(huì)觸發(fā)事件
????**?console.log將會(huì)輸出:??小剛關(guān)注的orange的最新價(jià)格是11元
????**/

????console.log(newShop);
????/**
????**?輸入出newShop
????**/

????console.log(newShop.apple);
????/**
????**?輸入出newShop的apple新值
????**/

1. 如果需要你實(shí)現(xiàn)掃碼登錄、單點(diǎn)登錄，有什么方案 做的業(yè)務(wù)不太感興趣，后續(xù)沒(méi)有繼續(xù)面

1. 為什么之前用 SSR，為什么又從 SSR 遷移成 CSR
2. 離線包的原理是什么
3. React hooks 比 class component 的優(yōu)勢(shì)在哪，如何在 hooks 中實(shí)現(xiàn) shouldComponentUpdate 這個(gè)生命周期，有實(shí)現(xiàn)過(guò)自定義的 hooks 么，useCallback 和 useMemo 的區(qū)別是什么
4. 為什么你們移動(dòng)端選擇 vue，pc 選擇 react，這兩個(gè)在性能上有什么區(qū)別么
5. 有做過(guò)哪些性能優(yōu)化
6. vite 的原理是什么，遷移 vite 有遇到什么問(wèn)題么
7. serverless 有什么了解，它背后的實(shí)現(xiàn)原理是什么，你用它做過(guò)哪些東西
8. 反轉(zhuǎn)鏈表
9. 一個(gè)字符串的全排列 問(wèn)題基本都答上來(lái)了，題也都寫出來(lái)了，但是不知道為啥掛了

一面

1. 主要的技術(shù)棧
2. 主要都是和客戶端如何協(xié)作
3. Vue 新版本特性有了解么
4. 在工作中有用到什么設(shè)計(jì)模式么
5. typescript 裝飾器有了解么，類裝飾器的 this 是如何處理的
6. 有用過(guò)抽象類么
7. 舉例一下 Map 和 object 的區(qū)別，如果需要一個(gè)字典的需求，都是 key: value 的形式，那應(yīng)該怎么選擇這兩個(gè)呢
8. Map 和 WeakMap 有什么區(qū)別
9. js 垃圾回收機(jī)制有了解嗎
10. 二分查找的時(shí)間復(fù)雜度是多少，簡(jiǎn)要描述一下過(guò)程，O(logN)是怎么算出來(lái)的，TopK 的時(shí)間復(fù)雜度是多少，快排的時(shí)間復(fù)雜度是多少
11. ES5 的繼承都有哪幾種，主要介紹一下組合寄生，下面這個(gè)的輸出是什么，this 指向誰(shuí)

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

1. 輸入一個(gè)二叉樹和兩個(gè) node，輸出這兩個(gè) node 的最近公共祖先

二面

1. 如果讓你實(shí)現(xiàn)一個(gè)計(jì)算器，都需要考慮哪些問(wèn)題 比較開放的一個(gè)題，邊說(shuō)邊寫

三面

1. 看新的機(jī)會(huì)的時(shí)候你更看重哪些方面，對(duì)哪些方面會(huì)感興趣
2. 當(dāng)前薪資
3. 接觸過(guò)哪些排序算法，歸并排序的思路是什么，一個(gè)數(shù)組做歸并排序的話，一共經(jīng)歷了多少次合并
4. 最有挑戰(zhàn)的項(xiàng)目是什么樣的
5. 有沒(méi)有經(jīng)歷過(guò)比較痛苦的階段
6. 最近有在學(xué)什么新的東西么
7. 之前的工作中有沒(méi)有你比較欣賞或者崇拜的工程師
8. 前端緩存策略，last-modified 和 etag 有什么區(qū)別，分別的適用場(chǎng)景是什么

一面

1. 根據(jù)我的簡(jiǎn)歷逐個(gè)捋項(xiàng)目
2. 對(duì)一個(gè)樹形結(jié)構(gòu)遍歷，輸出所有葉子節(jié)點(diǎn)
3. 寫一共獲取 URL 后的參數(shù)的方法 很簡(jiǎn)單的一輪面試

二面

1. 在上家公司做的主要業(yè)務(wù)是哪些，你負(fù)責(zé)哪些，哪些是迭代比較多的
2. 換膚方案你們具體是如何實(shí)現(xiàn)的
3. 國(guó)際化方案是如何做的
4. 頁(yè)面間同步狀態(tài)一般都有哪些方案，分別的應(yīng)用場(chǎng)景都是哪些
5. localstorage 的會(huì)不會(huì)出現(xiàn)不同項(xiàng)目的 key 覆蓋別人的 key 的問(wèn)題，如何解決
6. 業(yè)務(wù)的技術(shù)選型是如何考慮的
7. 寫一個(gè)發(fā)布訂閱模式的 on/emit/off
   7.1 如果需要把訂閱者執(zhí)行成功和失敗的方法分開，需要怎么做
   7.2 如果希望失敗的可追溯，找到是哪個(gè)訂閱者的報(bào)錯(cuò)，需要怎么做
   7.3 實(shí)現(xiàn)一下 before 和 after 方法，可以添加一些前置的和后置的訂閱者
   7.4 現(xiàn)在希望給所有的訂閱者加打點(diǎn)上報(bào)的功能，并且提供全局的開關(guān)，需要如何設(shè)計(jì)
   7.5 如果需要給某一個(gè)訂閱者單獨(dú)加一個(gè)打點(diǎn)，需要如何設(shè)計(jì)
   
8. 如果想給一個(gè)對(duì)象上的所有方法在執(zhí)行時(shí)加一些打點(diǎn)上報(bào)的功能，如何做

這一輪面試面了一個(gè)半小時(shí)，真的就是在一個(gè)功能上加來(lái)加去，其實(shí)想想還是挺考驗(yàn)代碼健壯度的

三面

1. 為什么考慮做前端
2. 做好一個(gè)產(chǎn)品工程師或者軟件工程師，核心在于哪里
3. 介紹一個(gè)有代表性的項(xiàng)目
4. 主要都負(fù)責(zé)哪些業(yè)務(wù)，工作的 C 端和 B 端的占比是怎樣的
5. 目前都看了哪些機(jī)會(huì)，下一份工作是怎么考慮的，希望做哪個(gè)方向
6. 整體開發(fā)流程是怎樣的
7. 工作節(jié)奏是怎樣的
8. 個(gè)人優(yōu)勢(shì)和缺點(diǎn)

一面

1. 以什么樣的心態(tài)找下一份工作，對(duì)下一份工作有什么樣的要求
2. 有什么比較感興趣的業(yè)務(wù)，你在這個(gè)業(yè)務(wù)中想要做什么
3. 如果希望 DOM 中的一個(gè)值和 js 中的變量雙向綁定，使用原生 js 可以怎么做，React 和 Vue 分別又都是怎么做的
4. proxy 和 defineProperty 的區(qū)別是什么，各自的優(yōu)勢(shì)和缺點(diǎn)是什么
5. 瀏覽器發(fā)請(qǐng)求和 node 發(fā)請(qǐng)求都有什么區(qū)別，瀏覽器都為發(fā)請(qǐng)求做了哪些默認(rèn)行為
6. 如何理解線程和進(jìn)程
7. 為什么 Vite 比 webpack 快很多，ESM 和 commonJS 的區(qū)別是什么，為什么 ESM 加載會(huì)更快，如何理解 ESM 的靜態(tài)
8. 都做過(guò)哪些打包的優(yōu)化
9. 在 CI/CD 中都需要做哪些事情可以把流程做得更好
10. 最近在學(xué)習(xí)什么

二面

1. 介紹一下你負(fù)責(zé)的業(yè)務(wù)
2. 為什么要對(duì)一些項(xiàng)目做重構(gòu)
3. 組件庫(kù)你們是如何做的，你在里面是什么角色，組件與組件之間的調(diào)用關(guān)系如何處理
4. 劉海屏你們?nèi)绾芜m配的
5. 有對(duì)小程序做過(guò)從打開到完全展現(xiàn)這個(gè)流程的監(jiān)控么
6. 講講對(duì) TDD 的理解
7. 有用到敏捷開發(fā)么，對(duì)代碼質(zhì)量保障效果如何
8. 提升開發(fā)效率你們有做過(guò)什么么
9. 性能上優(yōu)化有做過(guò)哪些事情
10. 平時(shí)如何學(xué)習(xí)
11. 這次換工作考慮的是什么
12. 如果不考慮錢的問(wèn)題，你最想做一個(gè)什么樣的產(chǎn)品

一面

1. 輸出，原因，解釋一下調(diào)用棧和作用域鏈的關(guān)系

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

1. 實(shí)現(xiàn)一下 Promise.all
2. 數(shù)組轉(zhuǎn)成嵌套對(duì)象

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

1. 解釋一下事件循環(huán)
2. 解釋瀏覽器渲染機(jī)制：重繪、重排，如何優(yōu)化？
3. Vue 和 React 對(duì)比

二面

1. 在上家主要做哪些業(yè)務(wù)
2. 對(duì) B 端和 C 端在技術(shù)開發(fā)上側(cè)重點(diǎn)都有哪些
3. 對(duì)技術(shù)選型是怎么考量的
4. 下一步有哪些規(guī)劃
5. 如何能創(chuàng)造出一個(gè)技術(shù)產(chǎn)品
6. 請(qǐng)寫一個(gè)抽獎(jiǎng)程序 ，已有參與抽獎(jiǎng)的員工工號(hào)組成的數(shù)組 staffIds。
   規(guī)則 1：同一員工不可重復(fù)中獎(jiǎng)。
   規(guī)則 2：每輪執(zhí)行抽獎(jiǎng)程序，入?yún)⑹潜据喴槿〉闹歇?jiǎng)人數(shù) n，將中獎(jiǎng)人工號(hào)打印出來(lái)
7. webpack 遷移到 Vite 有什么優(yōu)勢(shì)，遇到過(guò)什么問(wèn)題，遷移后如何測(cè)試

三面

1. 在上一份工作主要負(fù)責(zé)哪部分業(yè)務(wù)
2. 前后端架構(gòu)是怎樣的
3. 怎么理解 SSR，在項(xiàng)目中如何應(yīng)用
4. B 端都做過(guò)哪些內(nèi)容，架構(gòu)是怎樣的

一面

1. 瀏覽器請(qǐng)求頭和響應(yīng)頭都能記起哪些，都是做什么的
2. 協(xié)商緩存與強(qiáng)緩存
3. 響應(yīng)頭和跨域相關(guān)都有哪些，之前都是如何解決跨域的
4. Access-Control-Allow-Origin 用 * 和指定域名的區(qū)別是什么
5. 跨域是否允許攜帶 cookie，如果希望攜帶 cookie 需要如何做，如果 a.com 是我的域名，向 b.com 發(fā)請(qǐng)求，帶的是哪個(gè)域名的 cookie
6. 請(qǐng)求頭的 host，origin，refer 的區(qū)別是什么
7. 在什么場(chǎng)景下會(huì)發(fā)起 options 請(qǐng)求
8. !important 在什么場(chǎng)景用，css 選擇器權(quán)重是如何計(jì)算的
9. 盒模型的邊距疊加，如何解決盒子塌陷，如何創(chuàng)建 BFC
10. ==和===的區(qū)別，a==1&&a==2 有什么方式讓它返回 true
11. Object.create(null)和直接創(chuàng)建一個(gè){}有什么區(qū)別
12. new 一個(gè)函數(shù)做了哪些事
13. 對(duì)事件循環(huán)的理解
14. Vue 和 React 源碼讀過(guò)哪些部分，印象最深刻的是哪些
15. 簡(jiǎn)單介紹以下 Vue-router 的原理
16. diff 算法簡(jiǎn)單介紹一下
17. 前端工程化做過(guò)哪些
18. 如何做到的逐步減少項(xiàng)目中的 typescript 報(bào)錯(cuò)
19. 寫過(guò) webpack 插件么
20. babel 轉(zhuǎn)換的原理是什么
21. 性能優(yōu)化做過(guò)哪些
22. 離線存儲(chǔ)是如何做的
23. 都用過(guò)哪些設(shè)計(jì)模式
24. 對(duì)線上各類異常如何處理，對(duì)線上的靜態(tài)資源加載失敗如何捕獲
25. node 多進(jìn)程間通信是如何做的
26. koa 中間件原理實(shí)現(xiàn)是如何做的
27. 如何界定一個(gè)依賴包的安全性
28. node 做過(guò)哪些性能優(yōu)化

二面

1. 在 git CI 做過(guò)哪些事，做的動(dòng)機(jī)是什么
2. 無(wú)障礙做過(guò)哪些事
3. 業(yè)務(wù)上，前端和后端的工作占比是怎樣的
4. 有升級(jí)到 Vue3 么，覺(jué)得 Vue 的優(yōu)點(diǎn)是怎樣的
5. Vue 和 React 覺(jué)得哪個(gè)更優(yōu)雅
6. 有沒(méi)有做過(guò)給團(tuán)隊(duì)開發(fā)提效的技術(shù)方案
7. 在上家公司最大的成長(zhǎng)是什么
8. 今年的全年 OKR 是什么
9. 下一份工作有什么期待

三面

1. 有亮點(diǎn)的項(xiàng)目
2. 腳手架用的是什么，有自己做過(guò)腳手架么，Vite 的原理是什么，如何區(qū)分環(huán)境
3. Vue3 的組合式 API 有了解么
4. typescript 和 Vue2 遇到過(guò)兼容性問(wèn)題么
5. 為什么要把 SSR 遷移到 CSR
6. 離線包的原理是什么，有做離線包增量更新么
7. bridge 原理有了解么
8. 對(duì)頁(yè)面的異常監(jiān)控有了解嗎
9. 介紹一下 React 的優(yōu)化
10. 性能優(yōu)化都做過(guò)哪些
11. 寫一個(gè) EventBus，包含 emit/on/off
12. 之前工作中的亮點(diǎn)
13. 組件庫(kù)有做過(guò)嗎

一面

1. 做 2B 多一些還是 2C 多一些
2. 介紹一下盒模型，怪異模式和標(biāo)準(zhǔn)模式有什么區(qū)別
3. 如何做 CSS 屏幕適配
4. 移動(dòng)端有沒(méi)有遇到過(guò)滑動(dòng)穿透的問(wèn)題
5. 有沒(méi)有遇到過(guò)移動(dòng)端瀏覽器兼容問(wèn)題
6. js 的數(shù)據(jù)類型都有哪些，有什么區(qū)別，為什么基本數(shù)據(jù)類型存到棧但是引用數(shù)據(jù)類型存到堆
7. 數(shù)據(jù)類型常用的判斷方式都有哪些
8. ES6 都用到哪些
9. Promise 都有哪些方法
10. Promise 的 then 的鏈?zhǔn)秸{(diào)用，返回的一個(gè)新的 promise 的狀態(tài)是什么
11. await 和 promise 的關(guān)系，分別的應(yīng)用場(chǎng)景有哪些
12. esmodule 和 commonjs 區(qū)別是什么，還接觸過(guò)其他的模塊化方案么
13. 瀏覽器都有過(guò)哪些了解，內(nèi)核都有哪些，chrome 瀏覽器開啟一個(gè)頁(yè)簽時(shí)開啟了多少個(gè)進(jìn)程，對(duì)應(yīng)開啟了哪些線程
14. 異步加載 js 的方式都有哪些
15. 加載 css 和 js 時(shí)會(huì)阻塞 dom 渲染么
16. 強(qiáng)緩存和協(xié)商緩存誰(shuí)的優(yōu)先級(jí)誰(shuí)高，區(qū)別是什么，強(qiáng)緩存和服務(wù)器有通訊么，沒(méi)有通訊的話有狀態(tài)碼么，狀態(tài)碼是誰(shuí)返回的，緩存是存到了哪里
17. cookie 都有哪些屬性
18. samesite 作用是什么
19. cookie 和 storage 的區(qū)別是什么
20. http 都有哪些版本，1.1 有什么不好的地方么，隊(duì)頭阻塞是什么引起的，2.0 有沒(méi)有完全解決了隊(duì)頭阻塞問(wèn)題
21. get 和 post 有什么區(qū)別
22. 工程化都做過(guò)哪些
23. Vue 和 React 的區(qū)別
24. SSR 和 CSR 的區(qū)別是什么，分別的適用場(chǎng)景是什么，什么叫同構(gòu)，除了 SSR 還有什么方案可以解決首屏渲染問(wèn)題
25. 有寫過(guò) webpack 插件么
26. babel 配置過(guò)么，preset 和 plugin 誰(shuí)的優(yōu)先級(jí)高
27. 項(xiàng)目代碼規(guī)范是如何做的，如何避免有人本地跳過(guò)代碼規(guī)范
28. git commit 的有限制么
29. eslint 和 prettier 的沖突是如何解決的
30. CI 和 CD 的區(qū)別，除了 gitlab 的 CI/CD 之外還接觸過(guò)哪些
31. docker 有了解么，有實(shí)際用過(guò)么

二面

1. 之前主要是 Vue 還是 React，用哪個(gè)多一些？有看過(guò)一些源碼么
2. Vue3 和之前版本的差異在哪兒
3. 之前小程序是如何開發(fā)的
4. Node 了解過(guò)哪些，之前的 SSR 都是如何做的
5. 接下來(lái)工作有哪些期望
6. wasm 之前有哪些了解
7. 屏幕內(nèi)有一個(gè)矩形，有一條對(duì)角線，如果在矩形上點(diǎn)擊，如何判斷點(diǎn)擊的位置是在對(duì)角線上方，還是下方，還是點(diǎn)到了對(duì)角線上
8. 如果想給這個(gè)矩形畫個(gè)對(duì)角線，可以有哪些方式
9. 之前的數(shù)據(jù)可視化是如何做的
10. 有沒(méi)有一些技術(shù)沉淀的東西，比如在技術(shù)社區(qū)的交流或者寫一些文章
11. 除了編碼以外，有沒(méi)有做過(guò)管理方面的事情
12. serverless 有哪些了解
13. 現(xiàn)在工作分工的職責(zé)定界是怎么樣的
14. 前端工程化都做了哪些

一面

1. 主要技術(shù)棧有哪些
2. 主要業(yè)務(wù)有哪些
3. 主要的技術(shù)方案是什么樣的
4. SSR 遷移到 CSR 的背景是怎樣的，各自的優(yōu)勢(shì)是什么，為什么服務(wù)端渲染頁(yè)面會(huì)比客戶端快
5. 首屏性能優(yōu)化都有哪些
6. 都有用到過(guò)哪些協(xié)議
7. 遇到的無(wú)障礙的挑戰(zhàn)是哪些，屏幕閱讀器功能是如何實(shí)現(xiàn)的了解嗎
8. 國(guó)際化做過(guò)哪些
9. 都做過(guò)哪些方面的重構(gòu)，重構(gòu)都做了哪些優(yōu)化
10. webpack 遷移 vite 遇到了哪些問(wèn)題
11. 對(duì) serverless 有哪些了解，都用它做了哪些事情
12. 測(cè)試驅(qū)動(dòng)開發(fā)是怎么樣的流程，有什么方案可以提高 TDD 的效率
13. 前端安全都遇到過(guò)哪些問(wèn)題
14. https 講一下
15. 常見(jiàn)的 HTTP 狀態(tài)碼都有哪些
16. 瀏覽器進(jìn)程模型有了解嗎
17. 瀏覽器渲染流程是怎樣的
18. 事件循環(huán)介紹一下
19. Vue 的插槽的實(shí)現(xiàn)原理是什么
20. 都做過(guò)哪些性能優(yōu)化

二面

1. Vue 和 React 哪個(gè)寫的多一些
2. Vue 的組合式 API 的優(yōu)勢(shì)是什么
3. Vue2 的重復(fù)邏輯封裝一般都有哪些方式
4. 如果是需要通過(guò)調(diào)用 API 顯示 UI 組件，這種需要如何實(shí)現(xiàn)（比如 Toast、Dialog）
5. useCallback 和 useMemo 的區(qū)別和使用場(chǎng)景
6. 對(duì)一個(gè)公共組件或者工具做打包，一般都需要產(chǎn)出哪些范式的文件
7. commonjs 和 esm 的模塊引入和加載執(zhí)行的區(qū)別是什么
8. node 調(diào)用 RPC 是怎么做的，對(duì) thrift 有哪些了解
9. SSR 和 CSR 的優(yōu)勢(shì)分別是什么
10. Node 用的什么框架
11. 如果頁(yè)面中有大量的 DOM 更新，導(dǎo)致頁(yè)面變卡，有哪些方案可以優(yōu)化
12. 換膚方案是如何做的
13. 如果在 js 中執(zhí)行 location.href = url，這個(gè)行為有可能會(huì)有哪些安全問(wèn)題
14. CSRF 原理，整體的攻擊鏈路是怎樣的，都有哪些解決方案
15. XSS 都有哪些方式，如果過(guò)濾都需要過(guò)濾哪些內(nèi)容

三面

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

你這個(gè)項(xiàng)目我理解也沒(méi)什么難點(diǎn)啊
你沒(méi)做過(guò)客戶端你不懂
為什么你需要解決代碼里有很多報(bào)錯(cuò)的問(wèn)題，我理解頭條的程序員應(yīng)該不會(huì)寫出都是報(bào)錯(cuò)的代碼吧
頭條對(duì)你的培養(yǎng)可能真的不夠
我沒(méi)有覺(jué)得頭條不好的意思，我只是覺(jué)得頭條對(duì)你的成長(zhǎng)可能真的沒(méi)什么幫助
你們這個(gè)架構(gòu)本身就是有問(wèn)題的
我認(rèn)為你在計(jì)算機(jī)底層思維上還是有很大問(wèn)題的
我這邊也有很多頭條來(lái)的程序員，他們都用過(guò)這個(gè)，你們那邊怎么沒(méi)用過(guò)

一面

1. 為什么選擇做前端這個(gè)行業(yè)
2. Vue 和 React 的區(qū)別，項(xiàng)目是如何做選型的
3. 介紹一個(gè)之前重構(gòu)的項(xiàng)目
4. typescript 的優(yōu)缺點(diǎn)
5. 有沒(méi)有經(jīng)歷過(guò)需求無(wú)法實(shí)現(xiàn)或?qū)崿F(xiàn)難度較大的情況，這種情況如何處理呢
6. 之前做過(guò)最有挑戰(zhàn)的問(wèn)題
7. 實(shí)現(xiàn)一個(gè)類似微信聊天列表頁(yè)的布局，有如下需求

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

1. 最長(zhǎng)遞增子序列 力扣
2. 最長(zhǎng)連續(xù)遞增子序列 力扣

二面

1. 之前主要做的業(yè)務(wù)都是哪些
2. 團(tuán)隊(duì)的規(guī)模和分工是怎樣的
3. 之前做過(guò)的有挑戰(zhàn)的項(xiàng)目
4. SSR 為什么要遷移到 CSR，如果不遷移的話如何能做到 CSR 離線包的效果
5. 搜索旋轉(zhuǎn)排序數(shù)組 力扣

三面

1. 之前做過(guò)的有挑戰(zhàn)的項(xiàng)目
2. Vue 和 React 的區(qū)別
3. Vue 數(shù)據(jù)雙向綁定原理
4. 頁(yè)面第一次加載會(huì)觸發(fā)哪些 Vue 的生命周期
5. Vue 的 filter 原理有了解嗎，如果需要你實(shí)現(xiàn)一個(gè) filter，可以實(shí)現(xiàn)把一個(gè)字符串首字母大寫的功能，你要如何做（最開始問(wèn)原理，導(dǎo)致我后面理解錯(cuò)了，我以為是讓我實(shí)現(xiàn)一下 Vue 的 filter 功能了，然而人家其實(shí)要的是'abc' => 'Abc'的一個(gè)方法，但是面試官對(duì)我的實(shí)現(xiàn)持肯定態(tài)度）
6. 用 css 實(shí)現(xiàn)一個(gè) Tooltip：界面上有一個(gè) Button，鼠標(biāo) hover 上去后會(huì)在 Button 上方顯示一個(gè) tooltip，這個(gè) tooltip 有圓角，下方有一個(gè)小三角形
7. 對(duì)閉包的理解，閉包的適用場(chǎng)景和缺點(diǎn)
8. 從輸入 URL 到頁(yè)面渲染都發(fā)生了什么
9. 英語(yǔ)測(cè)試（說(shuō)實(shí)話我沒(méi)太聽(tīng)明白，我英文水平很差，直接跪了）

四面

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

五面

1. 下一份工作的期望
2. 有挑戰(zhàn)的項(xiàng)目
3. SSR 遷移 CSR 的原因，遇到過(guò)哪些問(wèn)題
4. LRU 算法 力扣 （這個(gè)題我最開始用 Map 做的，面試官跟我說(shuō)如果不用 Map，如何實(shí)現(xiàn)每次查詢和刪除都能做到 O(1)，我沒(méi)思路，面試官問(wèn)我查詢 O(1)用什么，我說(shuō)用哈希，問(wèn)我插入刪除 O(1)用什么，我說(shuō)用鏈表，可我不知道怎么結(jié)合到一起，面試官提示我可以用雙向鏈表，然后我才做出來(lái)的）

六面

1. 英語(yǔ)的自我介紹
2. 為什么會(huì)選擇做前端，做前端的動(dòng)機(jī)是怎樣的
3. 在追求極致體驗(yàn)方面做過(guò)哪些
4. 都會(huì)關(guān)注哪些指標(biāo)，如何做檢測(cè)
5. 之前的工作中迭代速度是怎樣的
6. 未來(lái)三到五年的規(guī)劃是怎樣的
7. 有沒(méi)有做過(guò)自動(dòng)化測(cè)試方案，對(duì)于兼容性如何做自動(dòng)化測(cè)試
8. 對(duì)于 UX 還原度，應(yīng)該如何高效測(cè)試
9. 一個(gè) PC 頁(yè)面，如果需要適配手機(jī)屏幕，都有哪些需要注意的，可能需要解決哪些問(wèn)題，需要如何去測(cè)試

1. 主要技術(shù)棧是哪些
2. 之前參與的重構(gòu)的項(xiàng)目有哪些有難度的地方
3. SSR 遷移到 CSR 是基于什么考慮
4. 項(xiàng)目的體量大概都有多大
5. 項(xiàng)目?jī)?yōu)化或者重構(gòu)后，一般從哪些方面評(píng)判效果好還是不好呢
6. bridge 的原理有了解么，有遇到過(guò)什么問(wèn)題么，在一些沒(méi)有 bridge 的場(chǎng)景里有沒(méi)有做過(guò)特殊處理
7. 做過(guò)喚起 app 么，有遇到過(guò)什么問(wèn)題嗎，如何判斷喚起是否成功
8. 國(guó)際化采用的什么方案
9. 換膚方案是如何做的
10. 小程序和 H5 都有哪些區(qū)別，有看過(guò)小程序底層如何實(shí)現(xiàn)的么
11. 為什么要做 Vite 遷移，遷移有遇到了什么問(wèn)題
12. 寫一個(gè) React Hooks，用來(lái)倒計(jì)時(shí)，傳入時(shí)間，返回 start、pause、restart、isRunning
13. 實(shí)現(xiàn)一個(gè)方法，傳入一個(gè) url 的數(shù)組和一個(gè)數(shù)字，對(duì) url 進(jìn)行請(qǐng)求，并根據(jù)數(shù)字限制最大請(qǐng)求數(shù)

一面

1. 對(duì)下一份工作有什么期望
2. React 閱讀過(guò)哪部分源碼
3. Vue 和 React 的區(qū)別
4. proxy 和 defineproperty 的在 Vue 中區(qū)別是什么
5. Vue-router 原理
6. js 和 ts 混合開發(fā)有沒(méi)有最佳實(shí)踐
7. Vite 為什么會(huì)比 webpack 快
8. Rollup 和 webpack 打包結(jié)果有什么異同
9. 問(wèn)輸出，解釋一下函數(shù)調(diào)用棧和作用域鏈的關(guān)系

function?bar()?{
??console.log(project);
}

function?foo()?{
??var?project?=?"foo";
??bar();
}

var?project?=?"global";
foo();

1. 問(wèn)輸出，如果希望循環(huán)中輸出 123，有哪些方式可以改

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

console.log(new?Date(),?i);

1. 對(duì) js 的異步是如何理解的
2. 如何理解閉包
3. 求一個(gè)字符串的不重復(fù)的最長(zhǎng)字串的長(zhǎng)度 力扣
4. 判斷一個(gè)對(duì)象是否是循環(huán)引用對(duì)象
5. 團(tuán)隊(duì)內(nèi)部 eslint 的規(guī)范是如何指定的
6. 從輸入 url 到渲染頁(yè)面，都發(fā)生了什么

二面

1. 主要負(fù)責(zé)的業(yè)務(wù)
2. 換膚方案是如何做的
3. 國(guó)際化方案是如何做的，都做了哪些語(yǔ)種
4. 離線包的方案原理是什么
5. node 主要都做了哪些
6. 安全問(wèn)題遇到過(guò)哪些，CSRF 的加簽名是如何做的
7. 單向鏈表反轉(zhuǎn)
8. 快速排序

三面

1. 主要負(fù)責(zé)哪些業(yè)務(wù)
2. 有過(guò)帶人的經(jīng)驗(yàn)么
3. 輸出數(shù)組中頻率第二高的元素的下標(biāo)
4. 冪等與非冪等的區(qū)別
5. get 請(qǐng)求是否可以傳圖片
6. 有沒(méi)有遇到過(guò)前端安全問(wèn)題
7. 線上問(wèn)題一般如何處理

???“分享、點(diǎn)贊、在看” 支持一波??