1.面試前的問題

1.1 博客粉絲少，要不要寫簡歷上

博客粉絲數(shù)量少，文章內(nèi)容都是基礎(chǔ)的東西，要不要寫到簡歷上？咨詢了一些群友，以下是一些回復(fù)：

1.“我作為面試官，拿到的簡歷如果有自己建立的站點(diǎn)或者博客的鏈接我會(huì)點(diǎn)進(jìn)去看看的，另外面試過程中，也會(huì)去問一兩點(diǎn)。所以我建議就是你發(fā)的這些東西你特別熟，能讓面試官更好的了解你，那就放上去，如果是很多的摘轉(zhuǎn)載，自己也都是不熟的東西，那就不放”

2.“寫上總比沒有強(qiáng) 但你之前的更新時(shí)間隔太久了最近建議每天或者每兩三天都更新一下，要堅(jiān)持”

總結(jié)：寫上總比沒有強(qiáng)，但是博客更新速度要堅(jiān)持，不要平時(shí)不更新，快找工作了，嘎嘎更新。寫的話也要保證寫的東西都能說出來，如果面試官看了博客而去問到了，自己說不出來，就是給自己挖坑了

1.2 準(zhǔn)備思路

想找工作，但是不知道從哪開始？

目前兩年多經(jīng)驗(yàn)，不到三年。和一些前輩聊過，也和大廠面試官聊過。兩年可能達(dá)到p5的水平，首先基本功要非常扎實(shí)，第二點(diǎn)框架的使用上要非常熟，然后對webpack有一些了解會(huì)比較好?？梢詮乃膫€(gè)方向去準(zhǔn)備：

1.JavaScript，JS是前端的基礎(chǔ)，必須要扎實(shí)：原型鏈、繼承、事件循環(huán)、事件委托等。ES6中常用的語法：Promise、localstorage區(qū)別、set、map等。
2.框架：選一個(gè)主框架，如 React：常用API熟練使用，最好了解這些API的實(shí)現(xiàn)原理，有的面試官會(huì)讓手寫。源碼也要讀一些。
3.項(xiàng)目：遇到過哪些難點(diǎn)，有哪些亮點(diǎn)。
4.完成以上三點(diǎn)后，了解一些計(jì)算機(jī)網(wǎng)絡(luò)的知識(shí)，如：輸入一個(gè)url后發(fā)生了什么？性能優(yōu)化：前端性能優(yōu)化三大指標(biāo)：LCP（衡量最大內(nèi)容加載）、FID（衡量響應(yīng)性能）、CLS（衡量視覺穩(wěn)定性）及Navigation Timing。css部分，如：flex:1,什么意思，代表哪三個(gè)屬性。webpack方向。算法。

總結(jié)：簡歷做出來后，可以對照簡歷去準(zhǔn)備，簡歷上提到的知識(shí)點(diǎn)一定吃透。
如：“推薦團(tuán)隊(duì)使用style-component實(shí)現(xiàn)模塊化”。那你還知道哪些實(shí)現(xiàn)模塊化的方法，他們的區(qū)別，為什么使用style-component。這個(gè)答案不重要，重要的是你回答這個(gè)問題的思路和角度。

2.大廠面試

2.1 百度

1.你做的這些項(xiàng)目，你覺得那個(gè)技術(shù)點(diǎn)有挑戰(zhàn)性？
2.我看你做過移動(dòng)端的項(xiàng)目，rem、em、px、vh、vw有什么區(qū)別？em相對于誰？
3.css里面，哪些方式去實(shí)現(xiàn)模塊化？
4.在jsx里面寫一個(gè)classname，渲染到真實(shí)的dom節(jié)點(diǎn)上的時(shí)候，classname還是你原來的那個(gè)classname嗎？
5.了解過webpack的哪些東西？plugin和loader區(qū)別
6.聊一聊react相關(guān)，說說你對fiber的理解？currentFiber是一個(gè)什么樣的結(jié)構(gòu)，是一個(gè)樹嗎？雙緩存指的是什么？任務(wù)的中斷和恢復(fù)是怎么做的？怎么去實(shí)現(xiàn)這些細(xì)小的任務(wù)，調(diào)用什么api呢，了解過嗎？
7.setState的原理？是同步的還是異步的？
8.react的事件和html中的事件有什么不一樣？一個(gè)列表每一項(xiàng)都添加點(diǎn)擊事件怎么添加？每一個(gè)都綁定一個(gè)嗎？事件委托？
9.有用過ref嗎？父組件調(diào)用子組件的方法，用ref怎么實(shí)現(xiàn)？如果是一個(gè)函數(shù)式組件呢，函數(shù)式組件是沒有實(shí)例的
10.用過useMemo嗎？useCallback用過嗎？了解過具體的實(shí)現(xiàn)嗎，怎么實(shí)現(xiàn)一個(gè)緩存？
11.問一下js基礎(chǔ)性的，node了解過嗎
12.for in 和 for of 有什么區(qū)別？for in 可以循環(huán)對象，可以循環(huán)到原型上嗎（可以）
13.了解過set map 嗎？set為什么能去重?map可以去重嗎
14. apply和call有什么區(qū)別？bind和apply和call有什么區(qū)別？判斷一個(gè)數(shù)據(jù)類型怎么去判斷，object.prototype.toString.call()， call可以改成bind嗎

