來(lái)自：https://juejin.im/post/5a64541bf265da3e2d338862

HTML & CSS 部分

• css常用布局

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

• BFC

這個(gè)滴滴面試的時(shí)候有問(wèn)道（滴滴是破例讓我加入流程中的，并且他們還招的技術(shù)棧是vue）一般在問(wèn)清除浮動(dòng)的時(shí)候會(huì)說(shuō)一下

• 居中問(wèn)題

這個(gè)應(yīng)該是老生常談的東西了，電話面試的時(shí)候有兩家問(wèn)到

• session、cookie、sessionStorage、localStorage等區(qū)別

這個(gè)也是上市公司和創(chuàng)業(yè)公司問(wèn)到，大概就是說(shuō)了下中間的區(qū)別，還有會(huì)簡(jiǎn)單說(shuō)下cookie的屬性，以及一些前端安全方面

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

滴滴電面的時(shí)候問(wèn)的，這個(gè)我也知道，大概說(shuō)了下相對(duì)于父元素還是文檔來(lái)確定大小之類(lèi)的。

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

這個(gè)我也就用了個(gè)大概，大概知道的簡(jiǎn)寫(xiě)位置和屬性，當(dāng)然，阿里一面還問(wèn)到，為什么動(dòng)畫(huà)推薦用c3而不是js，這個(gè)問(wèn)題當(dāng)時(shí)并沒(méi)有回答好，大概就是從性能上扯了扯，但是什么占用主線程以及瀏覽器對(duì)c3加速都沒(méi)聊到。然后網(wǎng)易面試也問(wèn)到了，然后我巴拉巴拉說(shuō)了下后來(lái)查的相關(guān)東西。然后網(wǎng)易問(wèn)了一句，瀏覽器怎么優(yōu)化的動(dòng)畫(huà)。。。我。。。不知道。

• css編寫(xiě)注意事項(xiàng)

因?yàn)檫@個(gè)在之前團(tuán)隊(duì)里面沒(méi)有明文規(guī)定，所以我也沒(méi)總結(jié)過(guò)，大概說(shuō)了下自己編碼中的方式，和瀏覽器查抄的過(guò)程。

• css和HTML 問(wèn)的的確都不是很多，然后還有什么標(biāo)簽，meta和media啥的，大概也就介紹了下，問(wèn)的都不是很深，我也沒(méi)有回答的很深。。。因?yàn)槲襀TML CSS真的一般般。

JavaScript部分

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

這是一個(gè)初創(chuàng)公司電面的問(wèn)題，問(wèn)的都非?；A(chǔ)，比如css畫(huà)三角形之類(lèi)的。別說(shuō)，之前沒(méi)準(zhǔn)備，還真的忘記了border怎么設(shè)置出現(xiàn)直角三角形還是等腰三角形。當(dāng)然，這個(gè)類(lèi)型還是。。。沒(méi)得說(shuō)的

• JavaScript閉包

這個(gè)應(yīng)該問(wèn)的都比較多，我之前總結(jié)過(guò)，以及常用的場(chǎng)景，也結(jié)合es6談了下作用域和單例模式談了下

• 前端跨域

這個(gè)我基本都知道，之前有在掘金上總結(jié)過(guò)，這個(gè)很多公司又問(wèn)道，包括阿里、網(wǎng)易一面。一般方式我都知道，具體展開(kāi)會(huì)把CORS跨域，heade信息字段都說(shuō)了一遍。也不難

• JavaScript繼承

這個(gè)我之前也總結(jié)過(guò)相關(guān)文章，網(wǎng)易的一面第二個(gè)面試官問(wèn)了，我大概從原型繼承、構(gòu)造函數(shù)繼承、組合繼承、寄生組合繼承優(yōu)缺點(diǎn)和實(shí)現(xiàn)方式都說(shuō)了下，還有es6的實(shí)現(xiàn)方式。一般這樣就回答差不多了。后來(lái)網(wǎng)易還接著問(wèn)，es5如何實(shí)現(xiàn)super關(guān)鍵字?？催^(guò)babel轉(zhuǎn)換后代碼，但是這個(gè)。。真的忘記看了。大概說(shuō)了下自己的實(shí)現(xiàn)思路，也就是裝飾著模式。然后也就渾過(guò)這題了。

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

