螞蟻、字節、滴滴面試經歷總結

前言

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

• 離開蘑菇街後，我最近的一些想法
• 拼多多和酷家樂面試總結

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

在文章裏我不只會列出面試題，還會給到一些答題建議，我的能力有限，也不能保證我回答都正確，若是有錯誤，但願能糾正我。

字節

一面

說一下瀏覽器緩存

瀏覽器緩存分爲強緩存和協商緩存，強緩存會直接從瀏覽器裏面拿數據，協商緩存會先訪問服務器看緩存是否過時，再決定是否從瀏覽器裏面拿數據。

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

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

cookie 與 session 的區別

Session 是在服務端保存的一個數據結構，用來跟蹤用戶的狀態，這個數據能夠保存在集羣、數據庫、文件中；
Cookie 是客戶端保存用戶信息的一種機制，用來記錄用戶的一些信息，也是實現 Session 的一種方式。

詳見：COOKIE和SESSION有什麼區別？

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

其實就是考察 http 怎麼處理無狀態是怎麼處理的，具體可見 COOKIE和SESSION有什麼區別？裏面的答案。

解釋一下：csrf 和 xss

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

CSRF：CSRF 攻擊是攻擊者藉助受害者的 Cookie 騙取服務器的信任，能夠在受害者絕不知情的狀況下以受害者名義僞造請求發送給受攻擊服務器，從而在並未受權的狀況下執行在權限保護之下的操做。

詳見：前端安全面試題

怎麼防止 csrf 和 xss

詳見：前端安全面試題

跨域的處理方案有哪些

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

CORS 是如何作的？

服務端設置 Access-Control-Allow-Origin 就能夠開啓 CORS。

對於 CORS ，Get 和 POST 有區別嗎？

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

瞭解 HTTPS 的過程嗎？

推薦浪浪的 深刻理解HTTPS工做原理

webpack 如何作性能優化

webpack 作性能優化主要是考慮打包體積和打包速度。

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

打包速度優化瓶子君的：玩轉 webpack，使你的打包速度提高 90%。

es module 和 commonjs 的區別

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

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

react 裏如何作動態加載

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

動態加載的原理是啥，就是 webpack 編譯出來的代碼

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

我以爲這道題的重點在於動態的建立 script 標籤，以及經過 jsonp 去請求 chunk，推薦的文章是：webpack是如何實現動態導入的

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

常規題，考察基本的佈局

筆試題：寫 new 的執行過程

new 的執行過程大體以下：

1. 建立一個對象
2. 將對象的 _ proto_ 指向 構造函數的 prototype
3. 將這個對象做爲構造函數的 this
4. 返回該對象。

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

筆試題：寫一個處理加法可能產生精度的函數，好比 0.1 + 0.2 = 0.3

思路：對於浮點數在底層處理是有問題的，因此目的就是想辦法將因此的浮點數轉化爲整數進行處理，同時乘以一個倍數(A)，而後加起來後再除以這個倍數(A)，這個倍數應該是兩個數中最小的那個數的倍數，好比 0.1 + 0.02 ,那麼應該同時乘以 100，變爲 10 + 2，而後再將值除以 100。

1000000000 + 1000000000 容許返回字符串 處理大數

大數問題就是經過字符串來處理，從後往前加，而後處理進位的問題。

二面

聊項目

項目基本是問：

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

寫一個 es6 的繼承過程

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

// 這個是要實現的方法
createClass = fun(sons, super) {
    // TODO
    return fn;
}

// 這是個 es6 的一個例子，要實現 extends 的功能。
class Man extends Human {
    cons (args) {
        super(args)
      // xxxxx
    }

    speak() {
        console.log('')
    }
}

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

function multi(str1, str2) {

}

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

三面

聊項目

寫一個防抖函數

算法題:https://leetcode-cn.com/probl...

小節

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

講道理一面仍是比較常規的，二三面由於都是團隊 leader 和更高級別的，問的技術細節也比較少了，重點考察一些技術方案和項目的問題。

滴滴

一面

webpack 原理

大體就是：

1. 初始化參數：從配置文件和 Shell 語句中讀取與合併參數，得出最終的參數；
2. 開始編譯：用上一步獲得的參數初始化 Compiler 對象，加載全部配置的插件，執行對象的 run 方法開始執行編譯；
3. 肯定入口：根據配置中的 entry 找出全部的入口文件；
4. 編譯模塊：從入口文件出發，調用全部配置的 Loader 對模塊進行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到全部入口依賴的文件都通過了本步驟的處理；
5. 完成模塊編譯：在通過第4步使用 Loader 翻譯完全部模塊後，獲得了每一個模塊被翻譯後的最終內容以及它們之間的依賴關係；
6. 輸出資源：根據入口和模塊之間的依賴關係，組裝成一個個包含多個模塊的 Chunk，再把每一個 Chunk 轉換成一個單獨的文件加入到輸出列表，這步是能夠修改輸出內容的最後機會；
7. 輸出完成：在肯定好輸出內容後，根據配置肯定輸出的路徑和文件名，把文件內容寫入到文件系統。

