站在未來看現在
你當像鳥飛向你的山

前言

????普通本科，軟件工程專業，2019年畢業進入奇安信集團（前360企業安全），實習期間遇到一群可以一起嗨的朋友，感覺很幸福，也很慶幸能夠遇到hin nice的導師，對我的成長幫助 hin 大。跳槽之旅要從6月份開始投簡歷講起，因為個人原因想要去深圳，所以拒掉了知乎的offer，又因為個人原因不去深圳了...最后入職字節base北京-國際化團隊，想要內推的朋友們可以私聊我～，具體offer選擇的原因可以看面經部分哦～。這篇文章想總結一下這段時間的面試和一些好文推薦。
????面試是一個雙向選擇的過程，不要因為一次面試失敗就否定自己～沒有誰生來就是大牛，面試不僅看你的技術能力表達能力，也很看你和面試官的緣份，所以每次面試結束之后記得總結復盤一下。也不要因為害怕失敗遲遲不敢投出自己的簡歷，我開始也是這樣，以一個已經上岸的人的角度再往回看，你只有邁出去，你才知道你行不行，勇敢點！！不要還沒開始就結束了。不論面試結果失敗還是成功，你要繼續磨刀霍霍向offer，奧利給少年們！！！

面試準備情況

????說說我的面試準備情況，開始準備階段就是在掘金知乎上面看看大家的面經，面經不論對找工作還是查漏補缺的人來說幫助都很大，所以我也來反哺一下社區～希望對大家有幫助，大家有什么問題或是想知道的都可以私聊我，我盡力幫助盆友們～。看了面經，就大概知道現在社招會問哪些方面的問題，看了下來大概就分為三劍客基礎、框架全家桶使用及原理、前端工程化、計算機網絡、瀏覽器、前端各領域熱點話題（錯誤監控，性能監控，微前端，跨端開發...），然后可以列出自己的思維導圖，進行查漏補缺。
???? js基礎我主要是看書，你不知道的js 上和中看完了一遍，紅寶書看了幾個章節，這樣的技術書需要反復看，每次看都有不一樣的收獲。前端熱點話題這個是因為我有報名前端早早聊，會聽聽業界大佬們的分享，這是一種學習的方式，當然也可以找找相關話題的好文章，理性報名～。關于看文章這回兒事，也有點小建議給盆友們，大家學習時盡量看官方文檔，比如mdn。學習框架，看源碼，vue源碼我看了很多次，理解了很多次，不要在才開始學習時就去看別人消化之后的文章，別人消化之后輸出的文章是別人的收獲，可以作為你后續查漏補缺的一種方式，但是不應該是你學習的范本～
????另外比較重要的就是算法，在我開始準備面試階段，沒那么看重算法，每天刷1-2個題，而且還只是ac就行，并沒有去思考最優解，思考時間復雜度和空間復雜度該怎么優化一下，這樣是沒有提高的。大學有學過一些簡單的數據結構和算法，知道幾種常見排序的思路能夠馬馬虎虎手寫出來，但是在字節三面的時候還是入坑了（可以看下面字節的面經），算法是一個長期積累的過程，并不是在短時間可以快速提高的，所以盆友們注意在平時就要積累自己的算法能力哇！！！在字節三面后深刻意識到自己的問題，開始將大量的時間投入到算法練習中（大家理性看待哇，不要盲目投入大量的時間在投入多回報慢的事情上，我是在明白自己的基礎已經準備的差不多的情況下，這里也可以看出來積累的重要性）在后面接近一個月的時間里反復練習算法，leetcode刷了80個題，簡單和中等參半，困難3個題，每個題基本上都做了3次左右，每個題都會思考用哪個算法比較好，為什么？我有看過一個人說，練習算法最好從 樹 開始，因為樹的各類題目基本上都會用到遞歸算法，理解了遞歸思想，其他算法思想就能夠更好的掌握，后續找到鏈接了我再貼上來～ 練習下來發現這位大佬說的真好，是這個理（雖然我并沒有從樹開始練習，后悔沒有早看到）。
????項目相關的準備，之前有看過一篇盤沖大佬的文章我在阿里招前端，我該怎么幫你？，對我幫助很大，希望也可以幫到泥萌～

面試記錄

????7月16日到7月24日 妥妥的水逆期鴨！！！（看來和深圳么緣，面的深圳崗都失敗了...

知乎

????知乎面試體驗很棒，推一波知乎二面面試官Lucas大佬，是《React狀態管理和同構實戰》的作者，二面沒有常規的面試題，會根據簡歷中項目不斷深入，提出讓你有思考有收獲的問題，我認為這是面試最好的狀態～。知乎的面試有點久了，當時也沒有記錄下來，大致回憶一下（遺漏的應該很多）～

