2020最新中級web前端面試題庫（含詳細答案，15k級別）你會幾道呢？

前言

1.本篇文章，獻給我家女朋友，祝她在杭州找一個965的好公司！
2.除了面試題。結合多年開發經驗整理出2020最新企業級實戰視頻教程，包括 Vue3.0/Js/ES6/TS/React/node等想學的可進裙 519293536 免費獲取，小白勿進哦！

題外話：關於中級 -> 高級的進階，我也寫了一篇文章，希望對你有幫助：寫給初中級前端的高級進階指南

HTML篇

HTML5語義化

html5語義化標簽

百度ife的h5語義化文章，講得很好，很多不錯的公司都會問語義化的問題。

CSS篇

CSS常見面試題

50道CSS經典面試題

CSS基礎有的公司很重視，在面試前還是需要好好復習一遍的。

能不能講一講Flex布局，以及常用的屬性？。

阮一峰的flex系列

Flex布局是高頻考點，而且是平常開發中最常用的布局方式之一，一定要熟悉。

BFC是什么？能解決什么問題？

什么是BFC？什么條件下會觸發？應用場景有哪些？

關於bfc，可以看看三元大佬總結的文章
這篇文章里，順便也把外邊距重疊的問題講了一下。

JS基礎篇

講講JS的數據類型？

最新的 ECMAScript 標准定義了 8種數據類型:

6 種原始類型
- Boolean
- Undefined
- Number
- BigInt
- String
- Symbol
null
Object
Function

developer.mozilla.org/en-US/docs/…

講講Map和Set？

Map的key相比較普通對象來說更為靈活，普通對象的key只能以基礎數據類型作為key值，並且所有傳入的key值都會被轉化成string類型，而Map的key可以是各種數據類型格式。
Set可以講講它去重的特性。

WeakMap和Map之間的區別？

WeakMap只能以復雜數據類型作為key，並且key值是弱引用，對於垃圾回收更加友好。

講講原型鏈？

JavaScript深入之從原型到原型鏈

關於原型鏈，雖然現在用的不太多了，但是__proto__和prototype之間的關系，以及對於屬性的向上查找這些還是一定要清楚的，其余不用看的太細。

講講this？

JavaScript中的this

this指向調用者這個關系一定要清楚

要知道改變this指向的幾種方式(call, bind, apply)

箭頭函數中this的特殊性要能講清楚

淺拷貝和深拷貝的區別

淺拷貝：一般指的是把對象的第一層拷貝到一個新對象上去，比如

var a = { count: 1, deep: { count: 2 } } var b = Object.assign({}, a) // 或者 var b = {...a} 復制代碼

深拷貝：一般需要借助遞歸實現，如果對象的值還是個對象，要進一步的深入拷貝，完全替換掉每一個復雜類型的引用。

var deepCopy = (obj) => { var ret = {} for (var key in obj) { var value = obj[key] ret[key] = typeof value === 'object' ? deepCopy(value) : value } return ret } 復制代碼

對於同一個用例來說

// 淺拷貝 var a = { count: 1, deep: { count: 2 } } var b = {...a} a.deep.count = 5 b.deep.count // 5 復制代碼

var a = { count: 1, deep: { count: 2 } } var b = deepCopy(a) a.deep.count = 5 b.deep.count // 2 復制代碼

講講事件冒泡和事件捕獲以及事件代理？

你真的理解事件冒泡和事件捕獲嗎？

框架篇

React

React需要盡可能的保證熟練。因為作為中級工程師來說，公司可能不會讓你去寫框架，調性能優化，但是一定是會讓你保質保量的完成開發任務的，這需要你能熟練掌握框架。

React2019高頻面試題

2019年17道高頻React面試題及詳解

這些題可以先過一下，如果暫時不能理解的就先跳過，不需要死磕。

有沒有使用過 React Hooks？

常用的有哪些？都有什么作用？
如何使用hook在依賴改變的時候重新發送請求？
寫過自定義hook嗎？解決了哪些問題。
講講React Hooks的閉包陷阱，你是怎么解決的？

useEffect 完整指南

其實關於Hook的問題，把Dan的博文稍微過一遍，基本上就可以和面試官談笑風生了。

講講React中的組件復用？

【React深入】從Mixin到HOC再到Hook

這篇文章從mixin到HOC到Hook，詳細的講解了React在組件復用中做的一些探索和發展，能把這個好好講明白，面試官也會對你的React實力刮目相看。另外這篇文章中的高階組件和Hook本身也是高頻考點。

工具

webpack的基礎知識

這個系列從基礎到優化都有，可以自己選擇深入
掘金劉小夕的webpack系列

性能優化

講講web各個階段的性能優化？

React 16 加載性能優化指南

這個很長，很細節，一樣不要死磕其中的某一個點，對於你大概知道的點再鞏固一下印象就ok。

webpack代碼分割是怎么做的？

webpack的代碼分割（路由懶加載同理）

路由懶加載和webpack異步加載模塊都是這個import()語法，值得仔細看看。

網絡

這篇文章可以主要講chrome80新增的cookie的SameSite屬性，另外對於cookie整體也可以復習和回顧一遍，非常棒~

談談https的原理？為什么https能保證安全？

談談 HTTPS

https也是一個高頻考點，需要過一遍https的加密原理。

談談前端的安全知識？XSS、CSRF，以及如何防范。

寒冬求職之你必須要懂的Web安全

安全問題也是很多公司必問的，畢竟誰也不希望自己的前端寫的網站漏洞百出嘛。

講講http的緩存機制吧，強緩存，協商緩存？

深入理解瀏覽器的緩存機制

瀏覽器緩存基本上是必問的，這篇文章非常值得一看。

手寫系列

基礎

手寫各種原生方法

如何模擬實現一個new的效果？
如何模擬實現一個 bind 的效果？
如何實現一個 call/apply 函數？
三元-手寫代碼系列

說實話我不太喜歡手寫代碼的面試題，但是很多公司喜歡考這個，有余力的話還是過一遍吧。

進階

手寫Promise 20行

精力有限的情況下，就先別背A+規范的promise手寫了，但是如果有時間的話，可以大概過一遍文章，然后如果面試的時候考到了，再用簡短的方式寫出來。
剖析Promise內部結構，一步一步實現一個完整的、能通過所有Test case的Promise類

最后注意：除了面試題。結合多年開發經驗整理出2020最新企業級實戰視頻教程，包括 Vue3.0/Js/ES6/TS/React/node等想學的可進裙 519293536 免費獲取，小白勿進哦！

本文的文字及圖片來源於網絡加上自己的想法,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯系我們以作處理