前言
“金九銀十“跳槽季，又到了面試求職的高峯期。好多小夥伴都會跳槽去找工作。如果你不跳槽，也建議把這篇文章看完，畢竟金九銀十之後，就是金三銀四了，總是逃不掉的
你在面試的時候，是否遇到過以下問題：
- 各大招聘網站海投簡歷，給迴應的寥寥無幾
- 永遠想不明白到底該不該去外包公司
- 面試前不知道該做哪些準備，常被面試官問到發懵
- 不知道怎麼談薪資，可以讓自己利益最大化
如果你中了其中2條以上，那本文一定要認真讀完。
從9月開始，我分別面試了百度、快手、愛奇藝、阿里、滴滴、字節跳動、好未來、貝殼等8家互聯網大廠，順利拿到4家offer，並最終入職愛奇藝，年薪48萬。
本文記錄了以上8個互聯網大廠的面試題目，帶你全面瞭解——【最近，前端面試都問些什麼】
百度
1、請分析以下代碼執行結果
2、請分析以下代碼執行結果
3、請寫出 inner 的實際高度。
4、手寫一個深拷貝函數。
5、HTTP 狀態碼 301 302 304 403。
6、手寫發佈訂閱模式 EventEmitter。
7、手寫一個多表查詢的 sql 語句。
當時用的是 left join 實現。
8、react 高階函數的寫法，通常有哪幾種。
第一種是通過工廠模式直接 wrapper，第二種是通過組件反向繼承的方式。
9、delete 數組的 item，數組的 length 是否會 -1。
不會。
10、mongoDB 中的 BSON 是什麼？
B 代表二進制。
11、關係型數據庫和 nosql 查詢效率誰高？
關係型是 B+ tree 查詢效率相對較高。
12、使用 node app.js 開啓服務，如何讓它在後臺運行。
開啓守護進程，在命令後加上 & 符號，表示開啓守護進程來執行。
13、儘可能寫出更多的數組副作用方法。
- splice、push、pop、shift、unshift。
- sort、fill、reverse。
百度三面：
1、實現一個週歲函數，例如 fn('2018-8-8') 輸出 1，只要是過了生日就 +1。
2、不斷優化剛纔實現的函數，用盡一切辦法，多問一問還有嗎？跳出自己的固定思維圈。
阿里
1、vue 雙向數據綁定原理，依賴收集是在什麼時候收集的？
是在 created 生命週期之前，render 生成虛擬 dom 的時候。
2、react hooks 原理是什麼？
hooks 是用閉包實現的，因爲純函數不能記住狀態，只能通過閉包來實現。
3、useState 中的狀態是怎麼存儲的？
通過單向鏈表，fiber tree 就是一個單向鏈表的樹形結構。
React Hooks 原理
快手
1、請寫出以下代碼執行結果。
2、請寫出以下代碼執行結果。
3、ts 如何獲取一個函數的類型，以及獲取一個函數參數的類型。
4、ts 泛型約束的多種方法。
5、parseInt 的第二個參數是什麼？
第二個參數表示將字符串當做幾進制進行解析。
6、實現一個多列等高佈局，多種方式。
- 使用 padding 和負 margin
- 使用 flex
- 使用 table-cell
- 使用 grid 佈局
7、函數提升，如果加了一個括號，還會提升嗎？
不提升。
8、setTimeout 的第三個參數，可以傳遞函數的初始參數。
9、bind 函數的第二個參數，可以傳遞函數的初始參數。
10、使用 ts 時，如果不在 a 後面加類型，怎麼創建一個 number[] 的數組？
11、react 源碼看過嗎，<Component1 /> 最後編譯出來是個什麼東西，是個什麼類型？
ReactElement 類型。
愛奇藝
1、瀏覽器渲染 js，html，css 的順序。
2、react dom diff 算法，list 比較首先比較的是什麼？
首先比較同層級元素，從左到右。
3、爲什麼 react 要做成異步的呢？
- 因爲 state 更新會導致組件重新渲染，在渲染後，才能把新的 props 傳遞到子組件上，所以即使 state 做成同步，props 也做不成，爲了保證 state 和 props 的一致性。
- 爲了性能優化，state 會根據不同的優先級進行更新。
- 爲了讓 react 更加靈活，如實現異步過渡，例如頁面在切換的時候，如果延時很小，就在後臺自動渲染了，渲染好之後再進行跳轉；如果延時相對較長，可以加一個 loading。
4、對象的 {…} 解構，是 rest 嗎？
是。
5、自己實現一個 Symbol Interator 。
6、options 頭是在什麼時候會進行發送。
- 檢測服務器所支持的請求方法
- CORS 中的預檢請求
7、sessionStorage 在兩個 tab 窗口能共享嗎？
不能，和後端的 session 類似，每一個窗口對應一個會話層。
8、localStorage 存放的只能是 string 類型。
插入時需要將對象轉換爲字符串，讀取時需要做 JSON.parse 轉換。
9、寫一個 0-100 的正則表達式。
10、linux 中怎麼查看內存和磁盤。
- top 命令，查看內存。
- free 命令，查看內存。
- ps aux 列出當前內存中正在運行的程序。
- df 命令，查看磁盤。
11、meta 標籤用過嗎，都用來做些什麼？
- seo 優化
- viewreport 設置手機端適配
- 設置 charset 字符編碼
- 模擬 http 標頭字段
滴滴
1、快速排序和二分排序選一個手寫。
手寫了一個快排。
2、手寫一個 eventEmitter。
3、手寫兩個數組的交集。
- 兩層 for 循環。
- 將兩數組排序後，使用雙指針去判斷。
4、webpack 運行流程，seal 方法之後都有什麼？什麼時候生成 chunk ？
5、ts 中 ThisType <T> 是什麼？
ThisTypeT
6、手寫一個 es5 繼承。
寄生組合繼承
7、react hooks 主要用來做什麼？
- 在組件之間複用狀態邏輯很難
- 你可以使用 Hook 從組件中提取狀態邏輯，使得這些邏輯可以單獨測試並複用。Hook 使你在無需修改組件結構的情況下複用狀態邏輯。這使得在組件間或社區內共享 Hook 變得更便捷。
- 複雜組件變得難以理解
- 組件中的每個生命週期常常包含一些不相關的邏輯。Hook 將組件中相互關聯的部分拆分成更小的函數（比如設置訂閱或請求數據）。
- 難以理解的 class
- class 組件學習成本相對較高，需要理解 this 在 js 中的工作方式，在綁定事件時需要注意。
hooks 介紹
8、https 有什麼缺點？
- https 協議會使頁面的加載時間延長近 50%。增加 10% ~ 20% 的耗電。
- https 協議的安全是有範圍的，在黑客攻擊、拒絕服務攻擊、服務器劫持等方面幾乎起不到什麼作用。
- ssl 證書的信用鏈體系並不安全。特別是在某些國家可以控制 ca 根證書的情況下，中間人攻擊一樣可行。
- 需要購買費用。
- https 連接服務器端資源佔用高較高多，相同負載下會增加帶寬和服務器投入成本。
三面問題：
1、你工作中做過的最牛的項目是什麼？
按實際項目實話實說，可按原因，過程，結果三個維度進行介紹。
2、深挖項目中的技術棧，追問項目中的難點，需要給出具體的解決方案。
根據實際情況說明即可，儘量多表達你自己對該項目的思考。
3、針對項目中的優缺點進行分析，並讓你給出相應的優化方案。
主要考察對項目的思考。
4、還有其他最牛的項目嗎？
一般一個項目不夠，儘量多準備幾個。
字節跳動
1、請分析以下代碼執行結果
2、手寫一個節流函數
手寫節流函數
3、什麼是裝箱和拆箱
裝箱和拆箱操作，能夠在值類型和引用類型中架起一做橋樑。換言之,可以輕鬆的實現值類型與引用類型的互相轉換。
裝箱是將值類型轉換爲引用類型，拆箱是將引用類型轉換爲值類型。
4、什麼是委託
粗略來說，一個類想執行一個方法，但它本身沒有這個方法，這個方法在另一個類中，於是它“委託”那個類來幫它執行。
5、手寫一個 reduce 方法。
6、手寫一個模板字符串替換方法
7、看過 antd 源碼嗎，如何實現一個 Model，Message 組件？
只能猜想到 React Portals，未層看過源碼，有待提升。
8、如果要設計一套微前端架構，說說你的具體思路？如何實現主頁面事件註冊機制？如何解決多個 iframe 同時通信？
需要有落地實戰項目，不然很難答好，消息加鎖等。
好未來
1、同步，異步，阻塞，非阻塞，分別解釋一下。
以燒水的案例來理解。
- 同步：使用普通水壺燒水。
- 異步：使用響水壺燒水。
- 阻塞：在燒水時不能做別的。
- 非阻塞：在燒水時可以去做別的事，通過輪詢(epoll)查看水是否燒開。
2、cdn 是如何匹配最近的節點的？
通過動態 dns 解析。
3、promise 實現一個 sleep。
貝殼
1、實現一個 css 佈局，每一列的第一個和最後一個元素，在最左最右側，其他的元素均勻分佈。
案例：第一行 4 個元素，第二列 2 個元素。
2、請分析以下代碼執行結果
3、請分析以下代碼執行結果
總結
技術面試一般分爲三面。
一面：考察基礎，必須過硬，如：js、css、html、tcp/ip 協議棧、瀏覽器渲染等。
二面：結合實際項目考察技術深度，如：react、vue、koa、ts、webpack 等。
三面：結合實際項目考察項目思考，如：react 的優缺點、前端方向的思考、以及解決問題的思考方式等。
前端程序員的福利
巴菲特有句名言：“人生就像滾雪球，最重要的是發現溼的雪和長長的山坡。”職業發展亦是如此，前端人除了埋頭踏實苦幹，更要懂得擡頭思考遠望，在行業變化中找到正確的方向。如果你想：
- 深入瞭解高級前端工程師的知識體系
- 突破技術成長瓶頸，避免中年危機
- 通關 BAT 大廠技術面試，實現大廠夢
- 拿高薪offer，提高自己和家人的生活品質
![大廠前端面試都問些什麼問題？入職愛奇藝年薪48萬，面試經驗總結]( "大廠前端面試都問些什麼問題？入職愛奇藝年薪48萬，面試經驗總結")
歡迎關注公衆號：【fkdcxy，瘋狂的程序員丶】 免費獲取【大廠前端面試經驗】
想了解更多前端開發者面試相關歡迎評論區留言或私信我！