1. 程式人生 > >2019 web 前端面試總結(內附面經)

2019 web 前端面試總結(內附面經)

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

本文只是提供複習的思路,以及我自己的一些面經,並沒有具體的題目

基本情況

據說先把 offer 亮出來才能吸引你們看下去。目前一共有五個。分別是順豐,拼多多,遠景智慧,老虎證券和貝殼。其實拿到拼多多以後很多筆試面試就沒有繼續參加了,比如蘇寧,虎牙的面試都沒有去。還有一些直接筆試就拒了。因為過了也不會去,所以也就不敗人品了。

再說一下我的情況吧,本科專業是礦物加工,當時連 c 語言都沒學過,只學過一門你們可能聽都沒聽過的 VB。然後考研考到了計算機的專業,兩年,所以已經過去一年多了。然後剛開始的話也不是做前端,其實真正接觸前端開發是去年 11 月左右。但是真的開始系統的學習應該是今年 4 月左右。因為其實實驗室開發的話用的東西不難,很多東西用不到,所以當時直接開發問題也不是特別大,但是現在看起來真是太菜了。比如今年四月左右嘗試了一下騰訊的實習,因為實驗室和自己技術的原因,所以只嘗試了這一家。不過你們就可以通過這一家判斷出我當時的水平了。當時有這麼一題,寫一個閉包,每次呼叫的時候自加 1。怎麼樣是不是很簡單,那我當時是怎麼寫的呢

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

沒錯,我就是這麼寫的,今年 4 月的時候。所以也應該大概知道我當時的水平吧。

之所以說這些呢,是給大家打個氣,菜沒關係,但是不能一直菜。所以也是告訴大家,如果真想學好,並且有興趣的話是可以學好的。先說一下我準備的過程吧,給大家做個參考。

準備過程

大概就是實習結束之後就開始準備了。因為那時還有課,實驗室還有專案,所以複習的比較慢,花了大概兩個月左右把紅寶書看了第一遍,基本上每一章都看了。這個過程雖然記住的東西不多,而且很多東西可能理解不了,但是會讓你多很多東西有個基本的概念。為第二遍做準備。沒錯,這本書看一遍遠遠不夠,你還要看第二遍,而且要整理,最重要的是複習

。我相信看一遍的人很多,看第二遍的人也有。但是看的時候整理並且經常複習的人可能並沒有那麼多。當然第二遍整理的時候你需要有複習的思路(後面我會提供給大家,可以做個參考)。第二遍的時候不能有不理解的地方了,原型,繼承,原型鏈,執行上下文,垃圾回收,作用域鏈書上講的不清楚,看不懂的去網上找,還是不懂自己用例子測試。第二遍一定要弄懂,除非你想來第三遍。第二遍的話總結只總結重點的幾章我就整理了九萬多字,並且那段時間每天早上都會複習一下,8 點複習,9 點左右結束,其實有點太多了。導致自己都快背下來了。後來的話感覺每天把前一天整理的複習一下,每個星期把所有的複習一下可能更合適一些,也有更多時間看別的。

那段時間除了看這個的話還在看 vue 和 webpack,ES6 標準入門,圖解 http(稍微翻了一下 http 權威指南)。後來因為感覺自己一個跨專業的基礎比較差,所以還是把精力放在基礎上比較好,就暫時把 vue 和 webpack 放下了。開始看你不知道的 JavaScript。ES6 標準入門的話也不用都看,也是要有重點的看,當然這些都是針對找工作來說的。還是一樣的,總結和複習缺一不可。

後面的話開始看你不知道的 JavaScript,解決了我對於 this 指向的疑惑,剛開始的話看上中兩卷就好,後面有時間可以再看下。

然後提前批就開始了。因為自己本身算跨專業,加上沒有實習,學習的時間不長,所以從開始的時候就積極投簡歷了。不管是什麼崗位,我都建議提前批開始投遞簡歷,當然,是在我前面說的那些準備工作都做的差不多的情況下。如果你什麼都沒做,我覺得可能安心複習是更好的選擇。

