螞蟻、字節(jié)、滴滴面試經(jīng)歷總結(都已過)

前言

最近兩篇面試以及離職相關的文章不容錯過哦。

• 離開蘑菇街后，我最近的一些想法

• 拼多多和酷家樂面試總結

今年面試還是比較順的，面了五家公司(酷家樂、拼多多、字節(jié)、滴滴、螞蟻)，都過了。

在文章里我不僅會列出面試題，還會給到一些答題建議，個人能力有限，也不能保證我回答都正確，如果有錯誤，希望能糾正我。

字節(jié)

一面

說一下瀏覽器緩存

瀏覽器緩存分為強緩存和協(xié)商緩存，強緩存會直接從瀏覽器里面拿數(shù)據(jù)，協(xié)商緩存會先訪問服務器看緩存是否過期，再決定是否從瀏覽器里面拿數(shù)據(jù)。

控制強緩存的字段有：Expires 和 Cache-Control，Expires 和 Cache-Control。

控制協(xié)商緩存的字段是：Last-Modified / If-Modified-Since 和 Etag / If-None-Match，其中 Etag / If-None-Match 的優(yōu)先級比 Last-Modified / If-Modified-Since 高。

cookie 與 session 的區(qū)別

Session 是在服務端保存的一個數(shù)據(jù)結構，用來跟蹤用戶的狀態(tài)，這個數(shù)據(jù)可以保存在集群、數(shù)據(jù)庫、文件中；Cookie 是客戶端保存用戶信息的一種機制，用來記錄用戶的一些信息，也是實現(xiàn) Session 的一種方式。

詳見：COOKIE 和 SESSION 有什么區(qū)別？

瀏覽器如何做到 session 的功能的。

其實就是考察 http 怎么處理無狀態(tài)是怎么處理的，具體可見 COOKIE 和 SESSION 有什么區(qū)別？里面的答案。

解釋一下：csrf 和 xss

XSS：惡意攻擊者往 Web 頁面里插入惡意 Script 代碼，當用戶瀏覽該頁之時，嵌入其中 Web 里面的 Script 代碼會被執(zhí)行，從而達到惡意攻擊用戶的目的。

CSRF：CSRF 攻擊是攻擊者借助受害者的 Cookie 騙取服務器的信任，可以在受害者毫不知情的情況下以受害者名義偽造請求發(fā)送給受攻擊服務器，從而在并未授權的情況下執(zhí)行在權限保護之下的操作。

詳見：前端安全面試題

怎么防止 csrf 和 xss

詳見：前端安全面試題

跨域的處理方案有哪些

常用的：jsonp、CORS、nginx 代理，完整的大概是九種，可見：九種跨域方式實現(xiàn)原理（完整版）

CORS 是如何做的？

服務端設置 Access-Control-Allow-Origin 就可以開啟 CORS。

對于 CORS ，Get 和 POST 有區(qū)別嗎？

其實想考察的就是什么時候會有預檢請求(option 請求)。

了解 HTTPS 的過程嗎？

推薦浪浪的 深入理解 HTTPS 工作原理

webpack 如何做性能優(yōu)化

webpack 做性能優(yōu)化主要是考慮打包體積和打包速度。

體積分析用 webpack-bundle-analyzer 插件，速度分析用：speed-measure-webpack-plugin 插件。

打包速度優(yōu)化瓶子君的：玩轉(zhuǎn) webpack，使你的打包速度提升 90%。

es module 和 commonjs 的區(qū)別

高頻題，考察 ES6 模塊和 CommonJS 模塊 的區(qū)別。關鍵點：1. 前者是值的引用，后者是值的拷貝。2.前者編譯時輸出接口，后者運行時加載。

推薦文章：前端模塊化：CommonJS,AMD,CMD,ES6

react 里如何做動態(tài)加載

React.lazy ，另外通過 webpack 的動態(tài)加載：import() 和 ensure.require

