最近換工作，面試了幾家大廠（阿里、網(wǎng)易其垄、依圖科技苛蒲、美團(tuán)、新H3C绿满、丁香園臂外、每科等），有的拿到了offer喇颁，有的則是被當(dāng)作備胎漏健，也有的沒(méi)有走到終面。鄙人工作快6年无牵，所以對(duì)標(biāo)崗位都是高級(jí)或資深漾肮，現(xiàn)將面試總結(jié)記錄如下：

一面：

主要是考察技術(shù)的廣度，適當(dāng)?shù)目疾熘R(shí)點(diǎn)的深度茎毁。這一面不一定是按照簡(jiǎn)歷上的技術(shù)點(diǎn)來(lái)發(fā)問(wèn)克懊。面試官都會(huì)由淺入深地盤問(wèn)。

• 自我介紹

介紹自己的亮點(diǎn)（可以是大廠工作經(jīng)歷七蜘、工作經(jīng)驗(yàn)谭溉、較為復(fù)雜的項(xiàng)目經(jīng)歷；清楚描述自己的工作內(nèi)容橡卤，突出自己的地位聋呢；可以結(jié)合項(xiàng)目來(lái)聊，展示正能量）
例如：
我叫XXX崎淳，xx年畢業(yè)于xx大學(xué)钓葫，畢業(yè)之后就一直做前端開發(fā)相關(guān)工作，距今有xx年的工作經(jīng)驗(yàn)嵌灰。最近一家公司是xxx弄匕，工作角色是xxx，主要負(fù)責(zé)項(xiàng)目的前端技術(shù)選型沽瞭、項(xiàng)目結(jié)構(gòu)搭建迁匠、開發(fā)，項(xiàng)目前期也會(huì)一起參與需求評(píng)審驹溃。最近做的項(xiàng)目叫做xxx城丧，前端技術(shù)棧nodejs（中間層）+vue（視圖層）+webpack/gulp（項(xiàng)目構(gòu)建和優(yōu)化）。業(yè)余時(shí)間喜歡逛知乎豌鹤、掘金亡哄、segmentfault等網(wǎng)站

