來自：https://juejin.im/post/5a64541bf265da3e2d338862

HTML & CSS 部分

• css常用布局

這個在面試上市公司和創(chuàng)業(yè)公司問的比較多。大概我會回答一些盒模型包括怪異盒模型蹭劈，定位布局爷肝，流布局，浮動布局，flex和grid布局屡萤，包括還有三欄布局中的圣杯和雙飛翼姻氨。這些都還比較熟悉，所以問到都還知道缕溉。其中flex布局問的比較多考传，阿里的交叉面還有別的公司有問到子元素的一些屬性。

• BFC

這個滴滴面試的時候有問道（滴滴是破例讓我加入流程中的证鸥，并且他們還招的技術(shù)棧是vue）一般在問清除浮動的時候會說一下

• 居中問題

這個應(yīng)該是老生常談的東西了僚楞，電話面試的時候有兩家問到

• session勤晚、cookie、sessionStorage泉褐、localStorage等區(qū)別

這個也是上市公司和創(chuàng)業(yè)公司問到赐写，大概就是說了下中間的區(qū)別膜赃，還有會簡單說下cookie的屬性挺邀，以及一些前端安全方面

• px/em/rem的區(qū)別

滴滴電面的時候問的，這個我也知道财剖，大概說了下相對于父元素還是文檔來確定大小之類的悠夯。

• animation和transiton的相關(guān)屬性

這個我也就用了個大概，大概知道的簡寫位置和屬性躺坟，當(dāng)然沦补，阿里一面還問到，為什么動畫推薦用c3而不是js咪橙，這個問題當(dāng)時并沒有回答好夕膀，大概就是從性能上扯了扯，但是什么占用主線程以及瀏覽器對c3加速都沒聊到美侦。然后網(wǎng)易面試也問到了产舞，然后我巴拉巴拉說了下后來查的相關(guān)東西。然后網(wǎng)易問了一句菠剩，瀏覽器怎么優(yōu)化的動畫易猫。。具壮。我准颓。揍堰。般贼。不知道膝迎。

• css編寫注意事項

因為這個在之前團隊里面沒有明文規(guī)定碳锈，所以我也沒總結(jié)過式塌，大概說了下自己編碼中的方式沼沈，和瀏覽器查抄的過程伪窖。

• css和HTML 問的的確都不是很多嗦董，然后還有什么標(biāo)簽性芬，meta和media啥的峡眶，大概也就介紹了下，問的都不是很深植锉，我也沒有回答的很深幌陕。。汽煮。因為我HTML CSS真的一般般搏熄。

JavaScript部分

• JavaScript數(shù)據(jù)類型分哪些

這是一個初創(chuàng)公司電面的問題棚唆，問的都非常基礎(chǔ)心例，比如css畫三角形之類的宵凌。別說，之前沒準(zhǔn)備止后，還真的忘記了border怎么設(shè)置出現(xiàn)直角三角形還是等腰三角形瞎惫。當(dāng)然，這個類型還是译株。瓜喇。。沒得說的

• JavaScript閉包

這個應(yīng)該問的都比較多歉糜，我之前總結(jié)過乘寒，以及常用的場景，也結(jié)合es6談了下作用域和單例模式談了下

• 前端跨域

這個我基本都知道匪补，之前有在掘金上總結(jié)過伞辛，這個很多公司又問道，包括阿里夯缺、網(wǎng)易一面蚤氏。一般方式我都知道，具體展開會把CORS跨域踊兜，heade信息字段都說了一遍竿滨。也不難

• JavaScript繼承

這個我之前也總結(jié)過相關(guān)文章，網(wǎng)易的一面第二個面試官問了捏境，我大概從原型繼承于游、構(gòu)造函數(shù)繼承、組合繼承典蝌、寄生組合繼承優(yōu)缺點和實現(xiàn)方式都說了下曙砂，還有es6的實現(xiàn)方式头谜。一般這樣就回答差不多了骏掀。后來網(wǎng)易還接著問，es5如何實現(xiàn)super關(guān)鍵字柱告〗赝裕看過babel轉(zhuǎn)換后代碼，但是這個际度。葵袭。真的忘記看了。大概說了下自己的實現(xiàn)思路乖菱，也就是裝飾著模式坡锡。然后也就渾過這題了蓬网。

• JavaScript的節(jié)流和防抖

滴滴一面問到了，阿里交叉面的時候聊業(yè)務(wù)場景的時候鹉勒，也有問到帆锋。之前看過文章，自己項目中也用過禽额，所以大概知道些

• JavaScript的事件

阿里交叉面問到的js事件執(zhí)行機制锯厢。我大概談了下event loop，microtask脯倒，task queue实辑。然后事件委托、捕獲藻丢、冒泡剪撬、目標(biāo)階段大概談了下，也順道談了下target和currentTarget郁岩。

• ajax請求方式

因該算是考察基礎(chǔ)功吧婿奔，談了下XMLHTTPRequest的過程，readyState的幾種類型和代表的意思问慎。以及瀏覽器兼容性的處理方案萍摊。

• js判斷數(shù)據(jù)類型的方法

貌似有兩家公司問到，大概說了下typeof如叼、instanceof冰木、constructor、prototype等判斷方式笼恰，注意事項以及優(yōu)缺點踊沸。應(yīng)該回答的還可以

• 函數(shù)聲明和變量聲明

這個大概我也知道，還說了下es6的相關(guān)東西

• this指向的問題

這個我也總結(jié)相關(guān)文章社证，大概說了下四種綁定規(guī)則逼龟，還說下new的執(zhí)行過程以及箭頭函數(shù)注意事項

• 面向?qū)ο蟮睦斫?滴滴一面問的，大概說了下理解以及實現(xiàn)追葡，從封裝腺律、繼承和多態(tài)上說了下es5和es6的實現(xiàn)方式

• 對于js這門語言你認(rèn)為怎么樣

哇，這個問題問的真的大宜肉。有看過《JavaScript語言精粹》匀钧，大概說了哪些弱類型語言通病，因為之前搞過Java谬返，所以綜合對比了下之斯，同時也說了這些詬病怎么解決。應(yīng)該會的面試官還是挺滿意的

• es6相關(guān)知識點

這個應(yīng)該回答的都不是很深入遣铝，大概我都用過佑刷，promise的實現(xiàn)方式也研究過莉擒，但是不記得哪一家公司問到generator的怎么實現(xiàn)的。大概從iterator上簡單說了自己的方案瘫絮，然后說沒看過啰劲。然后對于別的其實問的不是很多√春危基本套路就是es6了解過嗎蝇裤？用過哪些語法。后面具體可能會說下哪一個新特性的實現(xiàn)方式或者轉(zhuǎn)向babel频鉴、webpack的相關(guān)面試栓辜。

React部分

• react部分必考的肯定有生命周期

這里我大概說了下每一個生命周期，es5垛孔、es6的兩種書寫方式藕甩，以及每一個生命周期我們一般用來做些什么操作

• setState是異步的還是同步的

阿里一面的時候問到的，我大概說了兩種setState設(shè)置方式周荐，以及表現(xiàn)為同步的那種設(shè)置方式展開說了下

• 子組件和父組件componentDidMount哪一個先執(zhí)行

這個也大概從生命周期分期了下狭莱。話說我到現(xiàn)在還不知道自己回答的對不對，技友們概作，你們覺得呢腋妙？

• redux的一般流程

這個我比較熟悉，一帶說了下所有的技術(shù)棧讯榕，以及react-redux的原理骤素、高階組件、以及redux-saga的實現(xiàn)原理愚屁。（逮住會的济竹，都啪啪啪說出來，自己掌握點節(jié)奏霎槐。但是要適當(dāng)送浊，比如問到我es6，我啦啦啦說了一二十分鐘丘跌，一般面試官會有點不耐煩袭景。所以視情況而定）

• 如何設(shè)計一些組件，原則是什么碍岔，你寫過什么自豪或者眼前一亮的組件

阿里一面以及一家上市公司也聞到過這類似的問題浴讯，大概從組合朵夏、復(fù)用蔼啦、重復(fù)、測試仰猖、維護等方面說了下

• a組件在b組件內(nèi)捏肢，c組件在a組件內(nèi)奈籽，如何讓他渲染出來，a組件和c組件同級

阿里面試的時候問到的問題鸵赫，想了一會衣屏，說了不會。后來查了下辩棒，大概可以通過react16中返回不帶包裹元素的組件來實現(xiàn)狼忱。因為和阿里一面面試官后來聊得比較開心，加了微信一睁，還斗膽為了下他钻弄，他說還有曲線救國的實現(xiàn)方式

• react組件的優(yōu)化

從pureRenderMixin、ShouldComponentUpdate等方面說了下者吁，以及組件的設(shè)計和木偶組建的函數(shù)編寫方式說了下

• react組件的通信

這個大搞幾種方式也都說了下窘俺，prop，context（順道扯了react-redux的context實現(xiàn)方式）复凳、redux甚至廣播都說了一遍

