前端面試要點(diǎn)

想要通過(guò)前端面試順利進(jìn)入一線大廠成就高薪前端夢(mèng)。那么首先，我們得知道前端面試中，社招和校招究竟有啥區(qū)別？

對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)，如果說(shuō)社招更看重對(duì)前端技術(shù)體系的深入理解，以及解決問(wèn)題的能力話，那校招更看重的其實(shí)是基本功和學(xué)習(xí)能力（或者說(shuō)是潛力）。

但其實(shí)，無(wú)論是社招還是校招，面試的時(shí)候都會(huì)問(wèn)到一些曾經(jīng)操作過(guò)的項(xiàng)目，尤其是大廠，或者熱門(mén)高薪部門(mén)，面試官除必問(wèn)的技術(shù)經(jīng)驗(yàn)外，也會(huì)對(duì)技術(shù)深度進(jìn)行一個(gè)基礎(chǔ)的考核，那在這種情況下如何hold住大廠面試呢？

前端面試三要素：簡(jiǎn)歷、個(gè)人介紹、技術(shù)能力。下面，就來(lái)分別聊一聊。

1、簡(jiǎn)歷篩選關(guān)：

HR一般會(huì)去看簡(jiǎn)歷中所提的技術(shù)棧是否匹配，怎么看呢？我們可以抓住簡(jiǎn)歷中的技術(shù)名詞，一般來(lái)說(shuō)如果一點(diǎn)技術(shù)名詞都沒(méi)有提到，那么大概有以下幾種可能：很水、很牛但概率很小、不會(huì)寫(xiě)簡(jiǎn)歷。所以，一部分人可能會(huì)因?yàn)楹?jiǎn)歷的問(wèn)題沒(méi)有了面試機(jī)會(huì)，這點(diǎn)是需要非常注意的。

2、個(gè)人介紹關(guān)：

通過(guò)了簡(jiǎn)歷篩選階段，就真正到了面試環(huán)節(jié)。這時(shí)候一定要準(zhǔn)備好一段最多3分鐘的個(gè)人介紹。請(qǐng)注意，最多3分鐘！言簡(jiǎn)意賅的說(shuō)明自己的工作時(shí)間，擅長(zhǎng)技術(shù)棧和自己的工作預(yù)期。

3、項(xiàng)目經(jīng)驗(yàn)表達(dá)：

對(duì)前端開(kāi)發(fā)學(xué)習(xí)者而言，JS并不陌生，但大廠的JS面試題卻總是顯得很“陌生”，怎么樣能夠真正做到深入理解與高級(jí)應(yīng)用？這不僅是面試過(guò)程中對(duì)前端求職者的要求，也是大多數(shù)前端開(kāi)發(fā)者的痛點(diǎn)。

大廠面試中，面試官除了關(guān)注你的項(xiàng)目經(jīng)驗(yàn)外，還往往喜歡和面試者深入探討前端某些技術(shù)領(lǐng)域成體系的前端知識(shí)。比如：模塊化、異步解決方案、網(wǎng)絡(luò)、框架及原理、線程等，但在與面試官的正面battle中，求職者總會(huì)敗下陣來(lái)。

所以，建議大家在Web前端面試前一定要注重這三個(gè)方面的內(nèi)容。注重了這些想找找到一份適合的Web前端開(kāi)發(fā)工作并不是難事。

2022前端開(kāi)發(fā)面試記錄（深圳篇）

2022年來(lái)到深圳，感覺(jué)到了與之前所在城市的差異，心里多少有點(diǎn)落差。雖然時(shí)機(jī)不太對(duì)吧，但是相信一切都會(huì)好起來(lái)的，給自己加油呀！
整理了一些面試被問(wèn)到的問(wèn)題，雖然很多是無(wú)效面試，但是我也強(qiáng)行問(wèn)了面試官，從他們的回答中猜測(cè)了一下他們關(guān)注的面試點(diǎn)，所以也算是有點(diǎn)收獲吧，只是浪費(fèi)了很多簡(jiǎn)歷和路費(fèi)，哭唧唧。

——1、區(qū)塊鏈——
1-1、vue生命周期；
1-2、vuex屬性；
1-3、用戶開(kāi)始登錄到登錄成功都發(fā)生了什么；
1-4、git常用的命令；