一面

https握手過程？

http緩存？（其實http緩存除了強緩存和協商緩存，還有一個自發的啟發式緩存，具體可以查查rfc）

vue雙向綁定的原理？

computed實現原理？

原型鏈

事件循環

flex布局（grid布局）

promise

手寫題： 1. 畫一個田字格，其中有一個半徑是5px的圓距離右下格子下邊距和右邊距都為10px。

二面

項目相關的問題...

有什么想和我聊的？（講講自己最近學習的技術和有意思的點）

三面

介紹你覺得最有特色的一個項目，項目開發遇到過什么難點都是怎么解決的。（注意項目背景）

開發過程中用到過哪些設計模式？

你對面向對象的理解？

字節

一面

??問了很多項目相關的問題，基本上把簡歷上的項目問了個遍（一面問項目我也表示很疑惑呢...），可以列出來一些和實際業務沒太大關系的題目
1. jsBridge通信方式有哪幾種，各有什么優缺點，用哪種方式比較好？ 2. 你知道錯誤監控怎么做的嗎？能監控哪些錯誤？有哪些局限性？ 3. 項目中是怎么做錯誤處理的？ 4. 基礎相關的題目：兩行文字，第二行超出了省略怎么做？

編程題：
1.以下代碼輸出什么？并用es5改寫它 javascript for(let i = 0 ; i < 5; i++) { setTimeout(()=>{ console.log(i); }) } console.log(i);

2.實現以下函數 javascript setQuery('https://www.baidu.com?a=1', {a:2,b:2}); // 輸出： 'https://www.baidu.com?a=2&b=2' // 注意：考慮邊界情況(如hash、url的 encode 和 decode)

### 二面

http緩存，項目中是如何用的，給了幾個場景，問此時應該怎么配置緩存頭。

css flex布局 grid布局有用過嗎？

css 動畫 實現一個div 無限旋轉

你認為移動端開發和pc端開發有什么區別？

遇到過哪些跨域情況，都是怎么處理的？（cors, ngnix, iframe

事件循環 / promise （原諒我給忘了... 經驗告訴我們面完之后一定要做個記錄

平時是怎么學習的？

邏輯題：

兩瓶紅藍墨水
先從紅墨水中擠一滴，放入藍墨水中，搖勻。
再從藍墨水中擠一滴，放入紅墨水中，搖勻。
問最后，紅藍墨水中 紅墨水與藍墨水的比例。

編程題：

sum(2)(1,2,3)(3).valueOf(); // 11

三面

最近在研究什么？我們來討論以下～

如果讓你重新做一次之前做過的項目，你會怎么做？

編程題：(當時算法能力太low了... 兩個題都沒做出來，三面掛...) 1. 給定一個正整數數組，對于數組中每一個區間都存在一個最小值，存在一個x值，x值為該區間最小值*區間數組的和，求x最大值的區間。
2. 分餅干

+二面（被其他部門撈起來繼續二面...）

hybrid開發，存在什么問題？如何優化首屏加載時間？

從輸入url到頁面展示，中間發生了什么？越詳細越好。

CDN DNS相關深入。

算法題： 1. 連續子數組的最大和 (leetcode原題和三面第一題類似)

面試官本意是想考察一下在三面沒做出來的第一題，下來有沒有復盤，由于當時下來用暴力解法把三面第一題做出來了... 直接給面試官講了我做這題的解題思路，面試官一聽思路不太對，于是開始了算法填空題... 是的，你沒有看錯，算法填空題！！！面試官把解法的大體框架寫了出來，只需要我填上兩行代碼，然后我卻花了接近20分鐘把這兩行代碼填上。。太菜了！！面試官直接說你的算法能力在我這兒也過不了，于是我加了面試官的微信，想在后續的學習中如果遇到什么問題可以請教一下。面試官對我的幫助很大～ 字節的面試體驗也太加分了八～
????在這一面之后，簡歷被鎖了，但是面試官后續有了解到我在百度和快手的三面都通過了，想讓我再試試他們部門！！

+二面

http2相對于http1.1的特性，說得越詳細越好。

多連接 分情況討論，哪些情況下用http1.1比較好，哪些情況下用http2比較好？

性能監控，主要監控哪些指標？

減少首屏時間有哪些方式？

如何減少請求時間？

編程題：
1. eventbus實現一個發布訂閱模式。 2. 限制并發數。

+三面

描述一下團隊情況，人員配比，項目情況，我從中擔任的角色是什么？項目的亮點，難點。

根據我項目問了很多場景類的題目（問題格式：如果要你實現...你會怎么做？）。

某個項目的數據結構是怎么樣的，大致寫出來。

