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

背景

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

問題比較多,而且很多面試題都是跟個人項目相關的,項目相關的問題借鑒意義不大,所以這裏總結一些與項目無絕對關係的問題,歡迎圍觀~

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

整體流程

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

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

微信

筆試

  1. 數組交集,編寫一個函數,輸入兩個數組,輸出它們的交集。輸出數組中不含重複的元素,元素排列順序可隨意。

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

  1. 二叉樹的搜索,輸入一個普通二叉樹的根節點,實現一個調度器,調用調度器的next()方法,將返回二叉樹中下一個最小的數;調用迭代器的hasNext()方法,將返回是否存在下一個數。二叉樹節點是整數,無序。

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

  1. 三角形個數,輸入一個非負整數的數組,如果將數組元素選作三角形的邊長,編寫一個函數,輸出這個數組可構成的三角形數量。

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

  1. 數組切分問題,輸入一個正序排列的整型數組,如果它可以被切分為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/

  1. 一隻青蛙一次可以跳上1級台階,也可以跳上2級。求該青蛙跳上一個n級的台階總共有多少種跳法.
  2. 求下面代碼的輸出
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');
  1. top k

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

  1. 閉包問題及優化
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輪技術面不等。

  1. 歷時多長

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

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

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

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

  1. 微信工作地點

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

  1. 微信考算法多嗎

多,基本上就是算法+項目

阿里

筆試

  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);
  1. 給定一個升序整型數組[0,1,2,4,5,7,13,15,16],找出其中連續出現的数字區間,輸出為[“0->2″,”4->5″,”7″,”13″,”15->16”]
function summaryRanges(arr){
    //TODO
}
  1. 請實現以下的函數,可以批量請求數據,所有的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.空間複雜度盡可能小

  1. 不藉助變量,交換兩個數。
function swap(a, b) {
    //TODO
}
  1. 觀察者模式與發布訂閱者區別,並寫出其模型

與項目無絕對相關的問答題

  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」,認真學前端,做個專業的技術人…

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※帶您來了解什麼是 USB CONNECTOR  ?

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站,提高曝光率!

※綠能、環保無空污,成為電動車最新代名詞,目前市場使用率逐漸普及化

※廣告預算用在刀口上,台北網頁設計公司幫您達到更多曝光效益

※教你寫出一流的銷售文案?

您可能也會喜歡…