寫在前面

工作吧，我覺得就像談戀愛，不一定是找高富帥或者白富美，互相確認(rèn)過眼神是對(duì)的人就可以~而面試的自信和對(duì)工資的要求，源于你過硬的基礎(chǔ)和平時(shí)的思考、積累以及總結(jié)~

8月底離職，其實(shí)是裸辭，當(dāng)然大概是在原東家我所在的產(chǎn)品項(xiàng)目組的人集體跑路了，所以我也離開了自己所在一年半的東家，畢竟留下來的都是要填大坑的。于是大概花了兩天的時(shí)間簡單梳理了一下前端知識(shí)和回顧了一下，自己做的產(chǎn)品和遇到的一些問題。然后一個(gè)星期面試了大概10家企業(yè)的樣子，每天上午一場下午一場，包含餓了么、小米、大搜車、喜馬拉雅、愛回收等這些大中廠的前端面試（都是上海地區(qū)的），后來獵頭有推薦一些外企ebay和其他一些企業(yè)，主要是個(gè)人覺得面試了一周累了，所以后來拿到了4家公司電話告知面試通過的消息，然后選了一家自己比較喜歡的公司，就停止面試了，當(dāng)然面試有被虐的體無完膚，也有比較順利的，故給大家做個(gè)小總結(jié)分享，希望對(duì)大家有所助力面試和對(duì)前端的摸索。

說說我自己吧

這里其實(shí)是這也是面試通常套路，面試官一來90%先來個(gè)自我介紹吧，只有10%的面試官一來，直接說談?wù)勀愕捻?xiàng)目吧，通常我會(huì)這樣自我介紹

xx理工大學(xué)軟件工程畢業(yè)，上一家公司主要是做xxx的，我在xxx產(chǎn)品項(xiàng)目組里負(fù)責(zé)xxx，xxx等前端開發(fā)， 主要的技術(shù)棧是xxx/xxx,然后自己平時(shí)比較喜歡玩前端，會(huì)把自己的小想法實(shí)現(xiàn)寫寫小DEMO開源在gitHub里， 也會(huì)定時(shí)做做總結(jié)在自己的博客網(wǎng)站和技術(shù)社區(qū)里寫寫技術(shù)文章做分享復(fù)制代碼

其實(shí)這里也沒什么，我大概就表達(dá)幾點(diǎn)：計(jì)算機(jī)科班出身、自己熟悉的業(yè)務(wù)情況，技術(shù)棧和會(huì)去研究技術(shù)、做分享。當(dāng)然這里有很多面試技巧可以用，我這邊的話，按照自己的實(shí)際情況描述~

關(guān)于簡歷

到這里其實(shí)面試官基本上不會(huì)抓到很多你自我介紹的面試的點(diǎn)，因?yàn)樗难劬ν⒅愕暮啔v，掃描你的簡歷描述，所以我比較推薦簡歷上把你的專業(yè)技能寫一下、工作經(jīng)歷、項(xiàng)目經(jīng)歷、個(gè)人項(xiàng)目、其他能寫都寫上去，建議盡量把事情說清楚，多用數(shù)據(jù)表達(dá)，結(jié)果導(dǎo)向（當(dāng)然這塊沒有很好的標(biāo)準(zhǔn)，只是個(gè)人的觀點(diǎn)）。如果有不錯(cuò)的開源項(xiàng)目也寫上在簡歷上去，這邊我就貼上我自己的一些描述吧（如果有需要看我這個(gè)簡歷全部，可以移步我github）

專業(yè)技能這塊，一定不要給自己挖坑，不太清楚的或者忘得差不多東西就不要寫了（我是有給自己挖坑過，寫了些自己拿到的證書，比如中級(jí)軟件工程師，Linux網(wǎng)絡(luò)管理員認(rèn)證，然后有一家面試官使勁問我Linux操作，最后一句我告辭，結(jié)束尷尬的氣氛）。個(gè)人建議沒有十足的對(duì)一個(gè)技術(shù)知識(shí)點(diǎn)把握，千萬不要寫精通，面試官看到這個(gè)詞語，往往會(huì)考考你到底是不是精通，還是在吹牛逼。所以寫寫熟練、熟悉、理解、了解....等比較謙虛而又不失大氣的詞語來描繪你的技術(shù)棧。