• react 的virtual dom和diff算法的實現(xiàn)方式

阿里交叉面問的瘤泪，直接說實現(xiàn)方式源碼沒有看過，但是大概說了下原理和步驟育八，具體代碼怎么寫的不知道对途。

• MVC、MVVM了解么髓棋，數(shù)據(jù)雙向綁定和單向綁定實現(xiàn)方式

滴滴一面問的掀宋，實現(xiàn)方式還是說了不知道，然后說了下MVC和MVVM的設(shè)計模式仲锄，因為之前用過angular1劲妙，大概就說下臟檢查步驟以及view-model的作用

• react-router實現(xiàn)方式，單頁面應(yīng)用相關(guān)東西

大概說了下react-router的一般使用方式儒喊，以及沒有使用react-router的時候如何利用h5 的history API來實現(xiàn)路由跳轉(zhuǎn)等镣奋。

• react的ssr了解么？大概怎么實現(xiàn)

阿里的一面問的怀愧，在github上寫過demo侨颈，但是沒有用過別的第三方庫，這里我就大概說了下webpack的配置項以及大概的實現(xiàn)思路和注意事項芯义。

• react大概也就問了這么寫哈垢，別的就是具體的業(yè)務(wù)場景改怎么寫代碼怎么分析，比較不大眾扛拨，這里我就我細(xì)說了耘分。其實也就考驗?zāi)愕捻椖拷?jīng)驗吧。當(dāng)然，還有一些react Native的面試題求泰，比如常用組件央渣，和原生如何通信之類的，這些就有贊問的多渴频，但是因為RN玩的不是很透徹芽丹，所以對于交互原理都不是很明白。

瀏覽器

• http三次握手后拿到HTML卜朗，瀏覽器怎么加載

阿里的一面問的問題拔第，這個我之前在環(huán)球做過相關(guān)技術(shù)分享，所以大概都知道场钉，從過程到不同內(nèi)核差異（差異部分簡單提了下）說了下dom楼肪、CSSDom以及paint等過程。然后面試官接著問如何防止repaint和reflow惹悄。大概從引起repaint和reflow等操作上說了下避免春叫。網(wǎng)易的一面也問到了repaint和reflow。

• 前端優(yōu)化一般都做哪些

這個之前總結(jié)過泣港，雅虎的軍規(guī)啥的暂殖。以及首屏優(yōu)化。然后面試跟了些預(yù)加載http head信息相關(guān)的当纱，這個沒怎么看呛每，回答的不是很好

• 瀏覽器緩存

這個我也做了相關(guān)的技術(shù)分享，也看過《圖解http》大概從http 1.0和1.1都說了下坡氯，其中有一家公司問到200 From cache和200 ok區(qū)別（有贊）晨横，這個還真的忽略了，后來查了下大概了解了箫柳。其實也就是強緩存

• http常見狀態(tài)碼

從100~500 大概也說了十幾種手形。其實也就是《圖解http》中的東西，當(dāng)時還刻意背了下

• http2.0相關(guān)

網(wǎng)易一面問題悯恍，說了下2.0的采用二進制格式库糠、多路復(fù)用、報文頭壓縮涮毫、服務(wù)器主動推送還扯了websocket的相關(guān)內(nèi)容WebSocket：5分鐘從入門到精通瞬欧。然后網(wǎng)易接著問，報文頭怎么壓縮的罢防？我艘虎。。咒吐。野建？属划？不知道。贬墩。。然后大概也問了下https的TLS/SSL,之前看過漫畫的htts的相關(guān)東西妄呕，大概說了下漫畫里面的故事~

• post陶舞、get區(qū)別

這個回答的不是很好，也是一個大廠問的題目绪励，我回答的都是表象肿孵。后來我看了一篇文章，大概知道了疏魏。99%的人都理解錯了HTTP中GET與POST的區(qū)別

• 別的我也不記得了停做，回頭想起來在來補充吧

構(gòu)建工具

• 編寫過webpack的擴展嘛，Plugin或者loader

這個我看過一本書《深入淺出webpack》大莫，所以基本都能回答上來蛉腌。包括原理和編寫loader、Plugin注意事項只厘。當(dāng)然烙丛，我自己沒有寫過。羔味。河咽。《深入淺出webpack》

• babel 問的不多，但是我也準(zhǔn)備了赋元，包括每一個包的作用和內(nèi)部轉(zhuǎn)換過程忘蟹，不記得哪家公司問了，大概我也就說了下babel轉(zhuǎn)換的過程搁凸。