問了一些基礎：

瀏覽器哪些情況下會存在跨域？怎么解決？（盡量全面）

描述一下cookie（可以從大小，屬性，作用，場景來描述）

編程題：
1. 實現 promise.run 串行執行promise(考慮promise.all是并行執行) ，注意： 結合reduce實現 2. 實現一個組件 每輸入4個字符 加上一個空格。 （注意一定要考慮邊界情況） 3. 做一道之前沒有做出來的題：連續子數組的最大和

到這里經過了字節的6輪技術面試，面試體驗都很棒～ 字節hr小哥哥也很負責，6輪面試跟著我情緒波動的小哥哥，感動！！！在這里豎起來我的大拇指趕緊夸贊一波～
在面試官好感+1 hr好感+1 部門也是我向往的，果斷選擇了字節！！！

騰訊

一面

項目中遇到的難點？以及怎么解決的？存在什么遺憾未解決的問題嗎？

webpack拆包有幾種方式？

垃圾回收機制？

重繪重排？平時開發過程中如何避免？

有寫過loader或者plugin嗎？知道其中的原理嗎？

webpack的構建流程？

對框架的理解？vue mvvm框架？（從廣義的框架思想以及解決了什么問題 到 可深入到框架原理）

對 virtual dom 的理解？

二面（筆試面試）

5個編程題：
1. 字符串相乘 2. 無重復字符串的排列組合 3. 1234567 格式化為 1,234,567 4. 找出兩個數組的相同元素（注意考慮數組中存在對象的情況） 5.

var list = [{id:1, type:'A'}, {id:2, type:'B'}, {id:3, type:'A'}, {id:4, type:'C'}]; /*嘗試用編寫一個惰性求值的實現。如 list .where(function(x){ return x.id >=2 }) .where(function(x){ return x.type=='A'}) .value() */ 此時我的算法能力太弱了... 掛...

shopee

一面

原型鏈相關的題目...

1)

function Fun(){this.a = 'fun'; }Function.prototype.getValue = function(){console.log(this.a) }Fun.getValue(); // undefined

• 2)

function Fun1 () {Fun1.getValue = function () {console.log(1);}this.getValue = function () {console.log(2);} }Fun1.prototype.getValue = function () {console.log(3); }Fun1.getValue = function () {console.log(4); } Fun1.getValue(); // 4var obj = new Fun1(); obj.getValue(); //2function Fun2 () {} Fun2.getValue = function () {conosle.log(5); } Fun2.prototype = Object.create(Fun1.prototype); // Fun2.prototype = Fun1.prototype; // Fun2.prototype = new Fun1(); var obj2 = new Fun2(); obj2.getValue();// 3

flex布局

csrf原理和預防

vue2 和 vue3的區別 proxy可以代理深層次對象變化嗎？

http緩存 expired max-age etag，network disablecache是什么原理？

跨域 cors ，options請求有了解嗎？預檢請求的狀態碼是什么？

編程題：
1. 判斷一個電話號碼是否是靚號？
輸入一個電話號碼 '15629384444' '15645673456'
至少滿足兩個條件，則為靚號： 1. 連續4個相同數字 2. 4個遞增的數字

面試過程自我感覺還不錯，但是掛了...

快手

一面

webpack 拆包的幾種方式，webpack首屏渲染優化做了什么？

構建為什么用jenkins 為什么不用gitlab pipline？

js原型題目

function Foo () {this.a = 1;return { a: 2, b: 3}; } Foo.prototype.a = 4; Foo.prototype.b = 6; Foo.prototype.c = 7; var obj = new Foo(); obj.a obj.b obj.c

css 畫一個正方形，要求邊長是設備短邊的一半長度（可延伸到移動端適配方案）

h5調用了哪些端的能力(hybrid app)

手寫題： 1. 手寫promise.allSettled
2. 將短橫線變量命名換成駝峰命名（eg. get-element-by-id => getElementById） 3. 有序數組排序（最優解）參考LC：合并排序的數組

二面

端相關：

hybrid 通信方式以及優缺點

hybrid 性能優化（著重首屏渲染）

jssdk 鑒權怎么做的

頁面打點相關：

如何計算某個子頁面訪問量（router 原理相關）

如何計算某個組件的展示次數（vue原理相關，生命周期）

vue相關：

vue自定義指令用得多嗎，什么情況下用到？

vue組件的通信方式以及使用場景和優缺點。

項目有什么業務特點以及難點。

vuex原理以及劣勢

你了解web安全嗎？（可站在web安全高度來講，再深入到某一種詳細的攻擊方式和防御，比如xss,csrf,ddos...）

算法題 1. 爬樓梯（動態規劃的方式/優化空間復雜度） 2. 實現以下函數：