• 技術(shù)問(wèn)題
  • 什么是柵格？有什么用布疙？怎么用磺平？有沒(méi)有自己設(shè)計(jì)過(guò)魂仍？
  • 只用CSS如何實(shí)現(xiàn)單行文本溢出效果？多行文本溢出效果呢拣挪？
  • CommonJS規(guī)范中的require和ESM規(guī)范中的import有什么區(qū)別擦酌？
  • 說(shuō)說(shuō)CommonJS、AMD\CMD菠劝、ESM的區(qū)別赊舶？
  • 能說(shuō)說(shuō)什么是MVVM嗎？每個(gè)字母分別代表什么含義赶诊？自己有實(shí)現(xiàn)過(guò)MVVM嗎笼平？主流的MVVM框架有哪些，它們的實(shí)現(xiàn)原理有沒(méi)有了解過(guò)舔痪？
  • 說(shuō)說(shuō)vue和react的區(qū)別寓调？
  • 有沒(méi)有看過(guò)vue源碼？能說(shuō)說(shuō)雙向綁定是如何實(shí)現(xiàn)的嗎锄码？
  • vue中watch和computed的區(qū)別是什么夺英？computed和watch的實(shí)現(xiàn)原理是什么？
  • 項(xiàng)目中vue組件間是如何通信的滋捶？
  • 能說(shuō)說(shuō)vue組件的生命周期嗎痛悯？
  • vue2中vdom有了解嗎？有什么用重窟？vue2中為什么要引入vdom载萌？
  • vue2中vdom的diff算法是怎么實(shí)現(xiàn)的？
  • vue2中$nextTick有什么用巡扇？在什么場(chǎng)景下適合用到扭仁？它和setTimeout/setImediate的區(qū)別是什么？
  • 用一句話概況為什么選擇vue（react）而不用react（vue）厅翔？
  • 對(duì)react是否熟悉斋枢？能說(shuō)說(shuō)組件有哪幾種嗎？為什么會(huì)有這么多種知给？
  • redux中的reducer有什么用？
  • 項(xiàng)目中有沒(méi)有用到webpack描姚？怎么用的涩赢，幫你解決了什么問(wèn)題？
  • 說(shuō)說(shuō)你們項(xiàng)目中使用到的webpack的loader有哪些轩勘？為什么要用這些loader呢筒扒？
  • 說(shuō)說(shuō)webpack的tree-shake是什么？用于解決什么問(wèn)題绊寻？
  • 說(shuō)說(shuō)webpack的caching機(jī)制是什么花墩？為什么會(huì)有caching悬秉？
  • 說(shuō)說(shuō)webpack的runtime是什么？有什么用冰蘑？
  • 有看過(guò)webpack的源代碼嗎和泌？有自己寫過(guò)webpack的插件嗎？說(shuō)說(shuō)webpack的工作原理祠肥？
  • 說(shuō)說(shuō)webpack配置文件主要都有哪些常用配置項(xiàng)武氓？每個(gè)配置項(xiàng)的作用是什么？
  • 說(shuō)說(shuō)webpack的bundle仇箱、chunk县恕、module的區(qū)別嗎？
  • 項(xiàng)目中是否用到gulp剂桥？能否手寫一個(gè)gulp任務(wù)實(shí)現(xiàn)文件復(fù)制功能忠烛？
  • 前端代碼有用到ES6/7/8嗎？如何保證他們?cè)贗E上正常運(yùn)行权逗？
  • 是否用過(guò)babel美尸？有什么用？如何用旬迹？babel的原理是什么火惊？
  • 什么是CSS模塊化？有什么用奔垦？如何用屹耐？
  • 現(xiàn)在有一段文本，需要做首行縮進(jìn)效果椿猎，需要用到哪個(gè)css屬性惶岭？用什么單位比較合適？
  • 段落文字之間的左右間距怎么控制犯眠？
  • margin和padding可以為負(fù)數(shù)嗎按灶？margin為負(fù)數(shù)用在什么場(chǎng)景下？
  • hasLayout屬性有什么用筐咧？
  • position有哪些值鸯旁？（考慮CSS3中新增的）
  • 什么是圣杯布局和雙飛翼布局？如何實(shí)現(xiàn)量蕊？
  • 是否了解em/rem/px的區(qū)別铺罢？使用rem的時(shí)候有沒(méi)有遇到什么坑？
  • 有沒(méi)有做過(guò)移動(dòng)端開發(fā)残炮？移動(dòng)端開發(fā)如何適應(yīng)各種屏幕韭赘？
  • 微信小程序端有做過(guò)嗎？說(shuō)說(shuō)微信小程序開發(fā)中有什么坑势就？
  • 什么是CSRF泉瞻？如何防御脉漏？
  • 說(shuō)說(shuō)http緩存策略有哪些？如何實(shí)現(xiàn)協(xié)商緩存呢袖牙？
  • 是否了解http2侧巨？能簡(jiǎn)單說(shuō)下它的新特性嗎？
  • 如何實(shí)現(xiàn)util.promisify()方法贼陶？
  • 項(xiàng)目中有用到nodejs嗎刃泡？幫你們做了哪些事情？你覺(jué)得用nodejs來(lái)做這些事情合適嗎碉怔？
  • 說(shuō)說(shuō)對(duì)于這句代碼烘贴，JS引擎做了哪些事情let obj = new Person();
  • proto和prototype的區(qū)別是什么？
  • 說(shuō)說(shuō)nodejs的異步IO指的是什么撮胧？什么又是事件驅(qū)動(dòng)桨踪？nodejs異步隊(duì)列有哪些？
  • 說(shuō)說(shuō)瀏覽器端事件循環(huán)和nodejs端事件循環(huán)的區(qū)別芹啥？
  • 說(shuō)說(shuō)未來(lái)的職業(yè)規(guī)劃锻离？
  • 說(shuō)說(shuō)你過(guò)去項(xiàng)目中自己覺(jué)得最亮眼的點(diǎn)/你做過(guò)最得意的項(xiàng)目是什么？

二面：

