大廠面試程序復盤(微信/阿里/頭條均拿offer,附答案篇)

背景

本人前端，3年經驗，由于個人的原因，決定跳槽，于是大概3月開始找作業，總歷時大概2個月，面試了微信/阿里/頭條，三家都拿到了offer，來分享一下面經，

問題比較多，而且很多面試題都是跟個人專案相關的，專案相關的問題借鑒意義不大，所以這里總結一些與專案無絕對關系的問題，歡迎圍觀～

本文答案均以鏈接的形式給出，因為我本人的一個特點就是回答題目一定要夠詳細，而且大部分的題目我都寫過文章或者公眾號轉發過文章了，感興趣可以直接關注公眾號前端Q，希望對你有幫助～

整體流程

這里，我梳理了一些自己的心得，方便自己后面做直播，這里就當預告一下，先放個思維導圖，

PS: 圖片有點大，如果打不開，直接訪問我的博客

微信

筆試

1. 陣列交集，撰寫一個函式，輸入兩個陣列，輸出它們的交集，輸出陣列中不含重復的元素，元素排列順序可隨意，

原題地址：https://leetcode-cn.com/problems/intersection-of-two-arrays-ii/

2. 二叉樹的搜索，輸入一個普通二叉樹的根節點，實作一個調度器，呼叫調度器的next()方法，將回傳二叉樹中下一個最小的數；呼叫迭代器的hasNext()方法，將回傳是否存在下一個數，二叉樹節點是整數，無序，

原題地址：https://leetcode-cn.com/problems/binary-search-tree-iterator/

3. 三角形個數，輸入一個非負整數的陣列，如果將陣列元素選作三角形的邊長，撰寫一個函式，輸出這個陣列可構成的三角形數量，

原題地址：https://leetcode-cn.com/problems/valid-triangle-number/

4. 陣列切分問題，輸入一個正序排列的整型陣列，如果它可以被切分為1個或多個子序列，輸出True，反之False，子序列需為連續的整型陣列，并且長度至少為3，

例1：
輸入： [1,2,3,3,4,5]
輸出： True
解釋：可以切分為2個各自連續的子序列：
1, 2, 3
3, 4, 5
例2：
輸入： [1,2,3,3,4,4,5,5]
輸出： True
解釋：可以切分為2個各自連續的子序列：
1, 2, 3, 4, 5
3, 4, 5
例3：
輸入： [1,2,3,4,4,5]
輸出： False
解釋：無法切分出長度至少為3的子序列，

原題地址：https://leetcode-cn.com/problems/split-array-into-consecutive-subsequences/

5. 一只青蛙一次可以跳上1級臺階，也可以跳上2級，求該青蛙跳上一個n級的臺階總共有多少種跳法.
6. 求下面代碼的輸出

function test(a,b) {
  console.log(b)
  return {
    test:function(c){
      return test(c,a);
    }
  };
}

var retA = test(0);  
retA.test(2);  
retA.test(4);  
retA.test(8);
var retB = test(0).test(2).test(4).test(8);
var retC = test('good').test('bad');  
retC.test('good');  
retC.test('bad');

7. top k

原題地址：https://leetcode-cn.com/problems/kth-largest-element-in-an-array/

8. 閉包問題及優化

for (var i = 0; i < 4; i++) {
  setTimeout(function() {
    console.log(i);
  }, 300);
}

PS：一面筆試要求是30分鐘，前4道演算法題，二面筆試題是15分鐘

與專案關系不大的問答題

