前言

“金九銀十“跳槽季，又到了面試求職的高峰期。好多小伙伴都會跳槽去找工作。如果你不跳槽，也建議把這篇文章看完，畢竟金九銀十之后，就是金三銀四了，總是逃不掉的

你在面試的時候，是否遇到過以下問題：

• 各大招聘網(wǎng)站海投簡歷，給回應的寥寥無幾
• 永遠想不明白到底該不該去外包公司
• 面試前不知道該做哪些準備，常被面試官問到發(fā)懵
• 不知道怎么談薪資，可以讓自己利益最大化

如果你中了其中2條以上，那本文一定要認真讀完。

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

從9月開始，我分別面試了百度、快手、愛奇藝、阿里、滴滴、字節(jié)跳動、好未來、貝殼等8家互聯(lián)網(wǎng)大廠，順利拿到4家offer，并最終入職愛奇藝，年薪48萬。

本文記錄了以上8個互聯(lián)網(wǎng)大廠的面試題目，帶你全面了解——【最近，前端面試都問些什么】

百度

1、請分析以下代碼執(zhí)行結(jié)果

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

2、請分析以下代碼執(zhí)行結(jié)果

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

3、請寫出 inner 的實際高度。

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

4、手寫一個深拷貝函數(shù)。

5、HTTP 狀態(tài)碼 301 302 304 403。

6、手寫發(fā)布訂閱模式 EventEmitter。

7、手寫一個多表查詢的 sql 語句。

當時用的是 left join 實現(xiàn)。

8、react 高階函數(shù)的寫法，通常有哪幾種。

第一種是通過工廠模式直接 wrapper，第二種是通過組件反向繼承的方式。

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

9、delete 數(shù)組的 item，數(shù)組的 length 是否會 -1。

不會。

10、mongoDB 中的 BSON 是什么？

B 代表二進制。

11、關(guān)系型數(shù)據(jù)庫和 nosql 查詢效率誰高？

關(guān)系型是 B+ tree 查詢效率相對較高。

12、使用 node app.js 開啟服務，如何讓它在后臺運行。

開啟守護進程，在命令后加上 & 符號，表示開啟守護進程來執(zhí)行。

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

13、盡可能寫出更多的數(shù)組副作用方法。

• splice、push、pop、shift、unshift。
• sort、fill、reverse。

百度三面：

1、實現(xiàn)一個周歲函數(shù)，例如 fn('2018-8-8') 輸出 1，只要是過了生日就 +1。

2、不斷優(yōu)化剛才實現(xiàn)的函數(shù)，用盡一切辦法，多問一問還有嗎？跳出自己的固定思維圈。

阿里

1、vue 雙向數(shù)據(jù)綁定原理，依賴收集是在什么時候收集的？

是在 created 生命周期之前，render 生成虛擬 dom 的時候。

2、react hooks 原理是什么？

hooks 是用閉包實現(xiàn)的，因為純函數(shù)不能記住狀態(tài)，只能通過閉包來實現(xiàn)。

3、useState 中的狀態(tài)是怎么存儲的？

通過單向鏈表，fiber tree 就是一個單向鏈表的樹形結(jié)構(gòu)。

React Hooks 原理

快手

1、請寫出以下代碼執(zhí)行結(jié)果。

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

2、請寫出以下代碼執(zhí)行結(jié)果。

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

3、ts 如何獲取一個函數(shù)的類型，以及獲取一個函數(shù)參數(shù)的類型。

4、ts 泛型約束的多種方法。

5、parseInt 的第二個參數(shù)是什么？

第二個參數(shù)表示將字符串當做幾進制進行解析。

6、實現(xiàn)一個多列等高布局，多種方式。

• 使用 padding 和負 margin
• 使用 flex
• 使用 table-cell
• 使用 grid 布局

7、函數(shù)提升，如果加了一個括號，還會提升嗎？

不提升。

8、setTimeout 的第三個參數(shù)，可以傳遞函數(shù)的初始參數(shù)。

9、bind 函數(shù)的第二個參數(shù)，可以傳遞函數(shù)的初始參數(shù)。