接下來個(gè)人項(xiàng)目可以寫一下，如果自己所在的公司不是很知名，和在公司做的項(xiàng)目不是很亮的話，只能靠自己的開源來拯救自己了（ps:其實(shí)我的所謂gitHub里的東西也沒什么，都是很簡單的小demo，但是掘金友的老鐵們給了很大的支持，目前star累計(jì)有300+，可以直接訪問我的github看看）

簡歷投遞

對(duì)于工作機(jī)會(huì)，主要是一個(gè)是技術(shù)社區(qū)、一個(gè)是求職平臺(tái)，朋友內(nèi)推也可以

對(duì)于這塊，筆者是沒在很多線上求職平臺(tái)，放自己的簡歷，主要是裸辭，所以簡歷還是要掛一下求職平臺(tái)的，主要是掛了boss直聘、獵聘這兩個(gè)平臺(tái)，其他就拉鉤....其實(shí)都可以。說實(shí)話，boss直聘、獵聘這兩個(gè)平臺(tái)效率很高，你一掛上去基本上每天可以收到20-30個(gè)消息，獵聘上很多獵頭服務(wù)也是不錯(cuò)的，筆者全程沒自己投簡歷，基本上都是獵頭推薦的崗位，安排好的面試時(shí)間，boss直聘里基本上看到大中廠的HR或者前端人員發(fā)了信息給我，我才回信息，聊的不錯(cuò)給他們簡歷，大概是這樣樣子。如果看到自己喜歡的公司，你可以自己主動(dòng)去聯(lián)系這些公司的HR,聊聊~

面試

對(duì)于面試，分要筆試和不需要筆試的，分重基礎(chǔ)的和重業(yè)務(wù)的考察。普遍的來講，大廠看重基礎(chǔ)扎不扎實(shí)，小廠相對(duì)考察對(duì)技能的熟練程度多一點(diǎn)。梳理的話，掘金小冊(cè)有一個(gè)《Web 前端面試指南與高頻考題解析》推薦一看，當(dāng)然我也買過了，內(nèi)容還不錯(cuò)，慕課網(wǎng)也有幾個(gè)視頻可以，但是對(duì)每個(gè)基礎(chǔ)知識(shí)點(diǎn)要加一些自己想法和思考會(huì)更好

筆試的話，基本上考的都是css的一些運(yùn)用，js的一些基礎(chǔ)，一些簡單的算法題，當(dāng)然也有計(jì)算機(jī)基礎(chǔ)的，后端基礎(chǔ)，和瀏覽器相關(guān)的都有。對(duì)于項(xiàng)目，他們會(huì)拿你的具體做的項(xiàng)目，由淺入深，剖析你對(duì)技術(shù)和業(yè)務(wù)的理解。下面這邊是我總結(jié)的我遇到一些筆試和問到的一些問題：

CSS

1、CSS選擇權(quán)重(你按照正常描述可以，建議加一些在框架上的比如vue里的樣式相關(guān)的知識(shí)點(diǎn)，比如Vue中的scoped原理及穿透方法是否知道？接下來肯定就是PostCSS轉(zhuǎn)譯實(shí)現(xiàn)了解多少咯)

2、手寫一些半圓，園、三角形、梯形...（注意是手寫出來類似這種，三角形原理[偽類也可以實(shí)現(xiàn)三角形]必懂）

3、sass、less用了那些特性，這兩個(gè)有什么區(qū)別，怎么自己封裝樣式庫（可以參考element/bootstrap，當(dāng)然也要知道，webpack打包樣式這塊的知識(shí)點(diǎn)咯，比如css-loader style-loader的內(nèi)容和區(qū)別）

4、css3有什么特性（雖然我面試的時(shí)候直接懟面試官了，直接說我接觸前端來就是css3，其實(shí)就是那些動(dòng)畫、透明度，漸變等這些了）

