前言
最近兩篇面試以及離職相關(guān)的文章不容錯(cuò)過(guò)哦馍资。
今年面試還是比較順的，面了五家公司(酷家樂(lè)鸟蟹、拼多多乌妙、字節(jié)、滴滴戏锹、螞蟻)冠胯，都過(guò)了。
在文章里我不僅會(huì)列出面試題锦针，還會(huì)給到一些答題建議，個(gè)人能力有限置蜀，也不能保證我回答都正確奈搜，如果有錯(cuò)誤，希望能糾正我盯荤。
字節(jié)
一面
說(shuō)一下瀏覽器緩存
瀏覽器緩存分為強(qiáng)緩存和協(xié)商緩存馋吗，強(qiáng)緩存會(huì)直接從瀏覽器里面拿數(shù)據(jù)，協(xié)商緩存會(huì)先訪問(wèn)服務(wù)器看緩存是否過(guò)期秋秤，再?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)先級(jí)比Last-Modified / If-Modified-Since高。
cookie 與 session 的區(qū)別
Session 是在服務(wù)端保存的一個(gè)數(shù)據(jù)結(jié)構(gòu)鞋真，用來(lái)跟蹤用戶的狀態(tài)崇堰，這個(gè)數(shù)據(jù)可以保存在集群、數(shù)據(jù)庫(kù)、文件中海诲；
Cookie 是客戶端保存用戶信息的一種機(jī)制繁莹，用來(lái)記錄用戶的一些信息，也是實(shí)現(xiàn) Session 的一種方式特幔。
詳見(jiàn)：COOKIE和SESSION有什么區(qū)別咨演？
瀏覽器如何做到 session 的功能的。
其實(shí)就是考察 http 怎么處理無(wú)狀態(tài)是怎么處理的蚯斯，具體可見(jiàn) COOKIE和SESSION有什么區(qū)別薄风？里面的答案。
解釋一下：csrf 和 xss
XSS：惡意攻擊者往 Web 頁(yè)面里插入惡意 Script 代碼溉跃，當(dāng)用戶瀏覽該頁(yè)之時(shí)村刨，嵌入其中 Web 里面的 Script 代碼會(huì)被執(zhí)行，從而達(dá)到惡意攻擊用戶的目的撰茎。
CSRF：CSRF 攻擊是攻擊者借助受害者的 Cookie 騙取服務(wù)器的信任嵌牺，可以在受害者毫不知情的情況下以受害者名義偽造請(qǐng)求發(fā)送給受攻擊服務(wù)器，從而在并未授權(quán)的情況下執(zhí)行在權(quán)限保護(hù)之下的操作龄糊。
詳見(jiàn)：前端安全面試題
怎么防止 csrf 和 xss
詳見(jiàn)：前端安全面試題
跨域的處理方案有哪些
常用的：jsonp逆粹、CORS、nginx 代理炫惩，完整的大概是九種僻弹，可見(jiàn)：九種跨域方式實(shí)現(xiàn)原理（完整版）
CORS 是如何做的？
服務(wù)端設(shè)置 Access-Control-Allow-Origin 就可以開(kāi)啟 CORS他嚷。
對(duì)于 CORS 蹋绽，Get 和 POST 有區(qū)別嗎？
其實(shí)想考察的就是什么時(shí)候會(huì)有預(yù)檢請(qǐng)求(option 請(qǐng)求)筋蓖。
了解 HTTPS 的過(guò)程嗎卸耘？
推薦浪浪的 深入理解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 赂毯，另外通過(guò) webpack 的動(dòng)態(tài)加載：import() 和 ensure.require
動(dòng)態(tài)加載的原理是啥，就是 webpack 編譯出來(lái)的代碼
講道理 webpack 動(dòng)態(tài)加載就兩種方式：import()和 require.ensure，不過(guò)他們實(shí)現(xiàn)原理是相同的党涕。
我覺(jué)得這道題的重點(diǎn)在于動(dòng)態(tài)的創(chuàng)建 script 標(biāo)簽烦感，以及通過(guò) jsonp 去請(qǐng)求 chunk，推薦的文章是：webpack是如何實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的
筆試題：頁(yè)面結(jié)構(gòu)包括頁(yè)頭（永遠(yuǎn)在頂部）膛堤、主體內(nèi)容手趣、頁(yè)腳，頁(yè)腳永遠(yuǎn)在頁(yè)面底部（不是窗口底部）肥荔，即內(nèi)容高度不夠時(shí)绿渣，頁(yè)腳也要保證在頁(yè)面底部
常規(guī)題，考察基本的布局
筆試題：寫(xiě) new 的執(zhí)行過(guò)程
new 的執(zhí)行過(guò)程大致如下：
創(chuàng)建一個(gè)對(duì)象
將對(duì)象的 _ proto_ 指向 構(gòu)造函數(shù)的 prototype
將這個(gè)對(duì)象作為構(gòu)造函數(shù)的 this
返回該對(duì)象燕耿。
function myNew(Con, ...args) {
let obj = Object.create(Con.prototype)
let result = Con.apply(obj, args)
return typeof result === 'object' ? result : obj
}
筆試題：寫(xiě)一個(gè)處理加法可能產(chǎn)生精度的函數(shù)中符，比如 0.1 + 0.2 = 0.3
思路：對(duì)于浮點(diǎn)數(shù)在底層處理是有問(wèn)題的，所以目的就是想辦法將所以的浮點(diǎn)數(shù)轉(zhuǎn)化為整數(shù)進(jìn)行處理誉帅，同時(shí)乘以一個(gè)倍數(shù)(A)淀散，然后加起來(lái)后再除以這個(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ù)問(wèn)題就是通過(guò)字符串來(lái)處理郭膛，從后往前加，然后處理進(jìn)位的問(wèn)題氛悬。
二面
聊項(xiàng)目
項(xiàng)目基本是問(wèn)：
- 項(xiàng)目難點(diǎn)以及怎么解決的
- 項(xiàng)目有哪些亮點(diǎn)则剃？
寫(xiě)一個(gè) es6 的繼承過(guò)程
這個(gè)題我覺(jué)得出得很好，很考察基本功如捅。
// 這個(gè)是要實(shí)現(xiàn)的方法
createClass = fun(sons, super) {
// TODO
return fn;
}
// 這是個(gè) es6 的一個(gè)例子忍级，要實(shí)現(xiàn) extends 的功能。
class Man extends Human {
cons (args) {
super(args)
// xxxxx
}
speak() {
console.log('')
}
}
寫(xiě)一個(gè)大數(shù)相乘的解決方案伪朽。傳兩個(gè)字符串進(jìn)來(lái)，返回一個(gè)字符串
function multi(str1, str2) {
}
這道題跟一面的時(shí)候思路差不多汛蝙，只是進(jìn)位的時(shí)候不一定是 1烈涮。
三面
聊項(xiàng)目
寫(xiě)一個(gè)防抖函數(shù)
算法題:https://leetcode-cn.com/problems/bu-ke-pai-zhong-de-shun-zi-lcof/
小節(jié)
字節(jié)果然是出了名的考算法題比較多的，基本每面都會(huì)算法題和編程題窖剑，對(duì)編程能力比較看重吧坚洽。
講道理一面還是比較常規(guī)的，二三面因?yàn)槎际菆F(tuán)隊(duì) leader 和更高級(jí)別的西土，問(wèn)的技術(shù)細(xì)節(jié)也比較少了讶舰，重點(diǎn)考察一些技術(shù)方案和項(xiàng)目的問(wèn)題。
滴滴
一面
webpack 原理
大致就是：
- 初始化參數(shù)：從配置文件和 Shell 語(yǔ)句中讀取與合并參數(shù)，得出最終的參數(shù)跳昼；
- 開(kāi)始編譯：用上一步得到的參數(shù)初始化 Compiler 對(duì)象般甲，加載所有配置的插件，執(zhí)行對(duì)象的 run 方法開(kāi)始執(zhí)行編譯鹅颊；
- 確定入口：根據(jù)配置中的 entry 找出所有的入口文件敷存；
- 編譯模塊：從入口文件出發(fā)，調(diào)用所有配置的 Loader 對(duì)模塊進(jìn)行翻譯堪伍，再找出該模塊依賴的模塊锚烦，再遞歸本步驟直到所有入口依賴的文件都經(jīng)過(guò)了本步驟的處理；
- 完成模塊編譯：在經(jīng)過(guò)第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)容寫(xiě)入到文件系統(tǒng)。
在以上過(guò)程中茧痕，Webpack 會(huì)在特定的時(shí)間點(diǎn)廣播出特定的事件野来，插件在監(jiān)聽(tīng)到感興趣的事件后會(huì)執(zhí)行特定的邏輯，并且插件可以調(diào)用 Webpack 提供的 API 改變 Webpack 的運(yùn)行結(jié)果踪旷。
babel 原理
babel的轉(zhuǎn)譯過(guò)程分為三個(gè)階段：parsing曼氛、transforming、generating令野，以ES6代碼轉(zhuǎn)譯為ES5代碼為例舀患，babel轉(zhuǎn)譯的具體過(guò)程如下：
- ES6代碼輸入
- babylon 進(jìn)行解析得到 AST
- plugin 用 babel-traverse 對(duì) AST 樹(shù)進(jìn)行遍歷轉(zhuǎn)譯,得到新的AST樹(shù)
- 用 babel-generator 通過(guò) AST 樹(shù)生成 ES5 代碼
虛擬 DOM 的理解
從 React 歷史的長(zhǎng)河里聊虛擬DOM及其價(jià)值
項(xiàng)目里如何做的性能優(yōu)化
這個(gè)跟我的項(xiàng)目相關(guān)。
寫(xiě)過(guò)webpack loader 或者插件嗎
講講你寫(xiě)的 babel 插件
二面
redux 的原理
redux 做狀態(tài)管理和發(fā)布訂閱模式有什么區(qū)別
redux 其實(shí)也是一個(gè)發(fā)布訂閱气破，但是 redux 可以做到數(shù)據(jù)的可預(yù)測(cè)和可回溯聊浅。
react-redux 的原理，是怎么跟 react 關(guān)聯(lián)起來(lái)的
react-redux 的核心組件只有兩個(gè)现使，Provider 和 connect低匙，Provider 存放 Redux 里 store 的數(shù)據(jù)到 context 里，通過(guò) connect 從 context 拿數(shù)據(jù)碳锈，通過(guò) props 傳遞給 connect 所包裹的組件顽冶。
了解多端的原理嗎？
不清楚售碳，沒(méi)了解過(guò)强重。
http 與 tcp 的關(guān)系
tcp 可以建立多個(gè)連接嗎绞呈？
我估計(jì)是想問(wèn) http 的管線化，當(dāng)時(shí)忘了這個(gè)叫啥了
介紹一下為什么要有 三次握手间景，四次揮手
寫(xiě)過(guò) babel 插件嗎佃声？用來(lái)干啥的？怎么寫(xiě)的 babel 插件
寫(xiě)過(guò)一些簡(jiǎn)單的 babel 插件拱燃，說(shuō)了我們公司用來(lái)通過(guò)代碼生成文檔的 babel 插件是怎么做的秉溉。
知道怎么轉(zhuǎn)化成 AST 的嗎？
我估計(jì)就是問(wèn)詞法分析和語(yǔ)法分析相關(guān)的
研究過(guò) React 的運(yùn)行時(shí)嗎碗誉？
職業(yè)規(guī)劃召嘶。
三面
項(xiàng)目介紹
說(shuō)一下你的項(xiàng)目有哪些復(fù)雜的點(diǎn)，以及怎么解決的
這個(gè)聊了挺久的哮缺，還聊了一些數(shù)據(jù)量比較大的怎么處理弄跌。
你們的業(yè)務(wù)組件庫(kù)有多少個(gè)，是什么樣的組件
權(quán)限組件是怎么設(shè)計(jì)的
會(huì)node 嗎尝苇？
我說(shuō)我只會(huì)增刪改查铛只，會(huì)點(diǎn) express，然后就開(kāi)始一頓狂轟亂炸的知識(shí)糠溜。
介紹一下你對(duì)中間件的理解
怎么保證后端服務(wù)穩(wěn)定性淳玩，怎么做容災(zāi)
感覺(jué)已經(jīng)超綱了，基本沒(méi)做過(guò)非竿，還好之前跟后端同學(xué)聊過(guò)他們?cè)趺醋鋈轂?zāi)的蜕着，還記得兩點(diǎn)說(shuō)了下。
- 多個(gè)服務(wù)器部署
- 降級(jí)處理红柱，服務(wù)掛了承匣，從緩存里面取。
怎么讓數(shù)據(jù)庫(kù)查詢更快
- 索引
- 如果數(shù)據(jù)量太多了可以拆表锤悄，分多個(gè)數(shù)據(jù)庫(kù)
數(shù)據(jù)庫(kù)是用的什么韧骗？
mysql
為什么用 mysql
希望滴滴能提供給你什么？
這個(gè)題其實(shí)還挺沉憔郏考的袍暴，可以好好準(zhǔn)備下，背一下答案隶症。
最后面試官問(wèn)我有什么想問(wèn)他的么容诬，我說(shuō)沒(méi)有，因?yàn)槲抑皢?wèn)得挺多了沿腰。不過(guò)他還是給我介紹了他們業(yè)務(wù)還是很厲害的，集團(tuán)第三狈定，還拿了 A 級(jí)績(jī)效颂龙，公司有很多技術(shù)上的沉淀习蓬，跨端呀，web IDE 呀措嵌，等等
這個(gè)時(shí)候我就感覺(jué)自己能過(guò)了躲叼，感覺(jué)是在吸引我去，偷笑企巢。
四面
介紹一下項(xiàng)目的難點(diǎn)以及怎么解決的
一起討論那些難點(diǎn)
自己有什么技術(shù)上的優(yōu)勢(shì)
最近在研究什么技術(shù)枫慷？
職業(yè)規(guī)劃
移動(dòng)端的業(yè)務(wù)有做過(guò)嗎？
希望滴滴能提供給你什么浪规？
當(dāng)業(yè)務(wù)重的時(shí)候怎么安排時(shí)間或听？
小節(jié)
滴滴我面的這個(gè)崗位是可能回去做一些多端應(yīng)用，所以會(huì)涉及到很多 webpack 和 ast 相關(guān)的東西笋婿，所以這些問(wèn)得比較多誉裆，感覺(jué)這個(gè)組還是很不錯(cuò)的，能做到很多技術(shù)上的東西缸濒。
螞蟻
一面
講講來(lái)蘑菇街都干了哪些事情
聊聊有什么技術(shù)上的沉淀
除了 redux mbox dva 還用過(guò)其他的 狀態(tài)管理沒(méi)
hooks 原理
看過(guò) hooks 相關(guān)的草案嗎
你對(duì)螞蟻有什么期望足丢，或者說(shuō)技術(shù)的規(guī)劃，想做的東西
vue3 的 類似 hooks 的原理是怎么樣的
二面
聊項(xiàng)目庇配，項(xiàng)目的難點(diǎn)斩跌，以及自己做了哪些事情
為什么項(xiàng)目里會(huì)引入 TS
dva 和 redux 的區(qū)別
職業(yè)發(fā)展，今年的打算
組件升級(jí)怎么讓使用這個(gè)組件的人都知道捞慌。
如果讓你設(shè)計(jì)項(xiàng)目自動(dòng)設(shè)計(jì)組件升級(jí)耀鸦，并且安全，你會(huì)怎么去設(shè)計(jì)
三面
全程聊項(xiàng)目卿闹，因?yàn)樗皇乔岸说慕腋猓詻](méi)問(wèn)前端任何知識(shí)，主要聊業(yè)務(wù)相關(guān)的锻霎，看看我對(duì)業(yè)務(wù)的理解著角，以及一些想法。
項(xiàng)目難點(diǎn)
怎么解決
項(xiàng)目有什么改進(jìn)的地方
業(yè)務(wù)方怎么拿到反饋的旋恼，就是做的這個(gè)東西具體有什么用
小節(jié)
一面面試官問(wèn)了很多我完全不知道的東西吏口，我知道的東西可能答的比較隨意吧，記不起來(lái)了冰更。反正能深深的感受到面試對(duì)知識(shí)的廣度和深度遠(yuǎn)超我很多很多产徊，基本不在一個(gè) level 的。
二三面已經(jīng)是 P9 的大佬來(lái)面了蜀细，所以也沒(méi)問(wèn)太多的技術(shù)細(xì)節(jié)舟铜，都是考察一些技術(shù)的解決方案和項(xiàng)目的東西。
螞蟻的面試其實(shí)還是比較難的奠衔，問(wèn)題都不是那種有確定的答案谆刨，基本都是考察你平時(shí)的積累和經(jīng)驗(yàn)塘娶。
最后
上一篇拼多多和酷家樂(lè)的面經(jīng)之后有很多人問(wèn)我工作幾年，怎么學(xué)習(xí)的之類的痊夭，或者你面了這么多都過(guò)了是不是有什么技巧呀刁岸？
首先我目前工作了快兩年了，18 年 7 月份畢業(yè)的她我。
關(guān)于如何準(zhǔn)備面試的問(wèn)題虹曙，我的策略是把自己會(huì)的東西以及常用的東西，盡量讓面試官問(wèn)不倒你番舆，不會(huì)的東西可以跟面試官說(shuō)不會(huì)酝碳，不怎么了解，那一般面試官也不會(huì)問(wèn)相關(guān)的問(wèn)題了合蔽，如果連自己常用的東西都了解得不深击敌，那么就不太有可能把平時(shí)不常用的了解得很深了。
比如我可能寫(xiě) react 比較多拴事，參與過(guò)組件庫(kù)的開(kāi)發(fā)沃斤，webpack 寫(xiě)得也比較多。所以我在準(zhǔn)備的時(shí)候刃宵，就盡量準(zhǔn)備的這些知識(shí)衡瓶，了解我的人都知道，我對(duì) react 研究得比較多牲证，原理哮针、性能優(yōu)化都寫(xiě)過(guò)文章，所以如果考 react 的東西坦袍，我基本不擔(dān)心十厢。 對(duì)于 vue、移動(dòng)端捂齐、小程序蛮放、node 啥的，我基本沒(méi)準(zhǔn)備奠宜，問(wèn)倒的時(shí)候我就說(shuō)僅僅了解包颁，沒(méi)有什么實(shí)戰(zhàn)經(jīng)驗(yàn)。
最后我是桃翁压真，一個(gè)愛(ài)思考的前端er娩嚼，期待你的關(guān)注。
如果你最近也在找工作滴肿，歡迎找我交流岳悟，下面是我公眾號(hào)。
本文由博客一文多發(fā)平臺(tái) OpenWrite 發(fā)布泼差！
