金三銀四剛過(guò)去不久，各家大廠的崗位仍有少量空缺，奈何卻招不到合適的人。身邊的HR跟我說(shuō)，最近面試者情況普遍不太理想。

一問(wèn)到項(xiàng)目細(xì)節(jié)，很多候選人都支支吾吾，答不明白。接下來(lái)我作為一個(gè)工作了將近 3 年前端er來(lái)談?wù)勔幻麘?yīng)屆生應(yīng)該如何去獲得滿意的 offer。

一、說(shuō)起面試

在校招面試時(shí)，大家總會(huì)感覺(jué)心慌慌?？赡苁遣蛔孕?，可能是感覺(jué)好多沒(méi)準(zhǔn)備好。沒(méi)關(guān)系，既然投遞了簡(jiǎn)歷，又通過(guò)了篩選，就不要膽怯。首先要知道面試官都是抱著想把你招進(jìn)來(lái)的想法的，只是想多了解你的具體情況。既然面試官愿意花時(shí)間和你聊，那么證明自己還是有實(shí)力的，有被看中的閃光點(diǎn)，那么有什么好心虛的呢，勇敢自信的面對(duì)就好了。

為了讓大家在收到一家公司前端面試邀請(qǐng)之后，準(zhǔn)備得更加充足，這里準(zhǔn)備了一些高頻和基礎(chǔ)的前端面試題，希望可以幫助大家更加順利完成求職，得到自己滿意的offer。

最全前端面試真題匯總

CSS面試題

1.盒模型

2.如何讓一個(gè)盒子水平垂直居中？

3.css 優(yōu)先級(jí)確定

4.解釋下浮動(dòng)和它的工作原理，清除浮動(dòng)的方法？

5.CSS隱藏元素的幾種方法

6.如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?

7.簡(jiǎn)要說(shuō)一下CSS的元素分類(lèi)

8.link @import 導(dǎo)入 css

9.畫(huà)三角形

10.BFC（Block Formatting Context） 是什么？應(yīng)用？

JavaScript基礎(chǔ)面試題

1.棧和堆的區(qū)別？

2.Javascript實(shí)現(xiàn)繼承的幾種方式？

3.Javascript創(chuàng)建對(duì)象的幾種方式？

4.Javascript作用鏈域

5.什么是閉包（closure），為什么要用它？

6. javascript 代碼中的"use strict";是什么意思 ? 使用它區(qū)別是什么？

7.深拷貝和淺拷貝

8.JS延遲加載的方式有哪些？

9.什么是跨域問(wèn)題 ，如何解決跨域問(wèn)題?

10.模塊化開(kāi)發(fā)怎么做？

11.DOM操作

12.什么是Cookie 隔離？

13.響應(yīng)事件

14.flash和js通過(guò)什么類(lèi)如何交互?

15.JS垃圾回收機(jī)制？

Vue框架面試題

1.對(duì)于MVVM的理解？

2.Vue的生命周期

3.Vue組件間的參數(shù)傳遞

4.Vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定的原理

5.Vue的路由實(shí)現(xiàn)：hash模式 和 history模式

6.vue路由的鉤子函數(shù)

7.請(qǐng)問(wèn) v-if 和 v-show 有什么區(qū)別？

8.對(duì)于Vue是一套漸進(jìn)式框架的理解

9.Vue 組件間通信有哪幾種方式？

10.vue中子組件調(diào)用父組件的方法

11.怎么定義vue-router的動(dòng)態(tài)路由？怎么獲取傳過(guò)來(lái)的值？

12.請(qǐng)介紹一下你對(duì)vue-router的理解？

13.vue-router有哪幾種路由守衛(wèi)?

14.vuex有哪幾種屬性？

15.vuex的State特性是？

16.vue-cli如何新增自定義指令？

17.vue等單頁(yè)面應(yīng)用及其優(yōu)缺點(diǎn)

瀏覽器面試題

1.跨標(biāo)簽頁(yè)通訊

2.瀏覽器架構(gòu)

3.瀏覽器下事件循環(huán)(Event Loop)

4.從輸入 url 到展示的過(guò)程

5.重繪與回流

6.存儲(chǔ)

7.Web Worker

8.V8 垃圾回收機(jī)制

9.內(nèi)存泄露

服務(wù)端與網(wǎng)絡(luò)

1.http/https 協(xié)議

2.常見(jiàn)狀態(tài)碼

3.get/ post

4.Websocket

5.TCP 三次握手

6.TCP 四次揮手

7.Node 的 Event Loop: 6 個(gè)階段

8.跨域

9.安全

Webpack 相關(guān)

1.原理簡(jiǎn)述