getQuery('https://www.baidu.com?a=1&b=2') // {a:1,b:2}

注意考慮邊界情況。
url decodeURI 與 decodeURIComponents 有什么區別？

三面

手寫題： 1. 實現以下函數：

transform('get-element-by-id') //輸出：getElementById GetElementById

輸出隨機顏色 hex
eg. #f1f2f5
考慮十進制轉十六進制 num.toString(16)

繼續將 hex #f1f2f5 轉為 rgb(241,242,245)

其中涉及到hex的校驗 注意考慮hex存在縮寫三位數字的情況 #fff，且每一位都是16進制的
考慮用正則方式實現呢？

css題目： 1. 以下元素在頁面中展示幾行？

<span></span> <div></div> <img/>

給div元素加上 position:absolute 頁面布局如何變化？

<span></span> <div style="position: absolute"></div> <img />

給div元素繼續加上 top:5px;left:5px 頁面布局如何變化？

<span></span> <div style="position: absolute;top:5px;left:5px;"></div> <img />

清空前面所有樣式，向div元素加上 margin-top: 5px; 頁面布局如何變化？

<span></span> <div style="margin-top: 5px;"></div> <img />快手技術面試通過了～ 面試體驗都很棒，可以感受到快手的技術氛圍和團隊氛圍是很棒的，但是和字節的部門相比起來，還是選擇了字節～ 如果想要投快手的朋友們也可以私聊我～ 幫你簡歷推給面試官！！！

百度

一面

模塊化有了解嗎？發展歷程？ 以下分別是什么模塊化規范？ ```javascript export m export default m module.export = {}

``` 2. webpack熱更新有了解嗎？ 3. 原型鏈 4. cookie（可以講講自己的理解，可以從屬性，場景，作用來全面講解cookie） 5. 前端路由和服務端路由的區別？ 6. webpack拆包的方式有哪些？ 7. 如何減少首屏渲染時間？ 8. 什么場景下用服務端渲染？服務端渲染有哪些優點？ 9. vue-router的原理？ 10. vuex的原理？

編程題： 1. 如何統計當前頁面setTimeout定時器的執行次數？ 2. 實現 await myForEach(arr, callback); 3. 實現一個穿梭框，主要是左邊列表是待選列表，右邊列表是已選列表，點擊右邊列表中某一項時可撤銷選擇。

二面

babel是如何將es6轉成es5的，著重 .babelrc 的配置。

講講項目中遇到的難點，是如何解決的？

有看過webpack的源碼嗎？

項目的性能優化可以從哪些方面考慮？

編程題： 1. 實現vue-router 2. 實現一個類似于百度首頁輸入框，輸入內容時，會出現一個匹配關鍵詞的列表。（注意：考慮哪些優化的點，比如防抖，請求與響應的匹配）

三面（主管面）

輸入URL到頁面展示，其中發生了什么，越詳細越好。

...其余圍繞項目和團隊情況聊天，也會有一定的場景題，比如，你的leader提出了一種解決方案，但是你認為有更好的解決方案，怎么處理這種情況？如果采用了你的解決方案，并且經過了測試，但是上線之后發現了問題，并且給公司造成了嚴重的事故影響，此時應該怎么解決？

百度主管面比較看重候選人的價值觀與公司是否符合（大家在面試一家公司之前，先了解一下公司的價值觀是怎么樣的，和你的價值觀搭不搭～，再決定是否投遞簡歷）

百度的面試體驗也很棒，是百度云團隊，二面面試官我超級喜歡，技術能力不用說，面試并不是說想要把你考倒，而是不斷發掘你的優點，遇到卡住的點，面試官會努力引導你～ 喜歡這樣的面試體驗！！！ 我是個喜歡傻笑的姑娘，面試官小姐姐陪著我傻笑，喜歡她！！！！ 但是三面主管面認為我的價值觀可能和公司的價值觀不太符合，比較看重個人發展，缺乏主人翁意識，在后續有通過我的內推朋友問我是否確認想去百度，確認再約hr面～ 然后就不了了之了。。。

好文推薦

我推薦的：

瀏覽器是如何工作的

瀏覽器緩存

Vue diff 也推薦看看作者其他學習vue的文章。注意框架學習自己先看源碼哦～，自己先理解，實在不明白或者想看看別人怎么理解時，再去看別人的文章。

webpack

https握手 可以先看看其它簡單的https握手流程，比如小灰的，再來看看這篇文章更加細致的了解https握手的詳細過程，會覺得很妙～

大佬推薦：

子奕的前端個人資料匯集

木易楊前端進階

總結

以上是生活随笔為你收集整理的前端填空题_一年前端面试总结｜入职字节｜2020.8的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。