開始面試以後,肯定有好多東西不會,可以通過寫面經,總結的方式來彌補自己的缺陷,不能面完了就結束了。這樣同樣的問題你永遠不會。比如剛開始我對 BFC,防抖節流,效能優化等根本不瞭解,後面的話也通過面試,面試完查資料瞭解了。這裡想說的就是不懂就要問,要查,而不是過。

後面的話自己瞭解的東西就比較多了,高效能 js,js 忍者祕籍,前幾天的話也是剛看完 js 函數語言程式設計,最近又把 http 抓包實戰看完了,瞭解了抓包相關的東西。

前面的話是自己複習的一些經歷。裡面對框架說的比較少,這裡說一下原因。首先我是跨專業的,基礎差,基礎都沒打好怎麼看框架。比如你讓一個會用 jquery 的 ajax 的人封裝一個原生的 ajax,可能他們不會,但是我會。所以框架固然重要,但是基礎是最重要的。當然框架裡面的一些好的思想你還是要了解的。比如虛擬 dom,diff 演算法,vue 雙向繫結實現這些東西。你可以沒用過框架,但是這裡面的原理你需要花時間去了解。

複習思路

下面是我從開始找工作時整理的一些面經,大家可以參考一下。

有些可能沒有,因為現場面的時候是連著面的,所以沒有整理的時間,回去的時候都忘的差不多了,而且大多數都是類似的問題,可能少數幾個不一樣,也不值得整理了。所以有些可能沒有。

其實開始複習之前也整理過別人的面經,大致都差不多。我這裡就不提供具體的問題了,因為有好多人整理過了,所以可以參考他們。但是你在看別人整理的內容之前,最好自己已經瞭解一部分了。因為別人整理的東西為了簡潔可能會把一些幫助理解的東西去掉,所以相當於你看到的只是結論。你看別人整理的東西的時候,最好是用來查缺補漏,而不是用來學習

JavaScript 基礎

重點 js 高階程式設計 3 - 7 章,10 - 13 章,21 章

首先,基礎知識一定要紮實。怎麼樣算紮實呢,舉個例子吧,每個物件都有的 tostring 和 valueOf,誰能說出什麼情況下觸發哪一個

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

很多人只是過了一下,就比如別人整理的東西上面肯定不會說的特別詳細,他只是給你個結論,所以你親自試過嗎?怎麼試呢,其實很簡單啊

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')

很簡單就能測試出來什麼時候用 valueOf 和 toString 了。

再比如陣列哪些方法會改變原陣列,哪些不會。其實這些書上都有,但是沒有專門總結。因為總結不是書的事,書只負責教你知識,總結是你自己的事。一輩子不總結,一輩子都記不清。因為我也是從這種狀態走過來的,所以希望大家學完一點東西以後總結一下,過段時間看一下。

如果你這兩個都想的磕磕絆絆可能得看一下基礎部分的內容。

網路

重點圖解 http,極客時間的趣談網路協議,部落格

基礎差不多了,還要看網路的東西,如果做開發的話,前後臺都需要好好了解網路的知識。具體有 http,http 2.0,https,dns,cdn,tcp,快取,跨域,安全,本地儲存這些東西。前面那些計算機網路的東西可以通過圖解 http 來做個大概的瞭解。這裡想推薦極客時間的一門課程趣談網路協議。如果有想試聽的可以加我微信,通過我的連結購買的返利我也會返還給你,微信和連結放在最後。因為我之前也是特別頭疼網路這方面的東西,不過聽了以後就感覺好多了,甚至還能說下 quic 協議來裝個逼。每天早上,中午晚上去學校實驗室的路上聽一下,反覆聽,這點東西聽一個月就算弱智也能聽會了。當然也要自己總結一下,因為有些講的不是那麼清楚,比如 https 的 pre-matser 那裡,這就需要你自己去查一下。對於跨域,快取,安全這些東西網上一找一大堆,我自己也整理過,所以也不是特別難,可能剛開始瞭解的不多,會覺得好難,其實看下來以後會覺得沒那麼難。這裡特別要注意的就是 cookie 的一些屬性,需要記一下。