10、使用 ts 時，如果不在 a 后面加類型，怎么創(chuàng)建一個 number[] 的數(shù)組？

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

11、react 源碼看過嗎，<Component1 /> 最后編譯出來是個什么東西，是個什么類型？

ReactElement 類型。

愛奇藝

1、瀏覽器渲染 js，html，css 的順序。

2、react dom diff 算法，list 比較首先比較的是什么？

首先比較同層級元素，從左到右。

3、為什么 react 要做成異步的呢？

• 因為 state 更新會導致組件重新渲染，在渲染后，才能把新的 props 傳遞到子組件上，所以即使 state 做成同步，props 也做不成，為了保證 state 和 props 的一致性。
• 為了性能優(yōu)化，state 會根據(jù)不同的優(yōu)先級進行更新。
• 為了讓 react 更加靈活，如實現(xiàn)異步過渡，例如頁面在切換的時候，如果延時很小，就在后臺自動渲染了，渲染好之后再進行跳轉(zhuǎn)；如果延時相對較長，可以加一個 loading。

4、對象的 {…} 解構(gòu)，是 rest 嗎？

是。

5、自己實現(xiàn)一個 Symbol Interator 。

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

6、options 頭是在什么時候會進行發(fā)送。

• 檢測服務器所支持的請求方法
• CORS 中的預檢請求

7、sessionStorage 在兩個 tab 窗口能共享嗎？

不能，和后端的 session 類似，每一個窗口對應一個會話層。

8、localStorage 存放的只能是 string 類型。

插入時需要將對象轉(zhuǎn)換為字符串，讀取時需要做 JSON.parse 轉(zhuǎn)換。

9、寫一個 0-100 的正則表達式。

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

10、linux 中怎么查看內(nèi)存和磁盤。

• top 命令，查看內(nèi)存。
• free 命令，查看內(nèi)存。
• ps aux 列出當前內(nèi)存中正在運行的程序。
• df 命令，查看磁盤。

11、meta 標簽用過嗎，都用來做些什么？

• seo 優(yōu)化
• viewreport 設(shè)置手機端適配
• 設(shè)置 charset 字符編碼
• 模擬 http 標頭字段

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

滴滴

1、快速排序和二分排序選一個手寫。

手寫了一個快排。

2、手寫一個 eventEmitter。

3、手寫兩個數(shù)組的交集。

• 兩層 for 循環(huán)。
• 將兩數(shù)組排序后，使用雙指針去判斷。

4、webpack 運行流程，seal 方法之后都有什么？什么時候生成 chunk ？

5、ts 中 ThisType <T> 是什么？

ThisTypeT

6、手寫一個 es5 繼承。

寄生組合繼承

7、react hooks 主要用來做什么？

• 在組件之間復用狀態(tài)邏輯很難
• 你可以使用 Hook 從組件中提取狀態(tài)邏輯，使得這些邏輯可以單獨測試并復用。Hook 使你在無需修改組件結(jié)構(gòu)的情況下復用狀態(tài)邏輯。這使得在組件間或社區(qū)內(nèi)共享 Hook 變得更便捷。
• 復雜組件變得難以理解
• 組件中的每個生命周期常常包含一些不相關(guān)的邏輯。Hook 將組件中相互關(guān)聯(lián)的部分拆分成更小的函數(shù)（比如設(shè)置訂閱或請求數(shù)據(jù)）。
• 難以理解的 class
• class 組件學習成本相對較高，需要理解 this 在 js 中的工作方式，在綁定事件時需要注意。

hooks 介紹

8、https 有什么缺點？

• https 協(xié)議會使頁面的加載時間延長近 50%。增加 10% ~ 20% 的耗電。
• https 協(xié)議的安全是有范圍的，在黑客攻擊、拒絕服務攻擊、服務器劫持等方面幾乎起不到什么作用。
• ssl 證書的信用鏈體系并不安全。特別是在某些國家可以控制 ca 根證書的情況下，中間人攻擊一樣可行。
• 需要購買費用。
• https 連接服務器端資源占用高較高多，相同負載下會增加帶寬和服務器投入成本。

三面問題：

1、你工作中做過的最牛的項目是什么？

按實際項目實話實說，可按原因，過程，結(jié)果三個維度進行介紹。

2、深挖項目中的技術(shù)棧，追問項目中的難點，需要給出具體的解決方案。

根據(jù)實際情況說明即可，盡量多表達你自己對該項目的思考。

3、針對項目中的優(yōu)缺點進行分析，并讓你給出相應的優(yōu)化方案。

主要考察對項目的思考。

4、還有其他最牛的項目嗎？

一般一個項目不夠，盡量多準備幾個。

字節(jié)跳動

1、請分析以下代碼執(zhí)行結(jié)果

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

2、手寫一個節(jié)流函數(shù)

手寫節(jié)流函數(shù)

3、什么是裝箱和拆箱

裝箱和拆箱操作，能夠在值類型和引用類型中架起一做橋梁。換言之,可以輕松的實現(xiàn)值類型與引用類型的互相轉(zhuǎn)換。

裝箱是將值類型轉(zhuǎn)換為引用類型，拆箱是將引用類型轉(zhuǎn)換為值類型。

4、什么是委托

粗略來說，一個類想執(zhí)行一個方法，但它本身沒有這個方法，這個方法在另一個類中，于是它“委托”那個類來幫它執(zhí)行。

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

5、手寫一個 reduce 方法。

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

6、手寫一個模板字符串替換方法

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

7、看過 antd 源碼嗎，如何實現(xiàn)一個 Model，Message 組件？

只能猜想到 React Portals，未層看過源碼，有待提升。

8、如果要設(shè)計一套微前端架構(gòu)，說說你的具體思路？如何實現(xiàn)主頁面事件注冊機制？如何解決多個 iframe 同時通信？

需要有落地實戰(zhàn)項目，不然很難答好，消息加鎖等。

好未來

1、同步，異步，阻塞，非阻塞，分別解釋一下。

以燒水的案例來理解。

• 同步：使用普通水壺燒水。
• 異步：使用響水壺燒水。
• 阻塞：在燒水時不能做別的。
• 非阻塞：在燒水時可以去做別的事，通過輪詢(epoll)查看水是否燒開。

2、cdn 是如何匹配最近的節(jié)點的？

通過動態(tài) dns 解析。

3、promise 實現(xiàn)一個 sleep。

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

貝殼

1、實現(xiàn)一個 css 布局，每一列的第一個和最后一個元素，在最左最右側(cè)，其他的元素均勻分布。

案例：第一行 4 個元素，第二列 2 個元素。

2、請分析以下代碼執(zhí)行結(jié)果

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

3、請分析以下代碼執(zhí)行結(jié)果

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

總結(jié)

技術(shù)面試一般分為三面。

一面：考察基礎(chǔ)，必須過硬，如：js、css、html、tcp/ip 協(xié)議棧、瀏覽器渲染等。

二面：結(jié)合實際項目考察技術(shù)深度，如：react、vue、koa、ts、webpack 等。

三面：結(jié)合實際項目考察項目思考，如：react 的優(yōu)缺點、前端方向的思考、以及解決問題的思考方式等。

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

前端程序員的福利

巴菲特有句名言：“人生就像滾雪球，最重要的是發(fā)現(xiàn)濕的雪和長長的山坡。”職業(yè)發(fā)展亦是如此，前端人除了埋頭踏實苦干，更要懂得抬頭思考遠望，在行業(yè)變化中找到正確的方向。如果你想：

• 深入了解高級前端工程師的知識體系
• 突破技術(shù)成長瓶頸，避免中年危機
• 通關(guān) BAT 大廠技術(shù)面試，實現(xiàn)大廠夢
• 拿高薪offer，提高自己和家人的生活品質(zhì)

大廠前端面試都問些什么問題？入職愛奇藝年薪48萬，面試經(jīng)驗總結(jié)

歡迎關(guān)注公眾號：【fkdcxy，瘋狂的程序員丶】 免費獲取【大廠前端面試經(jīng)驗】

想了解更多前端開發(fā)者面試相關(guān)歡迎評論區(qū)留言或私信我！