5、盒模型(除了原理和對(duì)比，這里你可以把Bootstrap攤開了一說就是全局重置樣式里有box-sizing: border-box;）、清除浮動(dòng)（幾種清除浮動(dòng)的方式，大廠的網(wǎng)站是這么做的攤開來一說，基本上通過偽類）、BFC（原理和創(chuàng)建），z-index層(比如知不知道層優(yōu)化可以提升渲染性能，提示：比如GPU加速)

6、布局：三欄、兩欄，九宮格，垂直居中，水平居中、自適應(yīng)響應(yīng)式（解決方案）。那些浮動(dòng)、絕對(duì)定位、flex、表格布局、網(wǎng)格布局這些應(yīng)該都熟練于心，各自的優(yōu)缺點(diǎn)，當(dāng)然你也要了解一下雙飛燕、圣杯布局原理和實(shí)現(xiàn)

7、移動(dòng)端像素知識(shí)與Viewport知識(shí)，比如怎么在h5網(wǎng)頁怎么顯示真實(shí)的1px邊框和12px字體大小

....這里列的只是我遇見的面試和筆試題，其他還有很多考點(diǎn)...

JS(es5/es6/es7/es8)

1、基礎(chǔ)JS-Api，判斷是不是整數(shù)，對(duì)數(shù)組的操作：增刪改查（查重），重組，排序，數(shù)組打亂、這些都要求能手寫代碼,當(dāng)然這些都有好幾種方式實(shí)現(xiàn)

2、創(chuàng)建對(duì)象、New運(yùn)算符、事件流（冒泡和捕獲）、原生事件綁定、BOM操作（比如對(duì)Ie9一下瀏覽器的判斷和一些操作）

3、原型原型鏈、閉包、類與繼承（在class之前的實(shí)現(xiàn)繼承，構(gòu)造函數(shù)繼承、原型鏈繼承、組合方式繼承，各自優(yōu)缺點(diǎn)）、同步異步

6、es6/7/8的新特性，基礎(chǔ)指令、箭頭函數(shù)、字符串模板、promise(原理，運(yùn)用的場景)、面向?qū)ο蟆?shù)據(jù)格式（set/map）,async/await(原理，有個(gè)cto問我這個(gè)函數(shù)用babel打包后長什么樣子)....

7、模塊化、函數(shù)式編程，高階函數(shù)的使用，柯里化函數(shù)，遞歸...

瀏覽器網(wǎng)絡(luò)相關(guān)

1、加載過程、渲染過程（最好也配合著框架聊）

2、性能優(yōu)化（加載、渲染），可以配合框架聊,比如說vue，異步組件路由的懶加載實(shí)現(xiàn)原理，GPU加速這塊要了解

3、HTTP（各種狀態(tài)碼、什么無狀態(tài)連接、管線化、強(qiáng)緩存，問的深的話會(huì)問Nginx代理以及面向未來的HTTP的思考等）、存儲(chǔ)cookie、localstorge、sessionstorge，各自的區(qū)別，當(dāng)然對(duì)這塊你要深入一點(diǎn)，比如cookie的工作流程，里面的參數(shù)，為什么呢說不安全，愛回收面試官問我的時(shí)候，當(dāng)時(shí)有尷尬的場面

4、跨域：jsonp原理，cors、iframe，postMessage....，當(dāng)然也要知道前端框架下的跨域，比如vue\node下的跨域怎么實(shí)現(xiàn)和處理

5、前端渲染和服務(wù)端渲染（單頁應(yīng)用SEO, 比如vue2.3 發(fā)布后提出了服務(wù)端渲染，Nuxt.js

是否了解）

6、前端監(jiān)控（數(shù)據(jù)、性能、異常監(jiān)控，埋點(diǎn)和上報(bào)）、請(qǐng)求相關(guān)的(比如怎么在vue下二次封裝axios請(qǐng)求，你會(huì)有什么思考)

vue

1、基本的指令、v-model原理（手寫一個(gè)雙向綁定）watch和computed的區(qū)別和運(yùn)用的場景、事件處理/事件修飾符...

2、響應(yīng)式原理、生命周期，渲染優(yōu)先級(jí)

3、組件，異步組件、父子組件通訊，兄弟組件通訊，父組件調(diào)用子組件的方法，父組件給子組件添加方法，父組件改子組件的樣式，父組件怎么給子組件傳一個(gè)帶$的參數(shù)，子組件向父組件聲明自己存在....可以看看element源碼，里面很多值得學(xué)習(xí)地方

