螞蟻、字節(jié)、滴滴面試經(jīng)歷總結(jié)(都已過)
前言
最近兩篇面試以及離職相關(guān)的文章不容錯(cuò)過哦。
今年面試還是比較順的，面了五家公司(酷家樂、拼多多、字節(jié)、滴滴、螞蟻)，都過了。
在文章里我不僅會(huì)列出面試題，還會(huì)給到一些答題建議，個(gè)人能力有限，也不能保證我回答都正確，如果有錯(cuò)誤，希望能糾正我。
字節(jié)
一面
說一下瀏覽器緩存
瀏覽器緩存分為強(qiáng)緩存和協(xié)商緩存，強(qiáng)緩存會(huì)直接從瀏覽器里面拿數(shù)據(jù)，協(xié)商緩存會(huì)先訪問服務(wù)器看緩存是否過期，再?zèng)Q定是否從瀏覽器里面拿數(shù)據(jù)。
控制強(qiáng)緩存的字段有：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 是在服務(wù)端保存的一個(gè)數(shù)據(jù)結(jié)構(gòu)，用來跟蹤用戶的狀態(tài)，這個(gè)數(shù)據(jù)可以保存在集群、數(shù)據(jù)庫、文件中；Cookie 是客戶端保存用戶信息的一種機(jī)制，用來記錄用戶的一些信息，也是實(shí)現(xiàn) Session 的一種方式。
詳見：COOKIE 和 SESSION 有什么區(qū)別？
瀏覽器如何做到 session 的功能的。
其實(shí)就是考察 http 怎么處理無狀態(tài)是怎么處理的，具體可見 COOKIE 和 SESSION 有什么區(qū)別？里面的答案。
解釋一下：csrf 和 xss
XSS：惡意攻擊者往 Web 頁面里插入惡意 Script 代碼，當(dāng)用戶瀏覽該頁之時(shí)，嵌入其中 Web 里面的 Script 代碼會(huì)被執(zhí)行，從而達(dá)到惡意攻擊用戶的目的。
CSRF：CSRF 攻擊是攻擊者借助受害者的 Cookie 騙取服務(wù)器的信任，可以在受害者毫不知情的情況下以受害者名義偽造請求發(fā)送給受攻擊服務(wù)器，從而在并未授權(quán)的情況下執(zhí)行在權(quán)限保護(hù)之下的操作。
詳見：前端安全面試題
怎么防止 csrf 和 xss
詳見：前端安全面試題
跨域的處理方案有哪些
常用的：jsonp、CORS、nginx 代理，完整的大概是九種，可見：九種跨域方式實(shí)現(xiàn)原理（完整版）
CORS 是如何做的？
服務(wù)端設(shè)置 Access-Control-Allow-Origin 就可以開啟 CORS。
對于 CORS ，Get 和 POST 有區(qū)別嗎？
其實(shí)想考察的就是什么時(shí)候會(huì)有預(yù)檢請求(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ū)別。關(guān)鍵點(diǎn)：1. 前者是值的引用，后者是值的拷貝。2.前者編譯時(shí)輸出接口，后者運(yùn)行時(shí)加載。
推薦文章：前端模塊化：CommonJS,AMD,CMD,ES6
react 里如何做動(dòng)態(tài)加載
React.lazy ，另外通過 webpack 的動(dòng)態(tài)加載：import() 和 ensure.require
動(dòng)態(tài)加載的原理是啥，就是 webpack 編譯出來的代碼
講道理 webpack 動(dòng)態(tài)加載就兩種方式：import()和 require.ensure，不過他們實(shí)現(xiàn)原理是相同的。
我覺得這道題的重點(diǎn)在于動(dòng)態(tài)的創(chuàng)建 script 標(biāo)簽，以及通過 jsonp 去請求 chunk，推薦的文章是：webpack 是如何實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的
筆試題：頁面結(jié)構(gòu)包括頁頭（永遠(yuǎn)在頂部）、主體內(nèi)容、頁腳，頁腳永遠(yuǎn)在頁面底部（不是窗口底部），即內(nèi)容高度不夠時(shí)，頁腳也要保證在頁面底部
常規(guī)題，考察基本的布局
筆試題：寫 new 的執(zhí)行過程
new 的執(zhí)行過程大致如下：
創(chuàng)建一個(gè)對象
將對象的 _ *proto_* 指向 構(gòu)造函數(shù)的 prototype
將這個(gè)對象作為構(gòu)造函數(shù)的 this
返回該對象。
function myNew(Con, ...args) {let obj = Object.create(Con.prototype)let result = Con.apply(obj, args)return typeof obj === 'object' ? result : obj}
筆試題：寫一個(gè)處理加法可能產(chǎn)生精度的函數(shù)，比如 0.1 + 0.2 = 0.3
思路：對于浮點(diǎn)數(shù)在底層處理是有問題的，所以目的就是想辦法將所以的浮點(diǎn)數(shù)轉(zhuǎn)化為整數(shù)進(jìn)行處理，同時(shí)乘以一個(gè)倍數(shù)(A)，然后加起來后再除以這個(gè)倍數(shù)(A)，這個(gè)倍數(shù)應(yīng)該是兩個(gè)數(shù)中最小的那個(gè)數(shù)的倍數(shù)，比如 0.1 + 0.02 ,那么應(yīng)該同時(shí)乘以 100，變?yōu)?10 + 2，然后再將值除以 100。
1000000000 + 1000000000 允許返回字符串 處理大數(shù)
大數(shù)問題就是通過字符串來處理，從后往前加，然后處理進(jìn)位的問題。
二面
聊項(xiàng)目
項(xiàng)目基本是問：
- 項(xiàng)目難點(diǎn)以及怎么解決的
- 項(xiàng)目有哪些亮點(diǎn)？
寫一個(gè) es6 的繼承過程
這個(gè)題我覺得出得很好，很考察基本功。
// 這個(gè)是要實(shí)現(xiàn)的方法createClass = fun(sons, super) {// TODOreturn fn;}// 這是個(gè) es6 的一個(gè)例子，要實(shí)現(xiàn) extends 的功能。class Man extends Human {cons (args) {super(args)// xxxxx}speak() {console.log('')}}
寫一個(gè)大數(shù)相乘的解決方案。傳兩個(gè)字符串進(jìn)來，返回一個(gè)字符串
function multi(str1, str2) {}
這道題跟一面的時(shí)候思路差不多，只是進(jìn)位的時(shí)候不一定是 1。
三面
聊項(xiàng)目
寫一個(gè)防抖函數(shù)
算法題:https://leetcode-cn.com/problems/bu-ke-pai-zhong-de-shun-zi-lcof/
小節(jié)
字節(jié)果然是出了名的考算法題比較多的，基本每面都會(huì)算法題和編程題，對編程能力比較看重吧。
講道理一面還是比較常規(guī)的，二三面因?yàn)槎际菆F(tuán)隊(duì) leader 和更高級別的，問的技術(shù)細(xì)節(jié)也比較少了，重點(diǎn)考察一些技術(shù)方案和項(xiàng)目的問題。
滴滴
一面
webpack 原理
大致就是：
- 初始化參數(shù)：從配置文件和 Shell 語句中讀取與合并參數(shù)，得出最終的參數(shù)；
- 開始編譯：用上一步得到的參數(shù)初始化 Compiler 對象，加載所有配置的插件，執(zhí)行對象的 run 方法開始執(zhí)行編譯；
- 確定入口：根據(jù)配置中的 entry 找出所有的入口文件；
- 編譯模塊：從入口文件出發(fā)，調(diào)用所有配置的 Loader 對模塊進(jìn)行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經(jīng)過了本步驟的處理；
- 完成模塊編譯：在經(jīng)過第 4 步使用 Loader 翻譯完所有模塊后，得到了每個(gè)模塊被翻譯后的最終內(nèi)容以及它們之間的依賴關(guān)系；
- 輸出資源：根據(jù)入口和模塊之間的依賴關(guān)系，組裝成一個(gè)個(gè)包含多個(gè)模塊的 Chunk，再把每個(gè) Chunk 轉(zhuǎn)換成一個(gè)單獨(dú)的文件加入到輸出列表，這步是可以修改輸出內(nèi)容的最后機(jī)會(huì)；
- 輸出完成：在確定好輸出內(nèi)容后，根據(jù)配置確定輸出的路徑和文件名，把文件內(nèi)容寫入到文件系統(tǒng)。
在以上過程中，Webpack 會(huì)在特定的時(shí)間點(diǎn)廣播出特定的事件，插件在監(jiān)聽到感興趣的事件后會(huì)執(zhí)行特定的邏輯，并且插件可以調(diào)用 Webpack 提供的 API 改變 Webpack 的運(yùn)行結(jié)果。
babel 原理
babel 的轉(zhuǎn)譯過程分為三個(gè)階段：parsing、transforming、generating，以 ES6 代碼轉(zhuǎn)譯為 ES5 代碼為例，babel 轉(zhuǎn)譯的具體過程如下：
- ES6 代碼輸入
- babylon 進(jìn)行解析得到 AST
- plugin 用 babel-traverse 對 AST 樹進(jìn)行遍歷轉(zhuǎn)譯,得到新的 AST 樹
- 用 babel-generator 通過 AST 樹生成 ES5 代碼
虛擬 DOM 的理解
從 React 歷史的長河里聊虛擬 DOM 及其價(jià)值
項(xiàng)目里如何做的性能優(yōu)化
這個(gè)跟我的項(xiàng)目相關(guān)。
寫過 webpack loader 或者插件嗎
講講你寫的 babel 插件
二面
redux 的原理
redux 做狀態(tài)管理和發(fā)布訂閱模式有什么區(qū)別
redux 其實(shí)也是一個(gè)發(fā)布訂閱，但是 redux 可以做到數(shù)據(jù)的可預(yù)測和可回溯。
react-redux 的原理，是怎么跟 react 關(guān)聯(lián)起來的
react-redux 的核心組件只有兩個(gè)，Provider 和 connect，Provider 存放 Redux 里 store 的數(shù)據(jù)到 context 里，通過 connect 從 context 拿數(shù)據(jù)，通過 props 傳遞給 connect 所包裹的組件。
了解多端的原理嗎？
不清楚，沒了解過。
http 與 tcp 的關(guān)系
tcp 可以建立多個(gè)連接嗎？
我估計(jì)是想問 http 的管線化，當(dāng)時(shí)忘了這個(gè)叫啥了
介紹一下為什么要有 三次握手，四次揮手
寫過 babel 插件嗎？用來干啥的？怎么寫的 babel 插件
寫過一些簡單的 babel 插件，說了我們公司用來通過代碼生成文檔的 babel 插件是怎么做的。
知道怎么轉(zhuǎn)化成 AST 的嗎？
我估計(jì)就是問詞法分析和語法分析相關(guān)的
研究過 React 的運(yùn)行時(shí)嗎？
職業(yè)規(guī)劃。
三面
項(xiàng)目介紹
說一下你的項(xiàng)目有哪些復(fù)雜的點(diǎn)，以及怎么解決的
這個(gè)聊了挺久的，還聊了一些數(shù)據(jù)量比較大的怎么處理。
你們的業(yè)務(wù)組件庫有多少個(gè)，是什么樣的組件
權(quán)限組件是怎么設(shè)計(jì)的
會(huì) node 嗎？
我說我只會(huì)增刪改查，會(huì)點(diǎn) express，然后就開始一頓狂轟亂炸的知識。
介紹一下你對中間件的理解
怎么保證后端服務(wù)穩(wěn)定性，怎么做容災(zāi)
感覺已經(jīng)超綱了，基本沒做過，還好之前跟后端同學(xué)聊過他們怎么做容災(zāi)的，還記得兩點(diǎn)說了下。
- 多個(gè)服務(wù)器部署
- 降級處理，服務(wù)掛了，從緩存里面取。
怎么讓數(shù)據(jù)庫查詢更快
- 索引
- 如果數(shù)據(jù)量太多了可以拆表，分多個(gè)數(shù)據(jù)庫
數(shù)據(jù)庫是用的什么？
mysql
為什么用 mysql
希望滴滴能提供給你什么？
這個(gè)題其實(shí)還挺?？嫉?，可以好好準(zhǔn)備下，背一下答案。
最后面試官問我有什么想問他的么，我說沒有，因?yàn)槲抑皢柕猛Χ嗔恕２贿^他還是給我介紹了他們業(yè)務(wù)還是很厲害的，集團(tuán)第三，還拿了 A 級績效，公司有很多技術(shù)上的沉淀，跨端呀，web IDE 呀，等等
這個(gè)時(shí)候我就感覺自己能過了，感覺是在吸引我去，偷笑。
四面
介紹一下項(xiàng)目的難點(diǎn)以及怎么解決的
一起討論那些難點(diǎn)
自己有什么技術(shù)上的優(yōu)勢
最近在研究什么技術(shù)？
職業(yè)規(guī)劃
移動(dòng)端的業(yè)務(wù)有做過嗎？
希望滴滴能提供給你什么？
當(dāng)業(yè)務(wù)重的時(shí)候怎么安排時(shí)間？
小節(jié)
滴滴我面的這個(gè)崗位是可能回去做一些多端應(yīng)用，所以會(huì)涉及到很多 webpack 和 ast 相關(guān)的東西，所以這些問得比較多，感覺這個(gè)組還是很不錯(cuò)的，能做到很多技術(shù)上的東西。
螞蟻
一面
講講來蘑菇街都干了哪些事情
聊聊有什么技術(shù)上的沉淀
除了 redux mbox dva 還用過其他的 狀態(tài)管理沒
hooks 原理
看過 hooks 相關(guān)的草案嗎
你對螞蟻有什么期望，或者說技術(shù)的規(guī)劃，想做的東西
vue3 的 類似 hooks 的原理是怎么樣的
二面
聊項(xiàng)目，項(xiàng)目的難點(diǎn)，以及自己做了哪些事情
為什么項(xiàng)目里會(huì)引入 TS
dva 和 redux 的區(qū)別
職業(yè)發(fā)展，今年的打算
組件升級怎么讓使用這個(gè)組件的人都知道。
如果讓你設(shè)計(jì)項(xiàng)目自動(dòng)設(shè)計(jì)組件升級，并且安全，你會(huì)怎么去設(shè)計(jì)
三面
全程聊項(xiàng)目，因?yàn)樗皇乔岸说模詻]問前端任何知識，主要聊業(yè)務(wù)相關(guān)的，看看我對業(yè)務(wù)的理解，以及一些想法。
項(xiàng)目難點(diǎn)
怎么解決
項(xiàng)目有什么改進(jìn)的地方
業(yè)務(wù)方怎么拿到反饋的，就是做的這個(gè)東西具體有什么用
小節(jié)
一面面試官問了很多我完全不知道的東西，我知道的東西可能答的比較隨意吧，記不起來了。反正能深深的感受到面試對知識的廣度和深度遠(yuǎn)超我很多很多，基本不在一個(gè) level 的。
二三面已經(jīng)是 P9 的大佬來面了，所以也沒問太多的技術(shù)細(xì)節(jié)，都是考察一些技術(shù)的解決方案和項(xiàng)目的東西。
螞蟻的面試其實(shí)還是比較難的，問題都不是那種有確定的答案，基本都是考察你平時(shí)的積累和經(jīng)驗(yàn)。
最后
上一篇拼多多和酷家樂的面經(jīng)之后有很多人問我工作幾年，怎么學(xué)習(xí)的之類的，或者你面了這么多都過了是不是有什么技巧呀？
首先我目前工作了快兩年了，18 年 7 月份畢業(yè)的。
關(guān)于如何準(zhǔn)備面試的問題，我的策略是把自己會(huì)的東西以及常用的東西，盡量讓面試官問不倒你，不會(huì)的東西可以跟面試官說不會(huì)，不怎么了解，那一般面試官也不會(huì)問相關(guān)的問題了，如果連自己常用的東西都了解得不深，那么就不太有可能把平時(shí)不常用的了解得很深了。
比如我可能寫 react 比較多，參與過組件庫的開發(fā)，webpack 寫得也比較多。所以我在準(zhǔn)備的時(shí)候，就盡量準(zhǔn)備的這些知識，了解我的人都知道，我對 react 研究得比較多，原理、性能優(yōu)化都寫過文章，所以如果考 react 的東西，我基本不擔(dān)心。對于 vue、移動(dòng)端、小程序、node 啥的，我基本沒準(zhǔn)備，問倒的時(shí)候我就說僅僅了解，沒有什么實(shí)戰(zhàn)經(jīng)驗(yàn)。
最后我是桃翁，一個(gè)愛思考的前端 er，期待你的關(guān)注。
推薦閱讀
我的公眾號能帶來什么價(jià)值？(文末有送書規(guī)則，一定要看)
每個(gè)前端工程師都應(yīng)該了解的圖片知識(長文建議收藏)
為什么現(xiàn)在面試總是面試造火箭？