——2、金融：vue——
筆試：
2-1、深淺拷貝的區(qū)別，為什么會(huì)出現(xiàn)深淺拷貝，淺拷貝的優(yōu)勢(shì)；
2-2、強(qiáng)制中斷 foreach 遍歷；
2-3、多處組件復(fù)用；
2-4、你對(duì)前端是什么概念，前端在整個(gè)軟件生態(tài)內(nèi)是什么角色；
2-5、Vue2 中數(shù)據(jù)變化但視圖沒(méi)有發(fā)生同步更新，描述一下出現(xiàn)的場(chǎng)景，解決方式，以及該問(wèn)題發(fā)生的可能原因；
2-6、nextTick 是如何確保開(kāi)發(fā)者能夠獲取到最新的 DOM 狀態(tài)的；
2-7、如何使用 mixins，有何利弊；
2-8、使用 Hooks 模式開(kāi)發(fā)時(shí)，useMemo，useCallback 常用來(lái)作為優(yōu)化的手段。描述一下它們各自的適用場(chǎng)景，以及背后的原理實(shí)現(xiàn)?；
2-9、前端從 Jquery 時(shí)代演變至如今的三大框架，這種演變的根源是什么，jquery 解決了什么問(wèn)題，如今的三大框架又是為了解決什么問(wèn)題出現(xiàn)的？
視頻面試：
2-10、js遍歷樹(shù)形結(jié)構(gòu)，每個(gè)節(jié)點(diǎn)都有一個(gè)唯一ID，只能遍歷一次；
2-11、組件封裝的意義；

——3、知識(shí)產(chǎn)權(quán)：vue2、vue3、ts、react——
3-1、說(shuō)一說(shuō)面向?qū)ο蟮睦斫?，包括繼承、封裝、多態(tài)等；
3-2、說(shuō)一說(shuō)promise；
3-3、webpack優(yōu)化；
3-4、vuex使用場(chǎng)景；
3-5、描述一下對(duì)vue響應(yīng)式原理的理解；
3-6、vue生命周期；
3-7、父子組件鉤子函數(shù)執(zhí)行順序；
3-8、v-if和v-show；
3-9、js數(shù)據(jù)類型；
3-10、實(shí)現(xiàn)深拷貝；

——4、物流——
4-1、vue生命周期；
4-2、生命周期-修改元素樣式在生命周期的哪個(gè)階段；
4-3、生命周期-修改數(shù)據(jù)在哪個(gè)階段；
4-4、生命周期-destroy里面會(huì)做哪些操作；
4-5、怎么修改title的內(nèi)容；
4-6、父子組件傳參的具體寫(xiě)法；
4-7、v-model的多種寫(xiě)法；
4-8、js數(shù)據(jù)類型；
4-9、判斷數(shù)組的方法；
4-10、實(shí)現(xiàn)左邊固定右邊自適應(yīng)的布局；
4-11、實(shí)現(xiàn)div垂直水平居中；
4-12、flex:1；
4-13、flex詳解；
4-14、call,apply,bind是干什么的；

——5、新興產(chǎn)業(yè)——
5-1、封裝路由，怎么攔截路由；
5-2、瀏覽器緩存有哪些，又問(wèn)localStorage和sessionStrorage的區(qū)別和應(yīng)用場(chǎng)景；
5-3、瀏覽器強(qiáng)緩存和協(xié)商緩存；
5-4、webpack打包機(jī)制，構(gòu)建過(guò)程和配置；
5-5、性能優(yōu)化方法；
5-6、前端的業(yè)務(wù)和后端的API是怎么做到數(shù)據(jù)實(shí)時(shí)請(qǐng)求的（問(wèn)的其實(shí)是前端對(duì)后端API接口的封裝和管理）；
5-7、computed和watch；
5-8、說(shuō)了幾個(gè)關(guān)于大屏的應(yīng)用場(chǎng)景，有沒(méi)有做過(guò)，怎么做的；

——6、某水果：vue2、vue3、ts、各種前沿技術(shù)都用——
6-1、怎么封裝一個(gè)組件庫(kù)/工具類庫(kù)，比如vue封裝過(guò)什么復(fù)雜組件，jquery封裝過(guò)什么類庫(kù)；
6-2、get和post的區(qū)別，傳參格式等；
6-3、promise怎么用的；
6-4、原型鏈，test()的原型鏈；
6-5、websocket；
6-6、es6中的generator；
6-7、es6中的set和map有啥區(qū)別，set為什么能去重；
6-8、項(xiàng)目難點(diǎn)；