3、vue-router，hash和history實(shí)現(xiàn)原理，路由懶加載原理，讓你實(shí)現(xiàn)一個(gè)路由你會(huì)有哪些思考

4、vuex，各個(gè)api，運(yùn)用場景，讓你實(shí)現(xiàn)一個(gè)狀態(tài)管理你會(huì)有哪些思考

5、設(shè)計(jì)一個(gè)可以無限嵌套的樹組件，并提供使用文檔

6、開發(fā)中有遇到什么問題，怎么解決的

...

vue 的話主要考原理比較多，要求看源碼，當(dāng)然網(wǎng)上有很多總結(jié)的很好的資源，正如尤大大推薦一樣

推薦《Vue技術(shù)內(nèi)幕》、《Vue.js 技術(shù)揭秘》，當(dāng)然掘金小冊(cè)《剖析 Vue.js 內(nèi)部運(yùn)行機(jī)制》也寫的很好，值得快速了解，但最好是自己去看源碼

node、webpack、react、angular、微信公眾號(hào)、小程序

這些其實(shí)都有問，因?yàn)槲液啔v上寫的熟悉vue,所以問的基本上都是vue的問題，其他的都大同小異，比如node兩個(gè)比較火的框架（koa/express）,webpack內(nèi)部和配置前端開發(fā)環(huán)境，時(shí)間關(guān)系就不一一列了。

其他

1、如果讓你設(shè)計(jì)一個(gè)前端框架你會(huì)有什么思考（通常是CTO會(huì)問這個(gè)問題）

2、你有什么問題要問我的？通常我會(huì)說想了解一下這個(gè)招聘崗位的項(xiàng)目業(yè)務(wù)和技術(shù)棧情況和團(tuán)隊(duì)情況，我個(gè)人在團(tuán)隊(duì)上是一個(gè)什么角色、簡單對(duì)我這次面試做個(gè)評(píng)價(jià)和建議

3、你平時(shí)工作之外會(huì)做什么？我的回答基本上比較固定，每天堅(jiān)持跑步半個(gè)小時(shí)，周末籃球（有面試官說他也喜歡打球），除了這些就是逛技術(shù)社區(qū)，看看前端的技術(shù)，實(shí)現(xiàn)自己的小想法，在自己的網(wǎng)站和技術(shù)社區(qū)寫寫文章分享....

4、為什么在上一家公司離職？由于上家公司業(yè)務(wù)調(diào)整，所在項(xiàng)目組人員長期閑置做維護(hù)工作，沒有做研發(fā)工作，個(gè)人覺得沒有體現(xiàn)個(gè)人價(jià)值，所以離職

5、你之前的同事怎么評(píng)價(jià)你?...

總結(jié)

面試其實(shí)印象也有比較深回憶

一、餓了么面試，過程很不錯(cuò)，面試官是餓了么的一個(gè)前端主管，之前參加過他的技術(shù)分享沙龍會(huì)，整個(gè)面試過程很輕松，最后面，他說來我來測一下你的編程能力，一個(gè)在線編譯器，沒有代碼提示的，我是一個(gè)代碼提示依賴的人....結(jié)果是是涼涼的，面試完后，他和我聊了許多，我也把來之前準(zhǔn)備的測出的餓了么官網(wǎng)和app前端上的幾個(gè)bug和一些優(yōu)化的地方，以及他們開源的作品進(jìn)行自己看法和他交流，他有推薦看看《重構(gòu)》《代碼整潔之道》《代碼大全》，有留微信，說可以半年后再過來面試交流，他也會(huì)把我提的相關(guān)問題和優(yōu)化和相關(guān)讓部門處理~

二、愛回收，這個(gè)面試是比較糟糕的，準(zhǔn)備不充分，很知識(shí)點(diǎn)知道，但是沒有了解很深，兩個(gè)面試官輪流面試我，導(dǎo)致一個(gè)面試官給我的評(píng)價(jià)是，知識(shí)廣度有，深度沒有。其中另外一個(gè)面試官聊到最后，有問我是哪里人，然后發(fā)現(xiàn)是一個(gè)老鄉(xiāng)，老鄉(xiāng)對(duì)老鄉(xiāng)的情懷，最后他還和我梳理了前端的知識(shí)，站在一個(gè)比較高的角度和我聊前端，也互留了微信，結(jié)果不用說了涼涼~