15.可以共享屏幕嗎？我們來做幾道題吧。
15.1 多維數(shù)組改為一維，不用flat，那個(gè)方法有問題
15.2 給你一個(gè)數(shù)，求出它的最大質(zhì)因數(shù)
16.git 如何摘除有bug的代碼，代碼已經(jīng)提上去了，其他人也提上去了，你怎么把你有bug的那部分給摘出來
17.git如何刪除被緩存的文件，如何切換分支/如何創(chuàng)建分支/git fetch 和git pull 有什么區(qū)別
18.你有什么要問我的
我：“大廠招人比較看重什么”
答：“我們可能不需要你把原理、源碼了解的多熟，更看重你遇到問題時(shí)的思路和想法?！?br> 我：“您覺得作為開發(fā)者，最重要的能力是什么？”
答：“…(此處省略)…凡事多問一個(gè)為什么”

2.2 字節(jié)

1.vue和react你都用過，那你說一下他們的區(qū)別？
2.說一下你理解的Fiber？EffectTag如果是新增的話，它的標(biāo)記是什么？EffectTag是一個(gè)什么樣的結(jié)構(gòu)？useEffect和useLayoutEffect的區(qū)別？你知道useEffect在commitWork階段是怎么執(zhí)行的？
3.說一下你對TailWind的理解。TailWind你用的是哪個(gè)版本。Tailwind是動(dòng)態(tài)組合的，這種方式去做的，你知道它是怎么去實(shí)現(xiàn)這種能力的嗎？
4.你說一下原型鏈吧，什么是原型鏈？prototype為什么是空的對象？有一個(gè)構(gòu)造函數(shù)A，我要添加一些方法，讓實(shí)例化的對象能用到這個(gè)方法，我要怎么做呢?有一個(gè)構(gòu)造函數(shù)A,上面有一個(gè)靜態(tài)的屬性，比如果message，那我怎么實(shí)現(xiàn)，子類的構(gòu)造函數(shù)去繼承它？組合寄生式繼承，了解過嗎？咱們先，口噴一下組合寄生式繼承？我看你一直用指針的概念，你對C語言這塊有了解嗎？
5.你提到了模塊化，那你說一下js有哪些模塊化？Es6和你剛才提到的Es6模塊化有什么區(qū)別？
6.你用過ELementUi用過AntdDesign，你知道他們怎么實(shí)現(xiàn)響應(yīng)式的嗎？
7.ok，看一下你的項(xiàng)目吧，除了openlayers還用過其他圖形圖表的庫？你用過echarts，你對更底層的東西了解過嗎，比如說d3，提升頁面效率你是怎么算出來的？有沒有算過費(fèi)效比？你封裝的組件是怎么給別人復(fù)用的？放在某個(gè)文件夾里？還是口口相傳？還是拿出來，做了一個(gè)公共組件庫，推到npm庫里面，哪種用法？寫過單測沒？看你帶過團(tuán)隊(duì)，能說一下你是怎么管理他們的嗎？有沒有培養(yǎng)大家的工作？
8.問一下細(xì)節(jié)，echarts熱力圖用過么？熱力圖有個(gè)問題，數(shù)據(jù)不是趨近于正態(tài)分布，前兩個(gè)數(shù)據(jù)13 15 突然有一個(gè)數(shù)據(jù)是99，那你去渲染這個(gè)熱力圖，99那個(gè)點(diǎn)特別突出，有沒有遇到過這種情況，沒有遇到過現(xiàn)在想一下，怎么去解？你有什么比較好的解法？
9.你說一下vue-router和react-router的區(qū)別，react-router用的哪個(gè)版本？說一下history和hash的區(qū)別？生產(chǎn)環(huán)境下項(xiàng)目用的哪個(gè)？
10.說一下什么是柯里化?你知不知道在設(shè)計(jì)模式上，可以用哪個(gè)設(shè)計(jì)模式實(shí)現(xiàn)？
11.我的問題差不多了，你有什么想要問我的？
我：“您覺得我還有哪些不足？”
答：
“看出來你比背面試題的好很多，還是認(rèn)真去學(xué)了一些東西的，fiber你能答上來還讓我挺驚訝的，這一塊還不錯(cuò)?！?br> ” 你傳達(dá)給我的信息是，你是一個(gè)很好學(xué)，很鉆研，對有些東西又比較了解，然后基礎(chǔ)知識(shí)也還行的這樣的一個(gè)人。有些東西你了解了，但是從你的描述上來說，它沒有能指導(dǎo)你在開發(fā)的時(shí)候去提升。如果說，因?yàn)槟懔私庠创a，所以感覺你在工作上，在一些思路上，一些思想上，都受到了它的影響，這就是另一個(gè)層面上的了?！?/p>