動態(tài)加載的原理是啥，就是 webpack 編譯出來的代碼

講道理 webpack 動態(tài)加載就兩種方式：import()和 require.ensure，不過他們實現(xiàn)原理是相同的。

我覺得這道題的重點在于動態(tài)的創(chuàng)建 script 標簽，以及通過 jsonp 去請求 chunk，推薦的文章是：webpack 是如何實現(xiàn)動態(tài)導入的

筆試題：頁面結構包括頁頭（永遠在頂部）、主體內(nèi)容、頁腳，頁腳永遠在頁面底部（不是窗口底部），即內(nèi)容高度不夠時，頁腳也要保證在頁面底部

常規(guī)題，考察基本的布局

筆試題：寫 new 的執(zhí)行過程

new 的執(zhí)行過程大致如下：

1. 創(chuàng)建一個對象

2. 將對象的 _ *proto_* 指向 構造函數(shù)的 prototype

3. 將這個對象作為構造函數(shù)的 this

4. 返回該對象。

function myNew(Con, ...args) {  let obj = Object.create(Con.prototype)  let result = Con.apply(obj, args)  return typeof obj === 'object' ? result : obj}

筆試題：寫一個處理加法可能產(chǎn)生精度的函數(shù)，比如 0.1 + 0.2 = 0.3

思路：對于浮點數(shù)在底層處理是有問題的，所以目的就是想辦法將所以的浮點數(shù)轉(zhuǎn)化為整數(shù)進行處理，同時乘以一個倍數(shù)(A)，然后加起來后再除以這個倍數(shù)(A)，這個倍數(shù)應該是兩個數(shù)中最小的那個數(shù)的倍數(shù)，比如 0.1 + 0.02 ,那么應該同時乘以 100，變?yōu)?10 + 2，然后再將值除以 100。

1000000000 + 1000000000 允許返回字符串 處理大數(shù)

大數(shù)問題就是通過字符串來處理，從后往前加，然后處理進位的問題。

二面

聊項目

項目基本是問：

1. 項目難點以及怎么解決的
2. 項目有哪些亮點？

寫一個 es6 的繼承過程

這個題我覺得出得很好，很考察基本功。

// 這個是要實現(xiàn)的方法createClass = fun(sons, super) {   // TODO    return fn;}
// 這是個 es6 的一個例子，要實現(xiàn) extends 的功能。class Man extends Human {    cons (args) {      super(args)      // xxxxx }
   speak() {      console.log('')    }}

寫一個大數(shù)相乘的解決方案。傳兩個字符串進來，返回一個字符串

function multi(str1, str2) {
}

這道題跟一面的時候思路差不多，只是進位的時候不一定是 1。

三面

聊項目

寫一個防抖函數(shù)

算法題:https://leetcode-cn.com/problems/bu-ke-pai-zhong-de-shun-zi-lcof/

小節(jié)

字節(jié)果然是出了名的考算法題比較多的，基本每面都會算法題和編程題，對編程能力比較看重吧。

講道理一面還是比較常規(guī)的，二三面因為都是團隊 leader 和更高級別的，問的技術細節(jié)也比較少了，重點考察一些技術方案和項目的問題。

滴滴

一面

webpack 原理

大致就是：

1. 初始化參數(shù)：從配置文件和 Shell 語句中讀取與合并參數(shù)，得出最終的參數(shù)；
2. 開始編譯：用上一步得到的參數(shù)初始化 Compiler 對象，加載所有配置的插件，執(zhí)行對象的 run 方法開始執(zhí)行編譯；
3. 確定入口：根據(jù)配置中的 entry 找出所有的入口文件；
4. 編譯模塊：從入口文件出發(fā)，調(diào)用所有配置的 Loader 對模塊進行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經(jīng)過了本步驟的處理；
5. 完成模塊編譯：在經(jīng)過第 4 步使用 Loader 翻譯完所有模塊后，得到了每個模塊被翻譯后的最終內(nèi)容以及它們之間的依賴關系；
6. 輸出資源：根據(jù)入口和模塊之間的依賴關系，組裝成一個個包含多個模塊的 Chunk，再把每個 Chunk 轉(zhuǎn)換成一個單獨的文件加入到輸出列表，這步是可以修改輸出內(nèi)容的最后機會；
7. 輸出完成：在確定好輸出內(nèi)容后，根據(jù)配置確定輸出的路徑和文件名，把文件內(nèi)容寫入到文件系統(tǒng)。

