2021 阿裏字節快手面經

### 業務四面 (35 min)
周末，人在夢遊，剛下航母，就激靈靈接到電話，人還是糊的……
* 跨端的原理？我講了幾個例子：taro、uni-app，順便提了 flutter、react native、小程序等的架構，具體怎麼設計的。
* 動態錶單能够運用在什麼場景？我舉了 7、8 個例子。
* 移動端適配相關的問題，應用場景。
* 我公司的業務討論，是否了解過競品等等，這裏略過。
### hr 五面 (60 min)
* 對於你項目的競品有了解嗎？說一下
* 你的項目與競品相比，好在哪裏，有什麼優勢？
* 下班後都在做什麼，問的都是過往經曆，問的太詳細了，讓人不舒服。
* 如果與同事發生了意見的不一致，你會如何解决呢
* 現在針對我們的業務，急需增加一個新的模塊比特置，你會怎麼設計？數據怎麼展示……
沒錯，hr 還問技術相關的問題。
### 整體感受
總體面下來沒有讓人緊張的感覺，中規中矩，從剛開始較高的心理預期到後面慢慢回落……由於我的水平有限，最終沒有爭取到多高的薪水。
快手二面掛
-----
### 一面（60min）
* 自我介紹
* react 與 vue 的技術棧對比，說下區別
* B 端遇到的最複雜的數據結構是什麼
* 快速實現 \[1, 2, ...100\]，所有你能想到的解
* 數據展示的優化、數據截取和處理
* 實際場景中，哪些地方應用到了堆、鏈錶、多叉樹結構
* es6 及 es6+ 的能力集，你最常用的，這其中最有用的，都解决了什麼問題。
* GC 相關問題：es6+ ，eventloop 中涉及 GC 的部分。
* 數組 flat 展開的各種解法，數組 map 應用
* 講下 V8 sort 的大概思路
* Promise 並發限制
* 手寫 Promise.all
* 省市區拼接查字段，要求 O(n) 內解出
* 中臺的理解
* 討論了下業務
* 個人發展方向
一面的問題循序漸進，前面為後面鋪墊。
### 二面（60min）
* 項目的複盤優化
* 說下業務上最複雜的點
* node 限流算法
* 最有效的性能優化方法
* 你提到性能指標，能說說都是怎麼計算的嗎？比如 LCP，FID
* 算法題：數組全排列\[1\]
* 中臺業務討論
* 離職原因
大早上面試，狀態不佳，全排列算是基礎了，腦子裏有解題思路，但死活沒寫對，面完後狠狠又手寫了幾遍。
獵豹移動三輪技術面+一輪 hr 面
-----------------
### 技術一面 (60min)
* input type 都有哪些類型，還記得其他 attrs 呢
* css 的偽類和偽元素有哪些？有什麼區別？
* 在一個未知寬度的父元素內如何創建一個等邊正方形
* 异步加載 js 會阻塞什麼
* 數組所有方法都有哪些？findIndex 的參數說明
* vue 和 react 的异同
* 如何優化 vue 框架，注意是優化框架
* vue 和 react 的 jsx 使用
* id key 真的能使列錶比對更高效嗎？舉個反例？
* webpack 優化的手段
* tree-shaking 怎麼配置，如何?**避免**?tree-shaking？
* electron 和小程序遇到什麼坑？
* 說下微信自動化測試
* es2015 到 es2020 的新特性，你最常用什麼，給你收益最大的。
* weakMap 和 Map 的區別，weakMap 原理，為什麼能被 GC？
* 如何幹擾 GC ？
* webpack import 動態加載原理
* 知道 webpack 中的 devTool 嗎？
* 如何進行錯誤定比特和數據上報，線上异常的處理
* 為什麼有時候配置了 webpack caching，chunk 還是更新了？
* 講講瀏覽器和 node 的 eventloop
* 微任務後面還有哪些？requestAnimationFrame 是怎麼調用的？requestAnimationFrame 幀內總是有任務嗎？分情况說下。
* 幀數怎麼計算？
* 了解網絡安全嗎？
* 如何避免數據被 iframe 截獲
* 說下狀態碼
* 說下 304，什麼情况會 304？協商緩存的頭部字段？
* 你學習的渠道
* 工程化實踐的看法
第一個問題沒進入狀態，我心裏想怎麼問這麼簡單的問題，我宕機了一會……後面就順利了，面試官全程冷淡，也不閑聊。無趣，後來問了下，是獵豹的前端架構師，嗯，大佬就該有大佬的氣場，面試體驗棒棒的~~
### 業務二面 (60min)
大致內容：業務交流，工程化實踐交流、獵豹前端在做什麼，資源有哪些，他們的業務是偏 C 端的，未來的方向、發展等等……這一面很輕松，想到什麼說什麼，當然邏輯性肯定要有的。
### 業務三面 (70min)
這一面的面試官是獵豹移動的技術負責人。
* 項目是如何收集問題的，用戶量如何？
* 性能問題如何排查，你們項目的指標，具體數據、截圖發給我看看……
* 模塊化是怎麼實施的？
* 目錄結構講下
* 一些功能是自研還是使用第三方工具，叫什麼名字，怎麼使用 ？
* 瘋狂問測試相關的內容，單元測試和組件測試是怎麼做的、代碼覆蓋率多少，如何權衡測試原則，系統測試相關的內容，一些細節上的問題怎麼處理，等等，要說出個 1、2、3 來 ？
* 項目亮點/難點，怎麼解决 ？
* 複盤，整個項目總結，讓你重新設計這套系統你會怎麼做 ？
* 工程化實踐和深入的一個點
* 團隊氛圍，有什麼好的點可以說下，有什麼不好的點也說下……
* 中臺具體集成了什麼功能 ？你都做了什麼 ？
* 你是如何進行技術突破的，又是如何學習的 ？
* 對未來的規劃
* 有什麼問題想問？我隨便問了幾個問題過渡，然後拋出最重要的一個，厚著臉皮讓大佬指出我的問題（PS：這是我面試的目的之一，當時幾個面試進度屬獵豹最快了。別人眼中的我，在前端方面具體是怎樣的感官 ？我一直很好奇。不是每個人都有一個對自己清晰的認識的，既然自己想不出來，那就通過面試吧）。
這次面試暴露的點：項目的總結、全局的把控、自我複盤都是有所欠缺的。另外不要給自己挖坑，有時候知道一些概念但不知道具體的實操和原理，還是別說了。當時，關於測試方面的問題，考官一直假裝不懂，老是問：真的嗎？這個我沒做過，你給我講講吧？我原本沒錯的內容也被誤導了，emmmm……
### hr 四面（30min）
常規問題，沒有阿裏那麼嚴格。
* 講講前任公司
* 離職原因
* 加班的看法
* 獵豹的福利
* 有沒有其他 offer
* balabala……
字節跳動三面掛
-------
### 技術一面（60min）
* 剛開始就問我的項目，問的很詳細。
* webpack 提高構建速度的方式
* loader 輸入什麼產出什麼 ？
* webpack 原理
* webpack 動態加載的原理
* webpack 熱更新
* 如何寫一個 webpack plugin
* AST 的應用
### 最後
基礎知識是前端一面必問的，如果你在基礎知識這一塊翻車了，就算你框架玩的再6，webpack、git、node學習的再好也無濟於事，因為對方就不會再給你展示的機會，千萬不要因為基礎錯過了自己心怡的公司。前端的基礎知識雜且多，並不是理解就ok了，有些是真的要去記。當然了我們是牛x的前端工程師，每天像背英語單詞一樣去背知識點就沒必要了，只要平時工作中多注意總結，面試前端刷下題目就可以了。
**[CodeChina開源項目：【大廠前端面試題解析+核心總結學習筆記+真實項目實戰+最新講解視頻】](https://ali1024.coding.net/public/P7/Web/git)**

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
322.
323.
324.
325.
326.
327.
328.
329.
330.
331.
332.
333.
334.
335.
336.
337.
338.
339.
340.
341.
342.
343.
344.
345.
346.
347.
348.
349.
350.
351.
352.
353.
354.
355.
356.
357.
358.
359.
360.
361.
362.
363.
364.
365.
366.
367.
368.
369.
370.
371.
372.
373.
374.
375.
376.
377.
378.
379.
380.
381.
382.
383.
384.
385.
386.
387.
388.
389.
390.
391.
392.
393.
394.
395.
396.
397.
398.
399.
400.
401.
402.
403.
404.
405.
406.
407.
408.
409.
410.
411.
412.
413.
414.
415.
416.
417.
418.
419.
420.
421.
422.
423.
424.
425.
426.
427.
428.
429.
430.
431.
432.
433.
434.
435.
436.
437.
438.
439.
440.
441.
442.
443.
444.
445.
446.
447.
448.
449.
450.
451.
452.
453.
454.
455.
456.
457.
458.
459.
460.
461.
462.
463.
464.
465.
466.
467.
468.
469.
470.
471.
472.
473.
474.
475.
476.
477.
478.