這兩個(gè)面試官都很和藹，面完還聊了很多，學(xué)了很多東西，體驗(yàn)賊好。

3.面試題

1.原生

1.1 盒模型
1.2 BFC
1.3 清除浮動(dòng)
1.4 什么時(shí)候會(huì)造成內(nèi)存泄漏
1.5 數(shù)組方法 map和forEach的區(qū)別
1.6 事件循環(huán)
1.7 防抖和節(jié)流的區(qū)別
1.8 數(shù)組去重的方法
1.9 數(shù)組扁平化處理 flat
1.10 js模塊化
1.10.1 什么是模塊化？
1.10.2 模塊化的好處
1.10.3 IIFE： 匿名函數(shù)自調(diào)用
1.10.4 CJS - Commonjs
1.10.5 AMD規(guī)范
1.10.6 CMD
1.10.7 ES6模塊化
1.11 繼承與原型、原型鏈
1.12 call、apply、bind區(qū)別
1.13 數(shù)組的哪些方法是深拷貝？使用過lodash嗎？
1.14 檢測數(shù)據(jù)類型的方法( instanceof \typeof)
1.15 實(shí)現(xiàn)深拷貝
1.16 git常用命令
1.17 數(shù)組方法lodash
1.17.1 cloneDeep 深克隆
1.17.2 Unique 比較不同、merge
1.18 z-index什么情境下失效

2.react

2.1 函數(shù)組件和類組件的區(qū)別
2.2 setState的幾種使用方式
2.3 受控組件和非受控組件
2.4 useMemo和useCallback的用法及區(qū)別
2.5 axios的攔截與封裝
2.6 MVC、MVVM、MVP的理解
2.7 對有狀態(tài)組件和無狀態(tài)組件的理解
2.8 React Hooks在平時(shí)開發(fā)中需要注意的問題
2.9 React生命周期
2.9.1 掛載階段
constructor
getDerviedStateFromProps
render
componentDidMount()
2.9.2 組件更新階段
shouldComponentUpdate
getSnapshotBeforeUpdate
componentDidUpdate
2.9.3 組件卸載階段
componentWillUnmount
2.94 useeffect 代替了哪些生命周期
2.10 react合成事件
2.11 如何實(shí)現(xiàn)路由守衛(wèi)
2.12 虛擬dom一定快嗎
2.13 為什么會(huì)有hooks

3.vue（主框架為react，這里問的少）

3.1 vue守衛(wèi)
3.2 雙向綁定原理
3.3 組件傳值

4.ES6

4.1 promise 傳入函數(shù)是異步還是同步
4.2 set與map
4.3 es6新增語法有哪些
4.4 promise 用過哪些api
4.5 cookie/localstorage/sessionstorage
4.6 const/let/var
4.7 async與await
4.8 新增的數(shù)組方法
4.9 拓展運(yùn)算符 及 symbol

5.其他

5.1 發(fā)布訂閱者模式
5.2 webpack的優(yōu)化插件
5.1 css預(yù)處理器
5.2 MVVM、MVC的理解
5.3 哪些方法能夠處理異步
5.4 跨域怎么解決
5.5 如何部署

6.場景

6.1 element-ui 中表格的實(shí)現(xiàn)，傳入一個(gè)columns和datas數(shù)組，如何渲染成表格？
6.2 PC端登錄時(shí)手機(jī)二維碼掃碼登錄，如何實(shí)現(xiàn)？
6.3 一個(gè)input框，默認(rèn)值為1，輸入1234 失去焦點(diǎn)值改為1234，點(diǎn)擊取消仍是1，怎么實(shí)現(xiàn)？點(diǎn)擊取消時(shí)會(huì)不會(huì)執(zhí)行失去焦點(diǎn)函數(shù)？
6.4 一組字符串，獲得出現(xiàn)次數(shù)最多的字符并返回出現(xiàn)次數(shù)
6.5 一個(gè)字符串let a=‘123efw4k5’,實(shí)現(xiàn)過濾，只要字母

7. 關(guān)于優(yōu)化

7.1 防抖和節(jié)流
7.2 回流與重繪
7.21 如何避免重繪和回流
7.3 webpack
7.4 圖片的優(yōu)化
7.5 懶加載、預(yù)加載

8. 計(jì)算機(jī)網(wǎng)絡(luò)

8.1 在瀏覽器輸入地址后，按下回車鍵，都發(fā)生了什么？
8.2 https與http
8.3 UDP 與 TCP
8.4 http1.0 /http1.1/http2.0

結(jié)尾

個(gè)人覺得，前端是一個(gè)漸進(jìn)式的學(xué)習(xí)過程，不要覺得了解原理、源碼沒有用。學(xué)的越多用到的就越多。部分面試題答案（整理了一部分）：部分答案文章來源地址http://www.zghlxwxcb.cn/news/detail-491117.html

到了這里，關(guān)于2023前端面經(jīng)（面試準(zhǔn)備+面試題）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！