在以上過程中，Webpack 會在特定的時間點廣播出特定的事件，插件在監(jiān)聽到感興趣的事件后會執(zhí)行特定的邏輯，并且插件可以調(diào)用 Webpack 提供的 API 改變 Webpack 的運行結果。

babel 原理

babel 的轉(zhuǎn)譯過程分為三個階段：parsing、transforming、generating，以 ES6 代碼轉(zhuǎn)譯為 ES5 代碼為例，babel 轉(zhuǎn)譯的具體過程如下：

1. ES6 代碼輸入
2. babylon 進行解析得到 AST
3. plugin 用 babel-traverse 對 AST 樹進行遍歷轉(zhuǎn)譯,得到新的 AST 樹
4. 用 babel-generator 通過 AST 樹生成 ES5 代碼

虛擬 DOM 的理解

從 React 歷史的長河里聊虛擬 DOM 及其價值

項目里如何做的性能優(yōu)化

這個跟我的項目相關。

寫過 webpack loader 或者插件嗎

講講你寫的 babel 插件

二面

redux 的原理

redux 做狀態(tài)管理和發(fā)布訂閱模式有什么區(qū)別

redux 其實也是一個發(fā)布訂閱，但是 redux 可以做到數(shù)據(jù)的可預測和可回溯。

react-redux 的原理，是怎么跟 react 關聯(lián)起來的

react-redux 的核心組件只有兩個，Provider 和 connect，Provider 存放 Redux 里 store 的數(shù)據(jù)到 context 里，通過 connect 從 context 拿數(shù)據(jù)，通過 props 傳遞給 connect 所包裹的組件。

了解多端的原理嗎？

不清楚，沒了解過。

http 與 tcp 的關系

tcp 可以建立多個連接嗎？

我估計是想問 http 的管線化，當時忘了這個叫啥了

介紹一下為什么要有 三次握手，四次揮手

寫過 babel 插件嗎？用來干啥的？怎么寫的 babel 插件

寫過一些簡單的 babel 插件，說了我們公司用來通過代碼生成文檔的 babel 插件是怎么做的。

知道怎么轉(zhuǎn)化成 AST 的嗎？

我估計就是問詞法分析和語法分析相關的

研究過 React 的運行時嗎？

職業(yè)規(guī)劃。

三面

項目介紹

說一下你的項目有哪些復雜的點，以及怎么解決的

這個聊了挺久的，還聊了一些數(shù)據(jù)量比較大的怎么處理。

你們的業(yè)務組件庫有多少個，是什么樣的組件

權限組件是怎么設計的

會 node 嗎？

我說我只會增刪改查，會點 express，然后就開始一頓狂轟亂炸的知識。

介紹一下你對中間件的理解

怎么保證后端服務穩(wěn)定性，怎么做容災

感覺已經(jīng)超綱了，基本沒做過，還好之前跟后端同學聊過他們怎么做容災的，還記得兩點說了下。

1. 多個服務器部署
2. 降級處理，服務掛了，從緩存里面取。

怎么讓數(shù)據(jù)庫查詢更快

1. 索引
2. 如果數(shù)據(jù)量太多了可以拆表，分多個數(shù)據(jù)庫

數(shù)據(jù)庫是用的什么？

mysql

為什么用 mysql

希望滴滴能提供給你什么？