——7、醫(yī)療健康：vue——
7-1、vue自定義指令配置；
7-2、webpack的理解；
7-3、對(duì)node的了解，用過(guò)express嗎；
7-4、項(xiàng)目中的拖拽是怎么做的；
7-5、websocket和socket的區(qū)別；
7-6、聽(tīng)過(guò)mqtt嗎，因?yàn)闆](méi)聽(tīng)過(guò)所以解釋了一下activemq的用法；
7-7、二維地圖的聚合，如果有十萬(wàn)個(gè)點(diǎn)，會(huì)做什么優(yōu)化；
7-8、地圖實(shí)現(xiàn)多個(gè)點(diǎn)連成一條線會(huì)怎么做；
7-9、地圖實(shí)現(xiàn)一條曲線；
7-10、內(nèi)網(wǎng)下git怎么用的；
7-11、openlayers渲染機(jī)制；
7-12、父子組件通信方法；
7-13、router中實(shí)現(xiàn)攔截；
7-14、對(duì)象合并的方法；
7-15、父子組件的生命周期執(zhí)行順序，渲染階段為什么會(huì)先執(zhí)行父組件再執(zhí)行子組件；
7-16、vue生命周期；
7-17、npm run dev, run build可以在項(xiàng)目中的什么位置找到；
7-18、vue中跳轉(zhuǎn)頁(yè)面的方法；
7-19、mixins用過(guò)嗎；
7-20、判斷引用類型的方法；
7-21、js數(shù)據(jù)類型；
7-22、判斷基本數(shù)據(jù)類型的方法；
7-23、for in和for of的用法和區(qū)別，兩者遍歷的是索引還是屬性值，兩者都可以遍歷對(duì)象嗎；
7-24、foreach和map的區(qū)別，兩者會(huì)不會(huì)改變?cè)瓟?shù)組；
7-25、主要用什么技術(shù)棧；
7-26、行內(nèi)元素和塊級(jí)元素的區(qū)別，分別都有哪些，行塊級(jí)元素有哪些；
7-27、div垂直水平居中，grid知不知道怎么用；
7-28、splice和slice；

——8、智慧園區(qū)：vue2、vue3、ts、uniapp——
8-1、flex了解嗎，flex布局方向，flex:1 0的頁(yè)面效果是怎樣的；
8-2、做過(guò)移動(dòng)端嗎，了解uniapp嗎；
8-3、keep-alive；問(wèn)了一個(gè)沒(méi)聽(tīng)明白的，可能和keep-alive有關(guān)系；
8-4、vuex中的action；不用vuex，怎么代替vuex；
8-5、promise.all和promise.on；
8-6、防止表單重復(fù)提交；
8-7、async，await的使用；
8-8、vue3和ts的了解；
8-9、防抖怎么控制時(shí)間；
8-10、vue中的data為什么要設(shè)計(jì)成一個(gè)函數(shù)；

——9、智慧工地：vue、uniapp、小程序——
9-1、Vuex是干什么的；
9-2、openlayers怎么用的；
9-3、性能優(yōu)化；
9-4、spa首屏加載優(yōu)化；
9-5、bundler.js太大，打包怎么優(yōu)化；
9-6、加密方式了解多少，比如md5,base64等，一大堆沒(méi)聽(tīng)過(guò)的；
9-7、冒泡排序的實(shí)現(xiàn)原理；
9-8、js設(shè)計(jì)模式；

——10、某快遞公司外包——
10-1、一棵樹(shù)的數(shù)據(jù)，給的是列表格式，轉(zhuǎn)換成樹(shù)形結(jié)構(gòu)；
10-2、項(xiàng)目相關(guān)的，聊天怎么做的，拖拽怎么做的，拖拽的數(shù)據(jù)怎么渲染的，拖拽重疊怎么處理的；
10-3、js設(shè)計(jì)模式；