滴滴一面問(wèn)到了，阿里交叉面的時(shí)候聊業(yè)務(wù)場(chǎng)景的時(shí)候，也有問(wèn)到。之前看過(guò)文章，自己項(xiàng)目中也用過(guò)，所以大概知道些

• JavaScript的事件

阿里交叉面問(wèn)到的js事件執(zhí)行機(jī)制。我大概談了下event loop，microtask，task queue。然后事件委托、捕獲、冒泡、目標(biāo)階段大概談了下，也順道談了下target和currentTarget。

• ajax請(qǐng)求方式

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

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

貌似有兩家公司問(wèn)到，大概說(shuō)了下typeof、instanceof、constructor、prototype等判斷方式，注意事項(xiàng)以及優(yōu)缺點(diǎn)。應(yīng)該回答的還可以

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

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

• this指向的問(wèn)題

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

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

• 對(duì)于js這門(mén)語(yǔ)言你認(rèn)為怎么樣

哇，這個(gè)問(wèn)題問(wèn)的真的大。有看過(guò)《JavaScript語(yǔ)言精粹》，大概說(shuō)了哪些弱類(lèi)型語(yǔ)言通病，因?yàn)橹案氵^(guò)Java，所以綜合對(duì)比了下，同時(shí)也說(shuō)了這些詬病怎么解決。應(yīng)該會(huì)的面試官還是挺滿(mǎn)意的

• es6相關(guān)知識(shí)點(diǎn)

這個(gè)應(yīng)該回答的都不是很深入，大概我都用過(guò)，promise的實(shí)現(xiàn)方式也研究過(guò)，但是不記得哪一家公司問(wèn)到generator的怎么實(shí)現(xiàn)的。大概從iterator上簡(jiǎn)單說(shuō)了自己的方案，然后說(shuō)沒(méi)看過(guò)。然后對(duì)于別的其實(shí)問(wèn)的不是很多。基本套路就是es6了解過(guò)嗎？用過(guò)哪些語(yǔ)法。后面具體可能會(huì)說(shuō)下哪一個(gè)新特性的實(shí)現(xiàn)方式或者轉(zhuǎn)向babel、webpack的相關(guān)面試。

React部分

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

這里我大概說(shuō)了下每一個(gè)生命周期，es5、es6的兩種書(shū)寫(xiě)方式，以及每一個(gè)生命周期我們一般用來(lái)做些什么操作

• setState是異步的還是同步的

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

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

這個(gè)也大概從生命周期分期了下。話說(shuō)我到現(xiàn)在還不知道自己回答的對(duì)不對(duì)，技友們，你們覺(jué)得呢？

• redux的一般流程

這個(gè)我比較熟悉，一帶說(shuō)了下所有的技術(shù)棧，以及react-redux的原理、高階組件、以及redux-saga的實(shí)現(xiàn)原理。（逮住會(huì)的，都啪啪啪說(shuō)出來(lái)，自己掌握點(diǎn)節(jié)奏。但是要適當(dāng)，比如問(wèn)到我es6，我啦啦啦說(shuō)了一二十分鐘，一般面試官會(huì)有點(diǎn)不耐煩。所以視情況而定）

• 如何設(shè)計(jì)一些組件，原則是什么，你寫(xiě)過(guò)什么自豪或者眼前一亮的組件

阿里一面以及一家上市公司也聞到過(guò)這類(lèi)似的問(wèn)題，大概從組合、復(fù)用、重復(fù)、測(cè)試、維護(hù)等方面說(shuō)了下

• a組件在b組件內(nèi)，c組件在a組件內(nèi)，如何讓他渲染出來(lái)，a組件和c組件同級(jí)

