前言

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

你在面試的時(shí)候，是否遇到過(guò)以下問(wèn)題：

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

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

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

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

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

百度

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

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

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

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

3、請(qǐng)寫出 inner 的實(shí)際高度。

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

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

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

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

7、手寫一個(gè)多表查詢的 sql 語(yǔ)句。

當(dāng)時(shí)用的是 left join 實(shí)現(xiàn)。

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

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

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

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

不會(huì)。

10、mongoDB 中的 BSON 是什么？

B 代表二進(jìn)制。

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

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

12、使用 node app.js 開啟服務(wù)，如何讓它在后臺(tái)運(yùn)行。

開啟守護(hù)進(jìn)程，在命令后加上 & 符號(hào)，表示開啟守護(hù)進(jìn)程來(lái)執(zhí)行。

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

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

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

百度三面：

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

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

阿里

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

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

2、react hooks 原理是什么？

hooks 是用閉包實(shí)現(xiàn)的，因?yàn)榧兒瘮?shù)不能記住狀態(tài)，只能通過(guò)閉包來(lái)實(shí)現(xiàn)。

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

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

React Hooks 原理

快手

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

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

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

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

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

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

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

第二個(gè)參數(shù)表示將字符串當(dāng)做幾進(jìn)制進(jìn)行解析。

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

• 使用 padding 和負(fù) margin
• 使用 flex
• 使用 table-cell
• 使用 grid 布局

7、函數(shù)提升，如果加了一個(gè)括號(hào)，還會(huì)提升嗎？

不提升。

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

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

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

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

11、react 源碼看過(guò)嗎，<Component1 /> 最后編譯出來(lái)是個(gè)什么東西，是個(gè)什么類型？

ReactElement 類型。

愛(ài)奇藝

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

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

首先比較同層級(jí)元素，從左到右。

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

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

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

是。

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

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

6、options 頭是在什么時(shí)候會(huì)進(jìn)行發(fā)送。

• 檢測(cè)服務(wù)器所支持的請(qǐng)求方法
• CORS 中的預(yù)檢請(qǐng)求

7、sessionStorage 在兩個(gè) tab 窗口能共享嗎？

不能，和后端的 session 類似，每一個(gè)窗口對(duì)應(yīng)一個(gè)會(huì)話層。

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

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

9、寫一個(gè) 0-100 的正則表達(dá)式。

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

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

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

11、meta 標(biāo)簽用過(guò)嗎，都用來(lái)做些什么？

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

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

滴滴

1、快速排序和二分排序選一個(gè)手寫。

手寫了一個(gè)快排。

2、手寫一個(gè) eventEmitter。

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

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

4、webpack 運(yùn)行流程，seal 方法之后都有什么？什么時(shí)候生成 chunk ？

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

ThisTypeT

6、手寫一個(gè) es5 繼承。

寄生組合繼承

7、react hooks 主要用來(lái)做什么？

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

hooks 介紹

8、https 有什么缺點(diǎn)？

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

三面問(wèn)題：

1、你工作中做過(guò)的最牛的項(xiàng)目是什么？

按實(shí)際項(xiàng)目實(shí)話實(shí)說(shuō)，可按原因，過(guò)程，結(jié)果三個(gè)維度進(jìn)行介紹。

2、深挖項(xiàng)目中的技術(shù)棧，追問(wèn)項(xiàng)目中的難點(diǎn)，需要給出具體的解決方案。

根據(jù)實(shí)際情況說(shuō)明即可，盡量多表達(dá)你自己對(duì)該項(xiàng)目的思考。

3、針對(duì)項(xiàng)目中的優(yōu)缺點(diǎn)進(jìn)行分析，并讓你給出相應(yīng)的優(yōu)化方案。

主要考察對(duì)項(xiàng)目的思考。

4、還有其他最牛的項(xiàng)目嗎？

一般一個(gè)項(xiàng)目不夠，盡量多準(zhǔn)備幾個(gè)。

字節(jié)跳動(dòng)

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

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

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

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

3、什么是裝箱和拆箱

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

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

4、什么是委托

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

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

5、手寫一個(gè) reduce 方法。

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

6、手寫一個(gè)模板字符串替換方法

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

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

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

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

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

好未來(lái)

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

以燒水的案例來(lái)理解。

• 同步：使用普通水壺?zé)?/li>
• 異步：使用響水壺?zé)?/li>
• 阻塞：在燒水時(shí)不能做別的。
• 非阻塞：在燒水時(shí)可以去做別的事，通過(guò)輪詢(epoll)查看水是否燒開。

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

通過(guò)動(dòng)態(tài) dns 解析。

3、promise 實(shí)現(xiàn)一個(gè) sleep。

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

貝殼

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

案例：第一行 4 個(gè)元素，第二列 2 個(gè)元素。

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

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

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

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

總結(jié)

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

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

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

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

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

前端程序員的福利

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

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

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

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

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