前言 1.本篇文章，獻給我家女朋友，祝她在杭州找一個965的好公司！2.除了面試題。結合多年開發經驗整理出2020最新企業級實戰視頻教程， 包括 Vue3.0/Js/ES6/TS/React/node等想學的可進裙 519293536 免費獲取，小白勿進哦！ 題外話：關於中級 -> 高級的進階，我也 ...
前言
1.本篇文章，獻給我家女朋友，祝她在杭州找一個965的好公司！
2.除了面試題。結合多年開發經驗整理出2020最新企業級實戰視頻教程， 包括 Vue3.0/Js/ES6/TS/React/node等想學的可進裙 519293536 免費獲取，小白勿進哦！
題外話：關於中級 -> 高級的進階，我也寫了一篇文章，希望對你有幫助： 寫給初中級前端的高級進階指南
HTML篇
HTML5語義化
百度ife的h5語義化文章，講得很好，很多不錯的公司都會問語義化的問題。
CSS篇
CSS常見面試題
CSS基礎有的公司很重視，在面試前還是需要好好複習一遍的。
能不能講一講Flex佈局，以及常用的屬性？。
Flex佈局是高頻考點，而且是平常開發中最常用的佈局方式之一，一定要熟悉。
BFC是什麼？能解決什麼問題？
關於bfc，可以看看三元大佬總結的文章
這篇文章里，順便也把外邊距重疊的問題講了一下。
JS基礎篇
講講JS的數據類型？
最新的 ECMAScript 標准定義了 8種數據類型:
- 6 種原始類型
- Boolean
- Undefined
- Number
- BigInt
- String
- Symbol
- null
- Object
- Function
講講Map和Set？
- Map的key相比較普通對象來說更為靈活，普通對象的key只能以基礎數據類型作為key值，並且所有傳入的key值都會被轉化成string類型，而Map的key可以是各種數據類型格式。
- Set可以講講它去重的特性。
WeakMap和Map之間的區別？
WeakMap只能以複雜數據類型作為key，並且key值是弱引用，對於垃圾回收更加友好。
講講原型鏈？
關於原型鏈，雖然現在用的不太多了，但是__proto__和prototype之間的關係，以及對於屬性的向上查找這些還是一定要清楚的，其餘不用看的太細。
講講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高頻面試題
這些題可以先過一下，如果暫時不能理解的就先跳過，不需要死磕。
有沒有使用過 React Hooks？
- 常用的有哪些？都有什麼作用？
- 如何使用hook在依賴改變的時候重新發送請求？
- 寫過自定義hook嗎？解決了哪些問題。
- 講講React Hooks的閉包陷阱，你是怎麼解決的？
其實關於Hook的問題，把Dan的博文稍微過一遍，基本上就可以和麵試官談笑風生了。
講講React中的組件復用？
這篇文章從mixin到HOC到Hook，詳細的講解了React在組件復用中做的一些探索和發展，能把這個好好講明白，面試官也會對你的React實力刮目相看。 另外這篇文章中的
高階組件和Hook本身也是高頻考點。
工具
webpack的基礎知識
這個系列從基礎到優化都有，可以自己選擇深入
掘金劉小夕的webpack系列
性能優化
講講web各個階段的性能優化？
這個很長，很細節，一樣不要死磕其中的某一個點，對於你大概知道的點再鞏固一下印象就ok。
webpack代碼分割是怎麼做的？
路由懶載入和webpack非同步載入模塊都是這個import()語法，值得仔細看看。
網路
講講http的基本結構？
說說常用的http狀態碼？
瀏覽器從輸入url到渲染頁面，發生了什麼？
講講你對cookie的理解？包括SameSite屬性。
這篇文章可以主要講chrome80新增的cookie的SameSite屬性，另外對於cookie整體也可以複習和回顧一遍，非常棒~
談談https的原理？為什麼https能保證安全？
https也是一個高頻考點，需要過一遍https的加密原理。
談談前端的安全知識？XSS、CSRF，以及如何防範。
安全問題也是很多公司必問的，畢竟誰也不希望自己的前端寫的網站漏洞百出嘛。
講講http的緩存機制吧，強緩存，協商緩存？
瀏覽器緩存基本上是必問的，這篇文章非常值得一看。
手寫系列
基礎
手寫各種原生方法
如何模擬實現一個new的效果？
如何模擬實現一個 bind 的效果？
如何實現一個 call/apply 函數？
三元-手寫代碼系列
說實話我不太喜歡手寫代碼的面試題，但是很多公司喜歡考這個，有餘力的話還是過一遍吧。
進階
精力有限的情況下，就先別背A+規範的promise手寫了，但是如果有時間的話，可以大概過一遍文章，然後如果面試的時候考到了，再用簡短的方式寫出來。
剖析Promise內部結構，一步一步實現一個完整的、能通過所有Test case的Promise類最後註意：除了面試題。結合多年開發經驗整理出2020最新企業級實戰視頻教程， 包括 Vue3.0/Js/ES6/TS/React/node等想學的可進裙 519293536 免費獲取，小白勿進哦！
本文的文字及圖片來源於網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理