阿里面試的時(shí)候問(wèn)到的問(wèn)題，想了一會(huì)，說(shuō)了不會(huì)。后來(lái)查了下，大概可以通過(guò)react16中返回不帶包裹元素的組件來(lái)實(shí)現(xiàn)。因?yàn)楹桶⒗镆幻婷嬖嚬俸髞?lái)聊得比較開(kāi)心，加了微信，還斗膽為了下他，他說(shuō)還有曲線救國(guó)的實(shí)現(xiàn)方式

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

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

• react組件的通信

這個(gè)大搞幾種方式也都說(shuō)了下，prop，context（順道扯了react-redux的context實(shí)現(xiàn)方式）、redux甚至廣播都說(shuō)了一遍

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

阿里交叉面問(wèn)的，直接說(shuō)實(shí)現(xiàn)方式源碼沒(méi)有看過(guò)，但是大概說(shuō)了下原理和步驟，具體代碼怎么寫(xiě)的不知道。

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

滴滴一面問(wèn)的，實(shí)現(xiàn)方式還是說(shuō)了不知道，然后說(shuō)了下MVC和MVVM的設(shè)計(jì)模式，因?yàn)橹坝眠^(guò)angular1，大概就說(shuō)下臟檢查步驟以及view-model的作用

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

大概說(shuō)了下react-router的一般使用方式，以及沒(méi)有使用react-router的時(shí)候如何利用h5 的history API來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn)等。

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

阿里的一面問(wèn)的，在github上寫(xiě)過(guò)demo，但是沒(méi)有用過(guò)別的第三方庫(kù)，這里我就大概說(shuō)了下webpack的配置項(xiàng)以及大概的實(shí)現(xiàn)思路和注意事項(xiàng)。

• react大概也就問(wèn)了這么寫(xiě)，別的就是具體的業(yè)務(wù)場(chǎng)景改怎么寫(xiě)代碼怎么分析，比較不大眾，這里我就我細(xì)說(shuō)了。其實(shí)也就考驗(yàn)?zāi)愕捻?xiàng)目經(jīng)驗(yàn)吧。當(dāng)然，還有一些react Native的面試題，比如常用組件，和原生如何通信之類(lèi)的，這些就有贊問(wèn)的多，但是因?yàn)镽N玩的不是很透徹，所以對(duì)于交互原理都不是很明白。

瀏覽器

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

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

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

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

• 瀏覽器緩存

這個(gè)我也做了相關(guān)的技術(shù)分享，也看過(guò)《圖解http》大概從http 1.0和1.1都說(shuō)了下，其中有一家公司問(wèn)到200 From cache和200 ok區(qū)別（有贊），這個(gè)還真的忽略了，后來(lái)查了下大概了解了。其實(shí)也就是強(qiáng)緩存

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

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

• http2.0相關(guān)

網(wǎng)易一面問(wèn)題，說(shuō)了下2.0的采用二進(jìn)制格式、多路復(fù)用、報(bào)文頭壓縮、服務(wù)器主動(dòng)推送還扯了websocket的相關(guān)內(nèi)容WebSocket：5分鐘從入門(mén)到精通。然后網(wǎng)易接著問(wèn)，報(bào)文頭怎么壓縮的？我。。。？？不知道。。。然后大概也問(wèn)了下https的TLS/SSL,之前看過(guò)漫畫(huà)的htts的相關(guān)東西，大概說(shuō)了下漫畫(huà)里面的故事~

• post、get區(qū)別

這個(gè)回答的不是很好，也是一個(gè)大廠問(wèn)的題目，我回答的都是表象。后來(lái)我看了一篇文章，大概知道了。99%的人都理解錯(cuò)了HTTP中GET與POST的區(qū)別

• 別的我也不記得了，回頭想起來(lái)在來(lái)補(bǔ)充吧

構(gòu)建工具

• 編寫(xiě)過(guò)webpack的擴(kuò)展嘛，Plugin或者loader

這個(gè)我看過(guò)一本書(shū)《深入淺出webpack》，所以基本都能回答上來(lái)。包括原理和編寫(xiě)loader、Plugin注意事項(xiàng)。當(dāng)然，我自己沒(méi)有寫(xiě)過(guò)。。。《深入淺出webpack》

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