html 和 css

css 權威指南 2、3、7、8、10 章,w3c,部落格

html 首先要理解語義化,然後就是一些語義化的標籤。語義化的好處,新增的一些特性。給你一個頁面結構要能使用語義化標籤準確還原。

css 這部分的話其實考的比較多的是一些實際的東西,但是首先基礎你要知道。比如最基本的盒模型,還有一些 css3 新增的選擇器,屬性等。然後最經常的就是讓你實現三欄兩欄佈局,所以基本的佈局方式你也要了解吧。然後就是垂直居中,移動端適配等考的比較多。這些東西其實都是需要自己整理,然後一段時間複習一下。

ES6

重點 ES6 標準入門 2、3、7、11、14、16、18、19、22、23

ES6 重要且常用的特性基本都在這裡面的,具體常問的有 let const,class,箭頭函式,promise,async await,module 模組化。

演算法

重點劍指 offer!!!

面試考的演算法題 90% 都是劍指 offer 上面的,所以劍指 offer 也一定要好好刷,經常刷,刷完了繼續刷。這樣面試的時候 90% 以上的演算法題就沒有問題了。但是如果筆試想表現的好一點的話可能就得刷 leetcode 了。但是我覺得還是得首先把基礎概念弄懂了再刷比較好,最近極客時間也新開了一門演算法課。想報名的可以通過我的連結,加我微信,返利我也會返給你。當然,演算法是長時間的事,就算不是為了面試也建議一段時間刷幾題。

框架

部落格,視訊

框架方面雖然我暫時瞭解的不多,但是下半年也準備花時間在這上面還有 nodejs 上面。就算你不會,下面這幾個問題你也要弄懂。

mvvm 和 mvc 的區別,雙向繫結原理,虛擬 dom、diff 演算法,spa 原理。

模組化、工程化

這一塊的話 ES6 標準入門裡面有,讓後網上也很多,最主要的是自己實現一下,然後比較裡面的不同。因為實驗室技術比較落後,這方面的東西沒有用過,所以我也只是通過簡單的 demo 測試過他們中的一些區別,瞭解的也不是特別深。但是一定要親自動手實現。這樣才能加深自己對這方面的理解

這些東西你準備好的話,基本一面就沒問題了。但是如果想進大廠的話,計算機基礎,後臺的東西你都要有所瞭解,因為大家能力都差不多,所以面試官最重視的還是你的基礎。

總結

剛開始的時候肯定是看書,形成完整的知識體系。然後針對某些重點逐個攻破。最後的話可以看一些他人整理的資料,面經,查缺補漏,經常總結。這裡面最重要的就是經常複習,有程式碼一定要寫程式碼。最忌諱的就是看完就結束,不總結,不復習,這樣知識留存率太低了,可能你暫時記下來了,但是過段時間就忘了。重要的函式要背下來,比如我經常每天隔幾天寫一下深拷貝,防抖節流,compose 函式,apply,bind,call 的實現等。這些常用的我覺得考到的可能比較大,並且能加深自己的理解。

當然了,通過寫部落格的形式來總結最好不過了,因為有人與你互動,所以能夠提高你的學習積極性,但是需要注意版權的問題,從書上整理的內容如果大規模引用的話,最好標註出處。而且如果有面試官問到的話,經常寫部落格也是個加分項。接下來準備把計算機基礎,演算法,框架,nodejs 這些東西補一補。雖然秋招結束了,但是學習是一輩子的事情

附:書單及面經

書單:JavaScript 高階程式設計,你不知道的 JavaScript 上中,ES6 標準入門,CSS 權威指南,DOM 程式設計藝術。(可選)JavaScript 忍者祕籍,高效能 JavaScript,深入淺出 nodejs,高效前端。

微信及連結: