這篇文章不適合拿到 BAT 的大佬及自制力特別差的人

本文只是提供復(fù)習(xí)的思路，以及我自己的一些面經(jīng)，并沒(méi)有具體的題目

基本情況

據(jù)說(shuō)先把 offer 亮出來(lái)才能吸引你們看下去。目前一共有五個(gè)。分別是順豐，拼多多，遠(yuǎn)景智能，老虎證券和貝殼。其實(shí)拿到拼多多以后很多筆試面試就沒(méi)有繼續(xù)參加了，比如蘇寧，虎牙的面試都沒(méi)有去。還有一些直接筆試就拒了。因?yàn)檫^(guò)了也不會(huì)去，所以也就不敗人品了。

再說(shuō)一下我的情況吧，本科專業(yè)是礦物加工，當(dāng)時(shí)連 c 語(yǔ)言都沒(méi)學(xué)過(guò)，只學(xué)過(guò)一門(mén)你們可能聽(tīng)都沒(méi)聽(tīng)過(guò)的 VB。然后考研考到了計(jì)算機(jī)的專業(yè)，兩年，所以已經(jīng)過(guò)去一年多了。然后剛開(kāi)始的話也不是做前端，其實(shí)真正接觸前端開(kāi)發(fā)是去年 11 月左右。但是真的開(kāi)始系統(tǒng)的學(xué)習(xí)應(yīng)該是今年 4 月左右。因?yàn)槠鋵?shí)實(shí)驗(yàn)室開(kāi)發(fā)的話用的東西不難，很多東西用不到，所以當(dāng)時(shí)直接開(kāi)發(fā)問(wèn)題也不是特別大，但是現(xiàn)在看起來(lái)真是太菜了。比如今年四月左右嘗試了一下騰訊的實(shí)習(xí)，因?yàn)閷?shí)驗(yàn)室和自己技術(shù)的原因，所以只嘗試了這一家。不過(guò)你們就可以通過(guò)這一家判斷出我當(dāng)時(shí)的水平了。當(dāng)時(shí)有這么一題，寫(xiě)一個(gè)閉包，每次調(diào)用的時(shí)候自加 1。怎么樣是不是很簡(jiǎn)單，那我當(dāng)時(shí)是怎么寫(xiě)的呢

var a = 0;
function add1(){
    return a++;
}

沒(méi)錯(cuò)，我就是這么寫(xiě)的，今年 4 月的時(shí)候。所以也應(yīng)該大概知道我當(dāng)時(shí)的水平吧。

之所以說(shuō)這些呢，是給大家打個(gè)氣，菜沒(méi)關(guān)系，但是不能一直菜。所以也是告訴大家，如果真想學(xué)好，并且有興趣的話是可以學(xué)好的。先說(shuō)一下我準(zhǔn)備的過(guò)程吧，給大家做個(gè)參考。

準(zhǔn)備過(guò)程

大概就是實(shí)習(xí)結(jié)束之后就開(kāi)始準(zhǔn)備了。因?yàn)槟菚r(shí)還有課，實(shí)驗(yàn)室還有項(xiàng)目，所以復(fù)習(xí)的比較慢，花了大概兩個(gè)月左右把紅寶書(shū)看了第一遍，基本上每一章都看了。這個(gè)過(guò)程雖然記住的東西不多，而且很多東西可能理解不了，但是會(huì)讓你多很多東西有個(gè)基本的概念。為第二遍做準(zhǔn)備。沒(méi)錯(cuò)，這本書(shū)看一遍遠(yuǎn)遠(yuǎn)不夠，你還要看第二遍，而且要整理，最重要的是復(fù)習(xí)。我相信看一遍的人很多，看第二遍的人也有。但是看的時(shí)候整理并且經(jīng)常復(fù)習(xí)的人可能并沒(méi)有那么多。當(dāng)然第二遍整理的時(shí)候你需要有復(fù)習(xí)的思路（后面我會(huì)提供給大家，可以做個(gè)參考）。第二遍的時(shí)候不能有不理解的地方了，原型，繼承，原型鏈，執(zhí)行上下文，垃圾回收，作用域鏈書(shū)上講的不清楚，看不懂的去網(wǎng)上找，還是不懂自己用例子測(cè)試。第二遍一定要弄懂，除非你想來(lái)第三遍。第二遍的話總結(jié)只總結(jié)重點(diǎn)的幾章我就整理了九萬(wàn)多字，并且那段時(shí)間每天早上都會(huì)復(fù)習(xí)一下，8 點(diǎn)復(fù)習(xí)，9 點(diǎn)左右結(jié)束，其實(shí)有點(diǎn)太多了。導(dǎo)致自己都快背下來(lái)了。后來(lái)的話感覺(jué)每天把前一天整理的復(fù)習(xí)一下，每個(gè)星期把所有的復(fù)習(xí)一下可能更合適一些，也有更多時(shí)間看別的。

那段時(shí)間除了看這個(gè)的話還在看 vue 和 webpack，ES6 標(biāo)準(zhǔn)入門(mén)，圖解 http（稍微翻了一下 http 權(quán)威指南）。后來(lái)因?yàn)楦杏X(jué)自己一個(gè)跨專業(yè)的基礎(chǔ)比較差，所以還是把精力放在基礎(chǔ)上比較好，就暫時(shí)把 vue 和 webpack 放下了。開(kāi)始看你不知道的 JavaScript。ES6 標(biāo)準(zhǔn)入門(mén)的話也不用都看，也是要有重點(diǎn)的看，當(dāng)然這些都是針對(duì)找工作來(lái)說(shuō)的。還是一樣的，總結(jié)和復(fù)習(xí)缺一不可。

后面的話開(kāi)始看你不知道的 JavaScript，解決了我對(duì)于 this 指向的疑惑，剛開(kāi)始的話看上中兩卷就好，后面有時(shí)間可以再看下。

然后提前批就開(kāi)始了。因?yàn)樽约罕旧硭憧鐚I(yè)，加上沒(méi)有實(shí)習(xí)，學(xué)習(xí)的時(shí)間不長(zhǎng)，所以從開(kāi)始的時(shí)候就積極投簡(jiǎn)歷了。不管是什么崗位，我都建議提前批開(kāi)始投遞簡(jiǎn)歷，當(dāng)然，是在我前面說(shuō)的那些準(zhǔn)備工作都做的差不多的情況下。如果你什么都沒(méi)做，我覺(jué)得可能安心復(fù)習(xí)是更好的選擇。

開(kāi)始面試以后，肯定有好多東西不會(huì)，可以通過(guò)寫(xiě)面經(jīng)，總結(jié)的方式來(lái)彌補(bǔ)自己的缺陷，不能面完了就結(jié)束了。這樣同樣的問(wèn)題你永遠(yuǎn)不會(huì)。比如剛開(kāi)始我對(duì) BFC，防抖節(jié)流，性能優(yōu)化等根本不了解，后面的話也通過(guò)面試，面試完查資料了解了。這里想說(shuō)的就是不懂就要問(wèn)，要查，而不是過(guò)。

后面的話自己了解的東西就比較多了，高性能 js，js 忍者秘籍，前幾天的話也是剛看完 js 函數(shù)式編程，最近又把 http 抓包實(shí)戰(zhàn)看完了，了解了抓包相關(guān)的東西。

前面的話是自己復(fù)習(xí)的一些經(jīng)歷。里面對(duì)框架說(shuō)的比較少，這里說(shuō)一下原因。首先我是跨專業(yè)的，基礎(chǔ)差，基礎(chǔ)都沒(méi)打好怎么看框架。比如你讓一個(gè)會(huì)用 jquery 的 ajax 的人封裝一個(gè)原生的 ajax，可能他們不會(huì)，但是我會(huì)。所以框架固然重要，但是基礎(chǔ)是最重要的。當(dāng)然框架里面的一些好的思想你還是要了解的。比如虛擬 dom，diff 算法，vue 雙向綁定實(shí)現(xiàn)這些東西。你可以沒(méi)用過(guò)框架，但是這里面的原理你需要花時(shí)間去了解。

復(fù)習(xí)思路

下面是我從開(kāi)始找工作時(shí)整理的一些面經(jīng)，大家可以參考一下。

2018 秋招前端面試總結(jié)

有些可能沒(méi)有，因?yàn)楝F(xiàn)場(chǎng)面的時(shí)候是連著面的，所以沒(méi)有整理的時(shí)間，回去的時(shí)候都忘的差不多了，而且大多數(shù)都是類似的問(wèn)題，可能少數(shù)幾個(gè)不一樣，也不值得整理了。所以有些可能沒(méi)有。

其實(shí)開(kāi)始復(fù)習(xí)之前也整理過(guò)別人的面經(jīng)，大致都差不多。我這里就不提供具體的問(wèn)題了，因?yàn)橛泻枚嗳苏磉^(guò)了，所以可以參考他們。但是你在看別人整理的內(nèi)容之前，最好自己已經(jīng)了解一部分了。因?yàn)閯e人整理的東西為了簡(jiǎn)潔可能會(huì)把一些幫助理解的東西去掉，所以相當(dāng)于你看到的只是結(jié)論。你看別人整理的東西的時(shí)候，最好是用來(lái)查缺補(bǔ)漏，而不是用來(lái)學(xué)習(xí)。

JavaScript 基礎(chǔ)