2.Loader

3.Plugin

4.編譯優(yōu)化

算法

1.五大算法

2.基礎(chǔ)排序算法

3.高級(jí)排序算法

4.遞歸運(yùn)用(斐波那契數(shù)列)： 爬樓梯問(wèn)題

5.數(shù)據(jù)樹(shù)

6.天平找次品

進(jìn)階知識(shí)

React框架

1.Fiber

2.生命周期

3.setState

4.HOC(高階組件)

5.Redux

6.React Hooks

7.SSR 服務(wù)端渲染

8.函數(shù)式編程

??由于篇幅限制，pdf文檔的詳解資料太全面，細(xì)節(jié)內(nèi)容實(shí)在太多啦，所以只把部分面試題截圖出來(lái)粗略的介紹，每個(gè)小節(jié)點(diǎn)里面都有更細(xì)化的內(nèi)容！已經(jīng)打包完畢??！

二、STAR法則

在寫(xiě)簡(jiǎn)歷和面試過(guò)程中，都需要描述工作經(jīng)驗(yàn)或個(gè)人經(jīng)歷。優(yōu)秀的面試者往往會(huì)用 STAR 法則來(lái)建立個(gè)人事件，讓面試官可以更好地通過(guò)你過(guò)去的經(jīng)歷來(lái)判斷你的個(gè)人能力和潛質(zhì)。

重新回顧一下 STAR 法則四要素：

Situation：場(chǎng)景 - 當(dāng)時(shí)是怎樣的場(chǎng)景；

Task：任務(wù) - 當(dāng)時(shí)的任務(wù)是什么；

Action：我采取了怎樣的行動(dòng)；

Result：達(dá)到了什么樣的結(jié)果。

往往大部分同學(xué)一上來(lái)就直接介紹做了什么以及實(shí)現(xiàn)的過(guò)程，條理也比較清晰，內(nèi)容也頗具技術(shù)含量。但很多同學(xué)很容易忽略了 Situation 和 Result 的部分也就是背景和結(jié)果?；蛘呤窃诿嬖嚬龠M(jìn)一步了解追問(wèn)細(xì)節(jié)的時(shí)候容易驚慌失措。這些原因往往都是由于面試前對(duì)自己的經(jīng)歷沒(méi)有將來(lái)龍去脈講清楚以及總結(jié)不夠全面和深入。

舉個(gè)例子：比如有的同學(xué)提到了在 XXX 項(xiàng)目過(guò)程中實(shí)現(xiàn)了一個(gè) Webpack 插件 XXX，這個(gè)插件的功能是 XXXX 并且在 Github 上開(kāi)源了。整個(gè)實(shí)現(xiàn)過(guò)程和思路都比較清晰，面試官聽(tīng)的也是饒有興致，甚至回想起年輕時(shí)某個(gè)夜晚加班研究 Webpack 插件的青澀時(shí)光。

盡管這樣面試官也同樣希望了解當(dāng)時(shí)項(xiàng)目的背景，是什么原因?qū)е履阋氲酵ㄟ^(guò)做 Webpack 插件來(lái)解決而不是通過(guò)其他工具，以及這個(gè)插件給項(xiàng)目帶來(lái)了怎樣的價(jià)值（是構(gòu)建性能還是其他？）。背景和結(jié)果是面試官非?？粗氐囊徊糠?，必須拿出足夠的理由和價(jià)值來(lái)說(shuō)服面試官，否則盡管你在這個(gè)項(xiàng)目投入了足夠的精力但最終并沒(méi)有為你的面試評(píng)價(jià)加分，這是十分可惜的。

這時(shí)候有的同學(xué)也會(huì)想：我的項(xiàng)目只是個(gè)人/學(xué)校的練手項(xiàng)目，對(duì)于項(xiàng)目結(jié)果我想不到非常有吸引眼球的價(jià)值。那么這個(gè)時(shí)候你不妨說(shuō)一下你在項(xiàng)目中學(xué)到內(nèi)容，比如在這個(gè) Webpack 插件例子中，就可以說(shuō)一下：

Compiler 和 Compilation 以及它們的區(qū)別；

Webpack 是通過(guò)什么方式實(shí)現(xiàn)了插件之間的關(guān)系以及保證它們的有序性；

開(kāi)發(fā)插件時(shí)需要依據(jù)當(dāng)前配置是否使用了某個(gè)其他的插件而做下一步?jīng)Q定，如何判斷 Webpack 當(dāng)前使用了哪些插件；

開(kāi)發(fā)插件過(guò)程中借鑒了其他插件的思路，我對(duì)這個(gè)插件源碼的理解；