面試官會(huì)先自我介紹墓怀，然后輪到面試者自我介紹汽纠。這一輪繼續(xù)考察技術(shù)的廣度和深度，面試官會(huì)結(jié)合簡(jiǎn)歷上寫的技術(shù)點(diǎn)來(lái)發(fā)問(wèn)傀履。（某些廠會(huì)有筆試）

• 什么是BFC虱朵？有什么用？如何觸發(fā)BFC钓账？（相關(guān)概念：IFC碴犬、FFC、清除浮動(dòng)梆暮、margin collapse）
• 說(shuō)說(shuō)web緩存分為哪兩大類服协？http緩存是什么？瀏覽器緩存是什么啦粹？
• 使用ES6語(yǔ)法一行代碼如何實(shí)現(xiàn)數(shù)組去重偿荷？
• 解釋一下盒子模型寬高值得計(jì)算方式？box-sizing有什么用唠椭？
• fetch和ajax的區(qū)別是什么跳纳？fetch有什么坑嗎？
• 知道m(xù)argin collapse嗎泪蔫？如何解決？
• 塊級(jí)元素和行級(jí)元素有什么區(qū)別喘批？行級(jí)元素有哪些撩荣？行級(jí)元素能設(shè)置寬高值嗎铣揉，舉個(gè)例子？行級(jí)元素設(shè)置display:inline-block之后為什么寬高會(huì)起效餐曹？
• 說(shuō)說(shuō)JS中逗號(hào)運(yùn)算符的作用逛拱？
• 瀏覽器中輸入一個(gè)url，按下Enter鍵后會(huì)發(fā)生什么台猴？（盡量說(shuō)的完整）
• 說(shuō)說(shuō)什么是JS閉包朽合、原型、原型鏈饱狂、作用域曹步、作用域鏈？
• 頁(yè)面DOM節(jié)點(diǎn)太多會(huì)出現(xiàn)什么問(wèn)題休讳？
• 如何獲取元素到視圖頂部的距離讲婚？
• getBoundingClientRect中獲取的top和offsetTop中獲取的top有什么區(qū)別？
• 瀏覽器端setTimeout有什么坑嗎俊柔？
• setTimeout和requestAnimationFrame有什么區(qū)別筹麸？
• defineProperty屬于ES6嗎？它和Proxy有什么區(qū)別雏婶？
• 說(shuō)說(shuō)ES6中都有哪些新特性物赶？
• vue中數(shù)組如何更新值？有什么性能問(wèn)題嗎留晚？如何實(shí)現(xiàn)只更改數(shù)組中的某一項(xiàng)（從性能方面考慮）酵紫？
• JSONP原理是什么？CORS是怎么執(zhí)行的倔丈？
• MessageChannel和postMessage各有什么用憨闰？
• setTimeout和Promise.then的執(zhí)行順序有了解嗎？在瀏覽器環(huán)境下和nodejs環(huán)境下各是如何需五？
• 說(shuō)說(shuō)web安全性方面的認(rèn)識(shí)鹉动？項(xiàng)目中是如何做的？
• 說(shuō)說(shuō)單點(diǎn)登錄流程的實(shí)現(xiàn)邏輯宏邮？
• 項(xiàng)目開發(fā)中有沒(méi)有遇到什么技術(shù)問(wèn)題泽示？說(shuō)說(shuō)解決的過(guò)程？
• 介紹一下自己感覺(jué)最有挑戰(zhàn)性的項(xiàng)目（可以從這幾個(gè)方面入手：項(xiàng)目性質(zhì)蜜氨、項(xiàng)目規(guī)模械筛、項(xiàng)目架構(gòu)、自己承擔(dān)的工作飒炎、項(xiàng)目亮點(diǎn)埋哟、項(xiàng)目難點(diǎn)、性能優(yōu)化）
• 你有什么要問(wèn)我的？（本輪面試的表現(xiàn)怎么樣赤赊？你們常用的技術(shù)棧是哪些闯狱？）
• 說(shuō)說(shuō)TCP三次握手/四次揮手的過(guò)程？為什么揮手要四次而握手只要三次抛计？SYN攻擊屬于哪個(gè)階段哄孤？
• 說(shuō)說(shuō)https的原理（結(jié)合傳輸層和應(yīng)用層來(lái)談）？為什么http性能比https好吹截？為什么https比http安全瘦陈？
• 團(tuán)隊(duì)管理
  • 說(shuō)說(shuō)你是如何管理前端團(tuán)隊(duì)的？
  • 如果說(shuō)團(tuán)隊(duì)里面兩個(gè)同學(xué)業(yè)務(wù)表現(xiàn)都得到了業(yè)務(wù)方的認(rèn)可波俄，那你還會(huì)從哪些方面去定KPI晨逝？
  • 能不能找一兩個(gè)你最熟悉的項(xiàng)目，然后聊聊你在里面做的事情（收獲）弟断？