重點(diǎn) js 高級(jí)程序設(shè)計(jì) 3 - 7 章，10 - 13 章，21 章

首先，基礎(chǔ)知識(shí)一定要扎實(shí)。怎么樣算扎實(shí)呢，舉個(gè)例子吧，每個(gè)對(duì)象都有的 tostring 和 valueOf，誰(shuí)能說(shuō)出什么情況下觸發(fā)哪一個(gè)

var obj = {}
console.log(obj);
console.log(+obj);
console.log(obj=={});
console.log(obj==={})
console.log(obj=='test')
console.log(obj==='test')

很多人只是過(guò)了一下，就比如別人整理的東西上面肯定不會(huì)說(shuō)的特別詳細(xì)，他只是給你個(gè)結(jié)論，所以你親自試過(guò)嗎？怎么試呢，其實(shí)很簡(jiǎn)單啊

var obj = {
    toString:function(){
        console.log('toString')
        return Object.prototype.toString.call(this)
    },
    valueOf:function(){
        console.log('valueOf')
        return Object.prototype.valueOf.call(this)
    }
}
alert(obj);
alert(+obj);
alert(obj=={});
alert(obj==={})
alert(obj=='test')
alert(obj==='test')

很簡(jiǎn)單就能測(cè)試出來(lái)什么時(shí)候用 valueOf 和 toString 了。

再比如數(shù)組哪些方法會(huì)改變?cè)瓟?shù)組，哪些不會(huì)。其實(shí)這些書(shū)上都有，但是沒(méi)有專門(mén)總結(jié)。因?yàn)榭偨Y(jié)不是書(shū)的事，書(shū)只負(fù)責(zé)教你知識(shí)，總結(jié)是你自己的事。一輩子不總結(jié)，一輩子都記不清。因?yàn)槲乙彩菑倪@種狀態(tài)走過(guò)來(lái)的，所以希望大家學(xué)完一點(diǎn)東西以后總結(jié)一下，過(guò)段時(shí)間看一下。

如果你這兩個(gè)都想的磕磕絆絆可能得看一下基礎(chǔ)部分的內(nèi)容。

網(wǎng)絡(luò)

重點(diǎn)圖解 http，極客時(shí)間的趣談網(wǎng)絡(luò)協(xié)議，博客

基礎(chǔ)差不多了，還要看網(wǎng)絡(luò)的東西，如果做開(kāi)發(fā)的話，前后臺(tái)都需要好好了解網(wǎng)絡(luò)的知識(shí)。具體有 http，http 2.0，https，dns，cdn，tcp，緩存，跨域，安全，本地存儲(chǔ)這些東西。前面那些計(jì)算機(jī)網(wǎng)絡(luò)的東西可以通過(guò)圖解 http 來(lái)做個(gè)大概的了解。這里想推薦極客時(shí)間的一門(mén)課程趣談網(wǎng)絡(luò)協(xié)議。如果有想試聽(tīng)的可以加我微信，通過(guò)我的鏈接購(gòu)買的返利我也會(huì)返還給你，微信和鏈接放在最后。因?yàn)槲抑耙彩翘貏e頭疼網(wǎng)絡(luò)這方面的東西，不過(guò)聽(tīng)了以后就感覺(jué)好多了，甚至還能說(shuō)下 quic 協(xié)議來(lái)裝個(gè)逼。每天早上，中午晚上去學(xué)校實(shí)驗(yàn)室的路上聽(tīng)一下，反復(fù)聽(tīng)，這點(diǎn)東西聽(tīng)一個(gè)月就算弱智也能聽(tīng)會(huì)了。當(dāng)然也要自己總結(jié)一下，因?yàn)橛行┲v的不是那么清楚，比如 https 的 pre-matser 那里，這就需要你自己去查一下。對(duì)于跨域，緩存，安全這些東西網(wǎng)上一找一大堆，我自己也整理過(guò)，所以也不是特別難，可能剛開(kāi)始了解的不多，會(huì)覺(jué)得好難，其實(shí)看下來(lái)以后會(huì)覺(jué)得沒(méi)那么難。這里特別要注意的就是 cookie 的一些屬性，需要記一下。

html 和 css

css 權(quán)威指南 2、3、7、8、10 章，w3c，博客

html 首先要理解語(yǔ)義化，然后就是一些語(yǔ)義化的標(biāo)簽。語(yǔ)義化的好處，新增的一些特性。給你一個(gè)頁(yè)面結(jié)構(gòu)要能使用語(yǔ)義化標(biāo)簽準(zhǔn)確還原。

