螞蟻、位元組、滴滴面試經歷總結

leexiaoran發表於2020-05-21
面試

前言

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

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

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

位元組

一面

說一下瀏覽器快取

瀏覽器快取分為強快取和協商快取，強快取會直接從瀏覽器裡面拿資料，協商快取會先訪問伺服器看快取是否過期，再決定是否從瀏覽器裡面拿資料。

控制強快取的欄位有：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，期待你的關注。

如果你最近也在找工作，歡迎找我交流，下面是我公眾號。

相關文章