綜面：

主要聊項(xiàng)目咏花，中間也會(huì)穿插些技術(shù)問(wèn)題。體現(xiàn)學(xué)習(xí)能力阀趴、抗壓能力昏翰、敬業(yè)精神；會(huì)深挖簡(jiǎn)歷中提到的每個(gè)技術(shù)點(diǎn)刘急。

• 你最熟悉的項(xiàng)目是哪個(gè)棚菊？說(shuō)說(shuō)項(xiàng)目架構(gòu)？你負(fù)責(zé)的是哪部分叔汁？有什么亮點(diǎn)/業(yè)績(jī)统求？使用了哪些技術(shù)？為什么要用這些技術(shù)据块？
• 你覺(jué)得你最大的優(yōu)勢(shì)是什么码邻？
• 說(shuō)說(shuō)未來(lái)三年的職業(yè)規(guī)劃？
• 說(shuō)一次失敗的經(jīng)歷另假？
• 工作過(guò)程中遇到的最大挑戰(zhàn)是什么像屋？如何解決的？
• 為什么要離職边篮？
• 說(shuō)說(shuō)你的優(yōu)缺點(diǎn)己莺？
• 說(shuō)說(shuō)你在項(xiàng)目中遇到的最大挑戰(zhàn)是什么？
• 說(shuō)說(shuō)你的前端項(xiàng)目架構(gòu)是怎么樣的戈轿？你覺(jué)得什么地方還可以再改進(jìn)凌受？
• 你覺(jué)得要讓你加入我們團(tuán)隊(duì)的話，你最大的優(yōu)勢(shì)是什么思杯？
• 說(shuō)說(shuō)你是怎么帶前端團(tuán)隊(duì)的胜蛉？
• 團(tuán)隊(duì)中每個(gè)人的開發(fā)方式是不相同的，你們團(tuán)隊(duì)用了哪些方式來(lái)保證代碼質(zhì)量？
• 如果團(tuán)隊(duì)有新人進(jìn)來(lái)誊册，有什么辦法可以使其在一周左右的時(shí)間開始進(jìn)行業(yè)務(wù)開發(fā)奈梳？
• 團(tuán)隊(duì)中有沒(méi)有做工程化工具方面的提煉？
• 說(shuō)說(shuō)你的每段工作經(jīng)歷以及每段經(jīng)歷中的收獲解虱，現(xiàn)在回顧這些工作經(jīng)歷，你覺(jué)得哪些是對(duì)你成長(zhǎng)最有幫助的漆撞？
• 如果加入一個(gè)新團(tuán)隊(duì)/公司殴泰，你現(xiàn)在的顧慮有哪些？你準(zhǔn)備怎么去解決/消除顧慮浮驳？

總結(jié)

• 語(yǔ)速可以放慢點(diǎn)
• 當(dāng)跟別人描述工作內(nèi)容或者經(jīng)歷的時(shí)候應(yīng)該挑重點(diǎn)來(lái)講（因?yàn)閯e人會(huì)很容易找不到重點(diǎn)）悍汛，所謂重點(diǎn)：?jiǎn)栴}是什么？怎么發(fā)現(xiàn)至会？怎么解決离咐？收獲是什么？
• 平時(shí)工作中就要養(yǎng)成總結(jié)/復(fù)盤的習(xí)慣
• 跟面試官聊的時(shí)候可以放松些奉件，把整個(gè)過(guò)程當(dāng)成是聊天宵蛀，而不是問(wèn)答式的對(duì)話，這樣有利于你更清楚的描述你的工作內(nèi)容县貌，也有利于別人聽懂你的描述