等等等等。

以上的在實(shí)際開(kāi)發(fā) Webpack 插件過(guò)程中大部分都會(huì)遇到，這些問(wèn)題如果你有記錄和總結(jié)也能作為 Result。

三、面試場(chǎng)景題

舉一個(gè)例子，比如考察候選人是否聰明，star 法則會(huì)這樣詢(xún)問(wèn)：

1.在剛才的項(xiàng)目中，你提到了公司業(yè)務(wù)發(fā)展很快，人手不夠，你是如何應(yīng)對(duì)的呢？

2.在你的項(xiàng)目里面解決了什么樣的難題

3.在你的項(xiàng)目里面如何做的登錄

4.前端的項(xiàng)目如何進(jìn)行優(yōu)化，移動(dòng)端呢？

5.圖片加載失敗要做啥

6.讓你帶領(lǐng)一個(gè)小團(tuán)隊(duì)完成一個(gè)項(xiàng)目，你會(huì)怎么做？

7.項(xiàng)目的同源處理，跨域相關(guān)

8.如果再做這個(gè)項(xiàng)目，你會(huì)在哪些方面進(jìn)行改善？

面試中，如果面試官讓你描述一個(gè)自己比較得意的項(xiàng)目的時(shí)候，一定記得要遵循 STAR 法則進(jìn)行回答。比如為了整合 xxx 業(yè)務(wù)(S)，我承擔(dān) xxx 角色，具體負(fù)責(zé) xxx (T)。做了 xxx 事情(A)，最后產(chǎn)生了 xxx 結(jié)果

然后在描述項(xiàng)目亮點(diǎn)的時(shí)候也一樣，比如

由于項(xiàng)目 xxx 原因(S)，我需要進(jìn)行 xxx 改進(jìn)(T)，然后進(jìn)行了 xxx 處理(A)，最后產(chǎn)出了 xxx 結(jié)果，數(shù)據(jù)對(duì)比為 xxx。

整體這樣下來(lái)，會(huì)顯得你很有思考力，且具有行動(dòng)力，可以給企業(yè)創(chuàng)造出價(jià)值，這也是面試官評(píng)定候選人最關(guān)鍵的指標(biāo)之一。

四、總結(jié)一下

面試官的套路

面試時(shí)所問(wèn)的問(wèn)題基本分為兩種：具象的問(wèn)題和開(kāi)放性的問(wèn)題。

具象的問(wèn)題基本都會(huì)參考工作經(jīng)驗(yàn)按照 STAR 法則來(lái)進(jìn)行，主要是了解基本的素養(yǎng)，技術(shù)深度和潛力。

開(kāi)放性的問(wèn)題基本是考察思維發(fā)散能力，考察在某個(gè)領(lǐng)域的深度和廣度，基本上會(huì)結(jié)合技術(shù)問(wèn)題來(lái)問(wèn)，或者是結(jié)合工作內(nèi)容來(lái)問(wèn)。

比如：實(shí)現(xiàn)某種技術(shù)的 n 種方法？某種技術(shù)的實(shí)現(xiàn)原理？和什么什么相比有哪些優(yōu)缺點(diǎn)？你對(duì)這項(xiàng)技術(shù)的思考是什么？

面試者的應(yīng)對(duì)

1.就實(shí)際情況做回答，提前準(zhǔn)備的時(shí)候多發(fā)散，多思考，多總結(jié)。這一塊是可以自己準(zhǔn)備的加分項(xiàng)。

2.發(fā)散性問(wèn)題主要是看自己平時(shí)積累。首先基礎(chǔ)知識(shí)要牢固，同時(shí)也要了解最新技術(shù)動(dòng)態(tài)。面對(duì)這類(lèi)問(wèn)題切記也不能答非所問(wèn)而跑題了。

五、我收集的面試題集

最后，再分享我耗時(shí)50天編寫(xiě)了1.8w字打造完成的前端面試筆記，憑借它最終成功入職大廠，已整理成了一份pdf，拿去不謝，資料是按目錄進(jìn)行編排，每一章下面都有更具體的內(nèi)容：

HTML，CSS，前端基礎(chǔ)，前端核心，前端進(jìn)階，移動(dòng)端開(kāi)發(fā)，計(jì)算機(jī)基礎(chǔ)，數(shù)據(jù)結(jié)構(gòu)與算法，設(shè)計(jì)模式，項(xiàng)目等等共【350頁(yè)】PDF。

資料截圖：

想要領(lǐng)取資料的小伙伴們，請(qǐng)關(guān)注下方微信公眾號(hào)領(lǐng)取哦~?

然后就等著私信查收吧~