——11、三維：vue、cesium——
11-1、一棵樹(shù)的數(shù)據(jù)，給的是列表格式，轉(zhuǎn)換成樹(shù)形結(jié)構(gòu)；
11-2、openlayers怎么用的，發(fā)布過(guò)wms嗎，發(fā)布流程是怎樣的；
11-3、openlayers轉(zhuǎn)換經(jīng)緯度的方法名是什么；
11-4、cesium常用的函數(shù)；
11-5、vue數(shù)據(jù)雙向綁定原理；
11-6、Vue中data屬性如果改變一個(gè)數(shù)組的下標(biāo)，會(huì)不會(huì)馬上發(fā)生變化，不變化可以怎么解決
11-7、數(shù)組常用方法有哪些；
11-8、 map和filter的區(qū)別；
11-9、es6常用的方法；
11-10、父子組件通信，兄弟組件通信；
11-11、new具體進(jìn)行了什么操作；

——12、醫(yī)療：vue、angular——
12-1、js渲染機(jī)制和運(yùn)行機(jī)制；
12-2、vue數(shù)據(jù)綁定原理；

——13、建設(shè)行業(yè)：vue、uniapp——
筆試：
13-1、||與&運(yùn)算符；
13-2、垂直居中方案；
13-3、let a=arr, b=a, c=arr.concat(), a[0]=3，打印b和c，應(yīng)該是深淺拷貝；
13-4、實(shí)現(xiàn)font-size:12；
13-5、接口路徑，給一個(gè)地址 ().html ，根據(jù)url請(qǐng)求接口路徑寫(xiě)出完整路徑，’/ geturl.do ’，’ geturl.do ’，’../ geturl.do ’；
13-6、微信小程序流程和主要文件；
13-7、獲取url參數(shù)及內(nèi)容；
13-8、$(function(){}) / (function(){}) / (function(){})()的區(qū)別；
13-9、前端優(yōu)化方案；
面試：
13-10、項(xiàng)目難點(diǎn)；
13-11、git工作流；
13-12、jquery項(xiàng)目會(huì)不會(huì)用webpack打包；
13-13、webpack優(yōu)化；
13-14、web優(yōu)化；

——14、文化：uniapp——
14-1、ssr渲染；
14-2、ajax和axios的區(qū)別；
14-3、cookie和session的區(qū)別；
14-4、vue生命周期；
14-5、數(shù)據(jù)請(qǐng)求寫(xiě)在哪個(gè)生命周期中；
14-6、router的history模式和hash模式；
14-7、工作中的開(kāi)發(fā)流程；
14-8、uniapp的開(kāi)發(fā)流程和坑；
14-9、uniapp滑動(dòng)問(wèn)題，下滑切換視頻不生效，一般是什么原因；
14-10、uniapp加載速度慢，點(diǎn)擊加載圖片速度太慢，一般是什么原因；

——15、企業(yè)平臺(tái)某外包：vue，node，性能優(yōu)化——
15-1、說(shuō)一說(shuō)websocket；
15-2、vue數(shù)據(jù)雙向綁定原理；
15-3、項(xiàng)目難點(diǎn)；
15-4、對(duì)mvvm、mvc、mvp等的理解；
15-5、vue的常見(jiàn)指令；
15-6、computed和watch；
15-7、class和style怎么綁定；
15-8、ajax和axios的區(qū)別；
15-9、axios攔截器，axios的post請(qǐng)求；
15-10、對(duì)前端渲染，服務(wù)端渲染的理解；

——16、智慧城市：vue，node，three.js——
16-1、vue生命周期；
16-2、vue組件通信方法；
16-3、js的繼承；
16-4、oracle、mysql、sqllite的區(qū)別；
16-5、oracle連表查詢；
16-6、openlayers項(xiàng)目場(chǎng)景；
16-7、cesium項(xiàng)目場(chǎng)景；

——17、租房：jquery+layui，vue2——
17-1、筆試：
17-2、foo打印題；
17-3、this打印題；
17-4、變量提升打印題；
17-5、let arr=[1,2,[5,8,[9,[3,5,]7,]20,37]] 把數(shù)組扁平化成一個(gè)數(shù)組，并進(jìn)行去重升序;
17-6、let a=[1,2,3,4,5,6,7]; let b=[4,5,6]; 求b在a中第一次出現(xiàn)的位置；
17-7、面試：主要問(wèn)項(xiàng)目