css 這部分的話其實(shí)考的比較多的是一些實(shí)際的東西，但是首先基礎(chǔ)你要知道。比如最基本的盒模型，還有一些 css3 新增的選擇器，屬性等。然后最經(jīng)常的就是讓你實(shí)現(xiàn)三欄兩欄布局，所以基本的布局方式你也要了解吧。然后就是垂直居中，移動(dòng)端適配等考的比較多。這些東西其實(shí)都是需要自己整理，然后一段時(shí)間復(fù)習(xí)一下。

ES6

重點(diǎn) ES6 標(biāo)準(zhǔn)入門(mén) 2、3、7、11、14、16、18、19、22、23

ES6 重要且常用的特性基本都在這里面的，具體常問(wèn)的有 let const，class，箭頭函數(shù)，promise，async await，module 模塊化。

算法

重點(diǎn)劍指 offer?。?！

面試考的算法題 90% 都是劍指 offer 上面的，所以劍指 offer 也一定要好好刷，經(jīng)常刷，刷完了繼續(xù)刷。這樣面試的時(shí)候 90% 以上的算法題就沒(méi)有問(wèn)題了。但是如果筆試想表現(xiàn)的好一點(diǎn)的話可能就得刷 leetcode 了。但是我覺(jué)得還是得首先把基礎(chǔ)概念弄懂了再刷比較好，最近極客時(shí)間也新開(kāi)了一門(mén)算法課。想報(bào)名的可以通過(guò)我的鏈接，加我微信，返利我也會(huì)返給你。當(dāng)然，算法是長(zhǎng)時(shí)間的事，就算不是為了面試也建議一段時(shí)間刷幾題。

框架

博客，視頻

框架方面雖然我暫時(shí)了解的不多，但是下半年也準(zhǔn)備花時(shí)間在這上面還有 nodejs 上面。就算你不會(huì)，下面這幾個(gè)問(wèn)題你也要弄懂。

mvvm 和 mvc 的區(qū)別，雙向綁定原理，虛擬 dom、diff 算法，spa 原理。

模塊化、工程化

這一塊的話 ES6 標(biāo)準(zhǔn)入門(mén)里面有，讓后網(wǎng)上也很多，最主要的是自己實(shí)現(xiàn)一下，然后比較里面的不同。因?yàn)閷?shí)驗(yàn)室技術(shù)比較落后，這方面的東西沒(méi)有用過(guò)，所以我也只是通過(guò)簡(jiǎn)單的 demo 測(cè)試過(guò)他們中的一些區(qū)別，了解的也不是特別深。但是一定要親自動(dòng)手實(shí)現(xiàn)。這樣才能加深自己對(duì)這方面的理解

這些東西你準(zhǔn)備好的話，基本一面就沒(méi)問(wèn)題了。但是如果想進(jìn)大廠的話，計(jì)算機(jī)基礎(chǔ)，后臺(tái)的東西你都要有所了解，因?yàn)榇蠹夷芰Χ疾畈欢啵悦嬖嚬僮钪匾暤倪€是你的基礎(chǔ)。

總結(jié)

剛開(kāi)始的時(shí)候肯定是看書(shū)，形成完整的知識(shí)體系。然后針對(duì)某些重點(diǎn)逐個(gè)攻破。最后的話可以看一些他人整理的資料，面經(jīng)，查缺補(bǔ)漏，經(jīng)?？偨Y(jié)。這里面最重要的就是經(jīng)常復(fù)習(xí)，有代碼一定要寫(xiě)代碼。最忌諱的就是看完就結(jié)束，不總結(jié)，不復(fù)習(xí)，這樣知識(shí)留存率太低了，可能你暫時(shí)記下來(lái)了，但是過(guò)段時(shí)間就忘了。重要的函數(shù)要背下來(lái)，比如我經(jīng)常每天隔幾天寫(xiě)一下深拷貝，防抖節(jié)流，compose 函數(shù)，apply，bind，call 的實(shí)現(xiàn)等。這些常用的我覺(jué)得考到的可能比較大，并且能加深自己的理解。

當(dāng)然了，通過(guò)寫(xiě)博客的形式來(lái)總結(jié)最好不過(guò)了，因?yàn)橛腥伺c你互動(dòng)，所以能夠提高你的學(xué)習(xí)積極性，但是需要注意版權(quán)的問(wèn)題，從書(shū)上整理的內(nèi)容如果大規(guī)模引用的話，最好標(biāo)注出處。而且如果有面試官問(wèn)到的話，經(jīng)常寫(xiě)博客也是個(gè)加分項(xiàng)。接下來(lái)準(zhǔn)備把計(jì)算機(jī)基礎(chǔ)，算法，框架，nodejs 這些東西補(bǔ)一補(bǔ)。雖然秋招結(jié)束了，但是學(xué)習(xí)是一輩子的事情。

到此這篇關(guān)于2019web前端面試總結(jié)(內(nèi)附面經(jīng))的文章就介紹到這了,更多相關(guān)web前端面試內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論