這個題其實還挺常考的，可以好好準備下，背一下答案。

最后面試官問我有什么想問他的么，我說沒有，因為我之前問得挺多了。不過他還是給我介紹了他們業(yè)務還是很厲害的，集團第三，還拿了 A 級績效，公司有很多技術上的沉淀，跨端呀，web IDE 呀，等等

這個時候我就感覺自己能過了，感覺是在吸引我去，偷笑。

四面

介紹一下項目的難點以及怎么解決的

一起討論那些難點

自己有什么技術上的優(yōu)勢

最近在研究什么技術？

職業(yè)規(guī)劃

移動端的業(yè)務有做過嗎？

希望滴滴能提供給你什么？

當業(yè)務重的時候怎么安排時間？

小節(jié)

滴滴我面的這個崗位是可能回去做一些多端應用，所以會涉及到很多 webpack 和 ast 相關的東西，所以這些問得比較多，感覺這個組還是很不錯的，能做到很多技術上的東西。

螞蟻

一面

講講來蘑菇街都干了哪些事情

聊聊有什么技術上的沉淀

除了 redux mbox dva 還用過其他的 狀態(tài)管理沒

hooks 原理

看過 hooks 相關的草案嗎

你對螞蟻有什么期望，或者說技術的規(guī)劃，想做的東西

vue3 的 類似 hooks 的原理是怎么樣的

二面

聊項目，項目的難點，以及自己做了哪些事情

為什么項目里會引入 TS

dva 和 redux 的區(qū)別

職業(yè)發(fā)展，今年的打算

組件升級怎么讓使用這個組件的人都知道。

如果讓你設計項目自動設計組件升級，并且安全，你會怎么去設計

三面

全程聊項目，因為他不是前端的，所以沒問前端任何知識，主要聊業(yè)務相關的，看看我對業(yè)務的理解，以及一些想法。

• 項目難點

• 怎么解決

• 項目有什么改進的地方

• 業(yè)務方怎么拿到反饋的，就是做的這個東西具體有什么用

小節(jié)

一面面試官問了很多我完全不知道的東西，我知道的東西可能答的比較隨意吧，記不起來了。反正能深深的感受到面試對知識的廣度和深度遠超我很多很多，基本不在一個 level 的。

二三面已經(jīng)是 P9 的大佬來面了，所以也沒問太多的技術細節(jié)，都是考察一些技術的解決方案和項目的東西。

螞蟻的面試其實還是比較難的，問題都不是那種有確定的答案，基本都是考察你平時的積累和經(jīng)驗。

最后

上一篇拼多多和酷家樂的面經(jīng)之后有很多人問我工作幾年，怎么學習的之類的，或者你面了這么多都過了是不是有什么技巧呀？

首先我目前工作了快兩年了，18 年 7 月份畢業(yè)的。

關于如何準備面試的問題，我的策略是把自己會的東西以及常用的東西，盡量讓面試官問不倒你，不會的東西可以跟面試官說不會，不怎么了解，那一般面試官也不會問相關的問題了，如果連自己常用的東西都了解得不深，那么就不太有可能把平時不常用的了解得很深了。

比如我可能寫 react 比較多，參與過組件庫的開發(fā)，webpack 寫得也比較多。所以我在準備的時候，就盡量準備的這些知識，了解我的人都知道，我對 react 研究得比較多，原理、性能優(yōu)化都寫過文章，所以如果考 react 的東西，我基本不擔心。對于 vue、移動端、小程序、node 啥的，我基本沒準備，問倒的時候我就說僅僅了解，沒有什么實戰(zhàn)經(jīng)驗。

最后我是桃翁，一個愛思考的前端 er，期待你的關注。

推薦閱讀

我的公眾號能帶來什么價值？(文末有送書規(guī)則，一定要看)

每個前端工程師都應該了解的圖片知識(長文建議收藏)

為什么現(xiàn)在面試總是面試造火箭？