——18、跑腿：vue2，vue3+ts——
18-1、對(duì)html5語(yǔ)義化的理解；
18-2、css實(shí)現(xiàn)一個(gè)三角形；
18-3、css怎么實(shí)現(xiàn)0.5px的線，為什么有這種需求，涉及到兼容性問(wèn)題；
18-4、怎么解決變量提升的問(wèn)題；
18-5、es6新增了哪些定義變量的方式；
18-6、const定義的變量可以被修改嗎；
18-7、map和filter的區(qū)別，會(huì)改變?cè)瓟?shù)組嗎；
18-8、es6去重的方法；
18-9、談一談對(duì)promise的理解；
18-10、除了鏈?zhǔn)秸{(diào)用，promise還可以怎么處理同步請(qǐng)求(async/await)；
18-11、對(duì)vue響應(yīng)式原理的理解，核心是什么；
18-12、對(duì)vue生命周期每個(gè)階段的理解；
18-13、為什么要用key，key有什么作用；
18-14、v-if和v-show；
18-15、Vue中data為什么是一個(gè)函數(shù)；
18-16、vue各場(chǎng)景下的傳值方式有哪些，比如父子組件，兄弟組件，祖孫組件；
18-17、對(duì)vuex的理解和使用場(chǎng)景；
18-18、vue常見(jiàn)修飾符；
18-19、Vue3用過(guò)嗎(因?yàn)闆](méi)用過(guò)，所以就只針對(duì)響應(yīng)式原理說(shuō)了一下vue3和vue2的區(qū)別)；

——19、實(shí)業(yè)：jquery，vue2，vue3——
筆試：需要解釋
19-1、html5新標(biāo)簽，css3新特性；
19-2、js+css3實(shí)現(xiàn)某元素以50px每秒的速度左移100px；
19-3、css實(shí)現(xiàn)左中右布局，不改變文檔流；
19-4、js兼容性有哪些，以及常見(jiàn)的解決方案；
19-5、描述一下事件循環(huán)機(jī)制eventloop，eventloop解決了什么問(wèn)題；
19-6、給了一個(gè)題，大概是后端返回的接口數(shù)據(jù)，data的格式有很多，比如null，對(duì)象，數(shù)組，字符串等，怎么處理這種問(wèn)題；
19-7、前端性能優(yōu)化方法，首屏頁(yè)面怎么優(yōu)化；
19-8、用js寫(xiě)一個(gè)方法實(shí)現(xiàn)數(shù)據(jù)去重并排序(用es5和es6+實(shí)現(xiàn))；
19-9、給定一個(gè)數(shù)組，把數(shù)組中為0的往后排，其他值按順序排序; （示例：[1,0,4,0,5,3]轉(zhuǎn)換結(jié)果為[1,3,4,5,0,0]）
19-10、用0，1，2代表紅黃藍(lán)三種顏色，實(shí)現(xiàn)以下排序，不能用array.sort實(shí)現(xiàn);（示例：[0,1,0,2,0,1,2]轉(zhuǎn)換結(jié)果為[0,0,0,1,1,2,2]）
面試：
19-11、flex布局；flex:1對(duì)應(yīng)的屬性；
19-12、講一下原型鏈； proto 和prototype有什么區(qū)別；字符串有沒(méi)有原型；給定一個(gè)str，str.test()調(diào)用的誰(shuí)的test方法；
19-13、講一下閉包；什么情況下才能算是閉包；形成閉包的條件；列了三個(gè)題讓你判斷是不是閉包；
19-14、v-if和v-show是干什么的；應(yīng)用場(chǎng)景有哪些；給定一對(duì)父子組件，默認(rèn)值是false，另外有一個(gè)ajax請(qǐng)求，值發(fā)生了以下變化（false true false true true），在v-show和v-if中，父子組件的哪個(gè)階段里會(huì)請(qǐng)求ajax；
19-15、computed的實(shí)現(xiàn)原理，怎么實(shí)現(xiàn)一個(gè)computed；
19-16、css中，transform，margin，position的都是怎么渲染的，渲染機(jī)制是什么；amd，cmd，commonjs了解嗎；

誰(shuí)給我想一些簡(jiǎn)歷上面的web前端的項(xiàng)目經(jīng)驗(yàn)

做幾個(gè)意義性強(qiáng)一點(diǎn)的案例，可以證明你在這些方面有造詣，并且可以讓人可以看的出的demo，列舉幾個(gè)站點(diǎn)，并注明參與了哪些部分，學(xué)到了哪些知識(shí)。方便的可以傳到代碼共享之類的網(wǎng)站或者自己搭建在線預(yù)覽的站點(diǎn)，要事先準(zhǔn)備好，并且保證在任何一個(gè)設(shè)備都可以訪問(wèn)使用。