在以上過程當中，Webpack 會在特定的時間點廣播出特定的事件，插件在監聽到感興趣的事件後會執行特定的邏輯，而且插件能夠調用 Webpack 提供的 API 改變 Webpack 的運行結果。

babel 原理

babel的轉譯過程分爲三個階段：parsing、transforming、generating，以ES6代碼轉譯爲ES5代碼爲例，babel轉譯的具體過程以下：

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

虛擬 DOM 的理解

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

項目裏如何作的性能優化

這個跟個人項目相關。

寫過webpack loader 或者插件嗎

講講你寫的 babel 插件

二面

redux 的原理

redux 作狀態管理和發佈訂閱模式有什麼區別

redux 其實也是一個發佈訂閱，可是 redux 能夠作到數據的可預測和可回溯。

react-redux 的原理，是怎麼跟 react 關聯起來的

react-redux 的核心組件只有兩個，Provider 和 connect，Provider 存放 Redux 裏 store 的數據到 context 裏，經過 connect 從 context 拿數據，經過 props 傳遞給 connect 所包裹的組件。

瞭解多端的原理嗎？

不清楚，沒了解過。

http 與 tcp 的關係

tcp 能夠創建多個鏈接嗎？

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

介紹一下爲何要有 三次握手，四次揮手

寫過 babel 插件嗎？用來幹啥的？怎麼寫的 babel 插件

寫過一些簡單的 babel 插件，說了咱們公司用來經過代碼生成文檔的 babel 插件是怎麼作的。

知道怎麼轉化成 AST 的嗎？

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

研究過 React 的運行時嗎？

職業規劃。

三面

項目介紹

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

這個聊了挺久的，還聊了一些數據量比較大的怎麼處理。

大家的業務組件庫有多少個，是什麼樣的組件

權限組件是怎麼設計的

會node 嗎？

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

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

怎麼保證後端服務穩定性，怎麼作容災

感受已經超綱了，基本沒作過，還好以前跟後端同窗聊過他們怎麼作容災的，還記得兩點說了下。

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

怎麼讓數據庫查詢更快

1. 索引
2. 若是數據量太多了能夠拆表，分多個數據庫

數據庫是用的什麼？

mysql

爲何用 mysql

但願滴滴能提供給你什麼？

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

最後面試官問我有什麼想問他的麼，我說沒有，由於我以前問得挺多了。不過他仍是給我介紹了他們業務仍是很厲害的，集團第三，還拿了 A 級績效，公司有不少技術上的沉澱，跨端呀，web IDE 呀，等等

這個時候我就感受本身能過了，感受是在吸引我去，偷笑。

四面

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

一塊兒討論那些難點

本身有什麼技術上的優點

最近在研究什麼技術？

職業規劃

移動端的業務有作過嗎？

但願滴滴能提供給你什麼？

當業務重的時候怎麼安排時間？

小節

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

螞蟻

一面

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

聊聊有什麼技術上的沉澱

除了 redux mbox dva 還用過其餘的 狀態管理沒

hooks 原理

看過 hooks 相關的草案嗎

你對螞蟻有什麼指望，或者說技術的規劃，想作的東西

vue3 的 相似 hooks 的原理是怎麼樣的

二面

聊項目，項目的難點，以及本身作了哪些事情

爲何項目裏會引入 TS

dva 和 redux 的區別

職業發展，今年的打算

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

若是讓你設計項目自動設計組件升級，而且安全，你會怎麼去設計

三面

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

• 項目難點
• 怎麼解決
• 項目有什麼改進的地方
• 業務方怎麼拿到反饋的，就是作的這個東西具體有什麼用

小節

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

二三面已是 P9 的大佬來面了，因此也沒問太多的技術細節，都是考察一些技術的解決方案和項目的東西。

螞蟻的面試其實仍是比較難的，問題都不是那種有肯定的答案，基本都是考察你平時的積累和經驗。

最後

上一篇拼多多和酷家樂的面經以後有不少人問我工做幾年，怎麼學習的之類的，或者你面了這麼多都過了是否是有什麼技巧呀？

首先我目前工做了快兩年了，18 年 7 月份畢業的。

關於如何準備面試的問題，個人策略是把本身會的東西以及經常使用的東西，儘可能讓面試官問不倒你，不會的東西能夠跟面試官說不會，不怎麼了解，那通常面試官也不會問相關的問題了，若是連本身經常使用的東西都瞭解得不深，那麼就不太有可能把平時不經常使用的瞭解得很深了。

好比我可能寫 react 比較多，參與過組件庫的開發，webpack 寫得也比較多。因此我在準備的時候，就儘可能準備的這些知識，瞭解個人人都知道，我對 react 研究得比較多，原理、性能優化都寫過文章，因此若是考 react 的東西，我基本不擔憂。 對於 vue、移動端、小程序、node 啥的，我基本沒準備，問倒的時候我就說僅僅瞭解，沒有什麼實戰經驗。

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

若是你最近也在找工做，歡迎找我交流，下面是我公衆號。