三、前端知識(shí)零零碎碎，其實(shí)吧，大多數(shù)看看知識(shí)點(diǎn)就ok了，但一定是要有自己思考去回答問題，如果只是按照別人總結(jié)的可能你消化不了，如果你回答的問題和百度到的一樣的，面試官大多數(shù)會(huì)覺得不太好，所以還是要自己理解的程度上去回答問題。代碼相關(guān)的一定要是自己手寫，而且盡量不要依賴代碼提示（餓了么涼了也是有這一個(gè)原因）

四、前端知識(shí)、框架都很多，個(gè)人覺得其實(shí)不需要都熟練，深入理解一兩個(gè)技術(shù)棧就ok了，前提基礎(chǔ)一定是要扎實(shí)的，就像愛回收面試官對(duì)我的評(píng)價(jià)：有知識(shí)廣度沒有知識(shí)深度，雖然這個(gè)評(píng)價(jià)有點(diǎn)狠，但是確實(shí)也鞭笞著我，要回歸基礎(chǔ)，回歸JS和數(shù)據(jù)結(jié)構(gòu),再讀前端框架源碼，和玩轉(zhuǎn)node~

五、遇到面試中不清楚或者不知道的知識(shí)點(diǎn)，你不要慌，先來一個(gè)尷尬而不失禮貌的微笑，然后說在這塊知識(shí)其實(shí)我很早之前是有看到過的，現(xiàn)在由于面試有點(diǎn)慌，短時(shí)間內(nèi)不能總結(jié)一個(gè)很好的答案，但我是有思考的~說一些相關(guān)的東西，如果實(shí)在是不清楚，就說不清楚。每個(gè)人都有知識(shí)盲點(diǎn)，面試官也不是說要問道你什么都會(huì)，當(dāng)然如果你整個(gè)面試過程，問的問題你都知道，你內(nèi)心里覺得都能回答的很好，但我也不建議你全部都回答的很好出來，留一兩題表現(xiàn)的不是那么完美的回答即可，道理很簡單，一個(gè)人永遠(yuǎn)不要表現(xiàn)太強(qiáng)勢(shì)，這樣可能有些面試官會(huì)覺得你有點(diǎn)“狂”，不太好相處~懂我意思吧

六、前端崗位是個(gè)敏感的動(dòng)物，可以平時(shí)逛逛大廠的網(wǎng)站和看看他們的產(chǎn)品，把有趣的地方，學(xué)習(xí)和模仿著寫對(duì)應(yīng)的代碼，當(dāng)然技術(shù)社區(qū)和牛人博客常看看，了解各個(gè)常識(shí)，比如最近vue/npm/node版本（穩(wěn)定）更新到多少了，更新了那些東西了解一下。面試的自信和對(duì)工資的要求，源于你過硬的基礎(chǔ)和平時(shí)的思考、積累以及總結(jié)~

七、以上面試知識(shí)點(diǎn)梳理和答案，js筆試部分我已經(jīng)整理出一個(gè)文檔，其他的知識(shí)點(diǎn)也有部分整理出來了(但是不一定是正確和最佳答案)，包括我自己的簡歷，如果感興趣的都可以移步在我github倉庫

?Front-end-notes?上，也可以?在線文檔網(wǎng)頁?當(dāng)字典查看，持續(xù)更新...

寫的倉促，描述有誤之處，謝謝大家指正，也期待和大家在評(píng)論區(qū)或者在github提交issues交流~最后祝愿各位同學(xué)在求職面試中可以收割心儀的offer~

ps:如果有前端同學(xué)想換坑位，簡歷到我個(gè)人郵箱：codercao@foxmail.com，我這邊評(píng)估ok的話，可以內(nèi)推，當(dāng)然其他公司可以幫你推薦，坐標(biāo)限上海~

了解掘金秋招求職征文活動(dòng)更多信息?秋招求職時(shí)，寫文就有好禮相送 | 掘金技術(shù)征文

總結(jié)

以上是生活随笔為你收集整理的9月，水了几个大中厂前端面试的一些总结分享 | 掘金技术征文的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。