1. 節流防抖(實作/場景/原始碼，如lodash實作原理)(https://www.cnblogs.com/LuckyWinty/p/5949970.html#4564734)
2. 事件回圈(瀏覽器/node/版本差異)(https://mp.weixin.qq.com/s/QgfE5Km1xiEkQqADMLmj-Q)
3. setTimeout 實作原理（https://mp.weixin.qq.com/s/7qTRSMqaqG8XZ9rpEBhYNQ）
4. react 和 vue 的區別
5. Promise 原理（https://juejin.im/post/5d6f7c83e51d4561c541a712）
6. 前端錯誤監控及容災（https://mp.weixin.qq.com/s/prf-mXexBh1Ie-ctq9FnzA）
7. 性能優化（https://mp.weixin.qq.com/s/qXFd3f7CkEzz4u_1zl-TSw、https://mp.weixin.qq.com/s/dy1u2g9TeCoq2WOdPLqAXw、https://mp.weixin.qq.com/s/DJ8Fdq1_cIoW0_NYekZwFw、https://mp.weixin.qq.com/s/azeUIx0EA86EFQrtIRUKwQ、https://mp.weixin.qq.com/s/wDKKj5R8SYm-_75Zn1y30A、https://mp.weixin.qq.com/s/BOdnCYbMQfmCpUC3w3KZqw、https://mp.weixin.qq.com/s/FdG7uVIDXltNyskL3qh8Cw、太多了，貼不過來了，自己再總結吧）
8. 談談 node 的記憶體泄漏（我的總結暫時沒時間寫，可以看看這篇，https://zhuanlan.zhihu.com/p/25736931）
9. 開發程序中遇到的最大挑戰是什么(梳理專案，得出難點)
10. 學習的動力怎么來的，如何維持(有興趣可以留意一下我的直播)
11. 瀏覽器的渲染機制是怎樣的（https://mp.weixin.qq.com/s/wcw30EUb2ds3AoW176WGeg）
12. SSR 作用及優缺點（seo/首屏快/開發成本高等，我專案用的是vue ssr，沒專門總結，可以先看這個，https://zhuanlan.zhihu.com/p/35871344）
13. 如何進行狀態管理（vuex/redux）
14. webpack 及瀏覽器的技術分享目的是什么，分享了什么，怎么做的分享（https://mp.weixin.qq.com/s/1FySzmVrNjS6wjgqALC96g、https://mp.weixin.qq.com/s/wcw30EUb2ds3AoW176WGeg）
15. 如何進行專案重構（知乎很多討論，直接去參考就可以了，或者看看這個https://www.itzhai.com/refactoring/refactoring-principle.html）
16. 行程與執行緒的區別（https://www.zhihu.com/question/25532384）
17. 說說知道的設計模式（參考掘金小冊子就可以了）
18. CI/CD（https://mp.weixin.qq.com/s/MbeW8UNZ1fPekWcaNqmsCQ）

PS：由于面試全程序歷時比較長，一些題目已經忘記了，大概記得這么點，然后很看專案，每一輪都詳細問了專案～

可能感興趣的問答

1. 面試一共幾輪

我本人一共 4 輪技術面 + 1 輪HR面，目前微信職級為9級以下的技術崗不用經過面委，9級以下的一般4輪技術面，內部轉崗可3輪技術面，9級及以上的需要走面委面試，大概形式是做份ppt去講自己的專案經歷及其他技術項，9級及以上的就5-10輪技術面不等，

2. 歷時多長

我本人總歷時一個多月(相對來說算很快了),所以如果你要面騰訊，千萬不要裸辭，不對，面什么都不要裸辭，這年頭不好混，慫一點，

3. 整體面試流程是怎樣的

內推->一面->二面->三面->四面->HR面->口頭offer->正式offer->背調->入職

每個階段耗時一到兩周的時間

4. 微信作業地點

目前微信總部在廣州，大部分的組都在廣州，其中微信支付在深圳，

5. 微信考演算法多嗎

多，基本上就是演算法+專案

阿里

筆試

1. n階樓梯問題(尾遞回的優化[函式最后呼叫自身可以減少中間變數|化遞回為回圈去優化]/備忘錄優化)
2. 節流防抖的實作(分析筆試答案時問到，總結差別，說出應用場景)(https://www.cnblogs.com/LuckyWinty/p/5949970.html#4564734)
3. 深拷貝(型別考慮/Symbol/Date等的構造/回圈優化/共用參考優化等),這里貼2篇文章給大家參考,https://juejin.im/post/5d6aa4f96fb9a06b112ad5b1,https://mp.weixin.qq.com/s/M7KBX3w2KqlWhZFHJSYP6Q)
4. 封裝一個只能輸入數字的React組件

問答題

1. 輸入URL后發生了什么（https://mp.weixin.qq.com/s/DLq_GIkdnuOayThfi3jI0A）
2. 事件回圈說一下(https://mp.weixin.qq.com/s/QgfE5Km1xiEkQqADMLmj-Q)
3. JS有幾種基本型別，分別是什么，與物件的區別(不貼鏈接了，我認為是前端的都應該知道)
4. JS 執行程序中是如何保存背景關系的(堆和堆疊，可以看極客時間的《瀏覽器作業原理》，或者參考我這里，https://mp.weixin.qq.com/s/klZ6j3Gj9cwHGQFys6Hdjg、https://mp.weixin.qq.com/s/HqADCzMGlIFDNnMRLsPTAA)
5. 你認為什么是前端
6. 為什么想來阿里
7. 最近在看什么書
8. 微前端了解嗎（https://mp.weixin.qq.com/s/awBqvJmqWc7JGxwgB0QQZA、https://mp.weixin.qq.com/s/80S-RFmoZoq8KfCH6YZ_Tg、https://mp.weixin.qq.com/s/HVwcY8JGyrK8VcN1Ic9sWQ）
9. 你想成為什么樣的人(個人成長規劃)
10. 專案中遇到的最大挑戰是什么，如何解決的
11. node 大量日志怎么處理的（緩沖佇列）
12. http2 的特點（https://mp.weixin.qq.com/s/OitrWEosrpuXh19o_TDasg）
13. node 與其他語言有什么區別，其優劣勢是什么
14. csrf 的核心原理(https://juejin.im/post/5bc009996fb9a05d0a055192)
15. node 事件回圈(https://mp.weixin.qq.com/s/QgfE5Km1xiEkQqADMLmj-Q)
16. FCP/FMP/FP 分別是怎樣定義，如何統計（https://mp.weixin.qq.com/s/wDKKj5R8SYm-_75Zn1y30A）
17. MySQL 題目，id 唯一，name 可以重復，求 name 有重復的所有資料
18. 有沒有推動過什么東西
19. 未來的一個發展是否是全堆疊，如何規劃（可以留意我的直播）
20. 鏈路錄屏的原理（可以分析rrweb即可，參考例子，https://mp.weixin.qq.com/s/PxEzBrr3YF1jD84c_p1uAA）
21. 鏈路錄屏法務問題如何解決（屏蔽關鍵資訊/用戶授權等）
22. FMP 定義及統計，w3c的草案你知道嗎（自行谷歌查找）
23. react 專案的可持續維護性如何體現（自行谷歌查找）
24. react hooks用過嗎，為什么要用（沒有專門總結，自行谷歌查找）
25. h5 和小程式有什么區別（自行谷歌查找）
26. https加密原理，中間人攻擊知道嗎（https://mp.weixin.qq.com/s/aMYp6Y5n26r9vdQIom4g0w、https://mp.weixin.qq.com/s/sHtZhRTNOihmxap5sDD6xQ）
27. ng 負載均衡的方式有哪些（https://mp.weixin.qq.com/s/u-XbBwGxHrhJGiMiiqz26w、https://mp.weixin.qq.com/s/o2Us4Zj6DO2NHGQVaHIa1A）
28. CDN 有什么作用（https://github.com/LuckyWinty/fe-weekly-questions/issues/24）
29. 不可變資料里面，immutable，洗掉陣列里面的串列(https://juejin.im/post/5b9b30a35188255c6418e67c,
    https://juejin.im/post/5e6a14b1f265da572978a1d3)
30. 垃圾回收中，內部函式返給上層的物件是如何管理的
31. es 靜態分析原理(https://zhuanlan.zhihu.com/p/33843378)
32. 有一個很大很大的檔案，如何統計檔案里面重復最多的行是哪行(參考git的記錄存盤)

頭條

筆試題

一面：

1. 執行代碼求輸出，并說明為什么，嚴格模式下輸出有變化嗎，為什么

var a = function () {this.b = 3;}
var c = new a();
a.prototype.b = 9;
var b = 7;
a();

console.log(b);
console.log(c.b);

2. 給定一個升序整型陣列[0,1,2,4,5,7,13,15,16],找出其中連續出現的數字區間，輸出為["0->2","4->5","7","13","15->16"]

function summaryRanges(arr){
    //TODO
}

3. 請實作以下的函式，可以批量請求資料，所有的URL地址在urls引數中，同時可以通過 max 引數控制請求的并發度，當所有請求結束之后，需要執行 callback 回呼函式，發請求的函式可以直接使用 fetch 即可

function sendRequest(urls: sring[],max:number,callback:()=>void){
    //TODO
}

二面：

1. 實作一個字串反轉：
   輸入：www.toutiao.com.cn
   輸出：cn.com.toutiao.www

要求：
1.不使用字串處理函式
2.空間復雜度盡可能小

2. 不借助變數，交換兩個數，

function swap(a, b) {
    //TODO
}

3. 觀察者模式與發布訂閱者區別，并寫出其模型

與專案無絕對相關的問答題

1. vue 事件機制是如何實作的 (https://juejin.im/post/59ca5e975188257a8908959b)
2. vue 的組件通信方式有哪些
3. react fiber 的實作原理 (https://juejin.im/post/5dadc6045188255a270a0f85#comment)
4. vue 回應式資料原理(vue2/vue3/依賴收集/發布訂閱/watcher訊息佇列控制/Vue.set實作)（https://mp.weixin.qq.com/s/zDv_IQ36o_rRD25xN9uyuw、https://mp.weixin.qq.com/s/hTygoAan4yH3V4XV9iE1Pw）
5. vue 轉小程式怎么實作(ast/生命周期對齊/跨平臺模塊兼容/兼容細節點實作程序)
6. 性能指標，如何理解TTI，如何統計，與FID有什么區別，如何實作統計，還聊了很多性能的東西（https://mp.weixin.qq.com/s/wDKKj5R8SYm-_75Zn1y30A）
7. 說說你所了解的安全問題及防護方法（https://mp.weixin.qq.com/s/rU32rVM6Q-ele01ZB3RFzg）
8. 說說你知道的設計模式，并舉個對應的模式例子（https://mp.weixin.qq.com/s/x3OCgS_knmM4D5zNSIVGRg）
9. 未來規劃及學習方法
10. 你覺得你是怎樣拿到京東校招的sp的
11. 遇到的最大挑戰/過去的最大識訓分別是什么

我本人的博客/公眾號，似乎面試官都看過，都知道我學過什么，知道什么，所以很多我博客上有的東西都沒問，甚至我引申到過去，都不讓說，有種沒機會表現的感覺，哈哈

感受&更多學習資料

其實單看問題，參考性還是比較小的，畢竟面試官主要會根據簡歷去發問，這里的一個感受就是，專案中遇到的最大挑戰，這個問題真不好答，我當時答得也不夠好，后面又回去總結了一波專案，建議大家都好好總結一下自己平時遇到的問題，尋根究底，

這部分的題目，我會同步到我的每周N題上，歡迎大家來交流答案啊，想刷題的也可以來，地址如下：
https://github.com/LuckyWinty/fe-weekly-questions/issues

有很多知識點，雖然我沒被問到，但是我寫了不少文章，感興趣的話可以關注一下我的博客，地址如下：
https://github.com/LuckyWinty/blog

更多我覺得比較好的博客，地址如下：

• https://juejin.im/user/5cf288385188254abb110e3b/posts
• https://juejin.im/user/58d4e734570c350058cbb900/posts
• http://blog.poetries.top/FE-Interview-Questions/
• https://juejin.im/user/5bea27965188250edf4ad8b7/posts
• https://juejin.im/user/5c45ddf06fb9a04a006f5491/posts

交流

• 歡迎加我微信(winty230)，拉你進技術群，長期交流學習...
• 歡迎關注「前端Q」,認真學前端，做個專業的技術人...

標籤：JavaScript

上一篇：uni-app熱更新

下一篇：Ajax(1) —— Ajax基礎