寫給女友的中級前端面試祕籍（含詳細答案，15k級別）

前言

本篇文章，獻給我家女友，祝她在杭州找一個965的好公司！

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

HTML篇

HTML5語義化

html5語義化標籤

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

CSS篇

CSS常見面試題

50道CSS經典面試題

CSS基礎有的公司很重視，在面試前仍是須要好好複習一遍的。

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

阮一峯的flex系列

Flex佈局是高頻考點，並且是日常開發中最經常使用的佈局方式之一，必定要熟悉。

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

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

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

JS基礎篇

講講JS的數據類型？

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

• 7 種原始類型
  • Boolean
  • Null
  • Undefined
  • Number
  • BigInt
  • String
  • Symbol
• Object

講講Map和Set？

1. Map的key相比較普通對象來講更爲靈活，普通對象的key只能以基礎數據類型做爲key值，而且全部傳入的key值都會被轉化成string類型，而Map的key能夠是各類數據類型格式。
2. Set能夠講講它去重的特性。

WeakMap和Map之間的區別？

WeakMap只能以複雜數據類型做爲key，而且key值是弱引用，對於垃圾回收更加友好。

講講原型鏈？

JavaScript深刻之從原型到原型鏈

關於原型鏈，雖然如今用的不太多了，可是__proto__和prototype之間的關係，以及對於屬性的向上查找這些仍是必定要清楚的，其他不用看的太細。

講講this？

JavaScript中的this

1. this指向調用者這個關係必定要清楚
2. 要知道改變this指向的幾種方式(call, bind, apply)
3. 箭頭函數中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()語法，值得仔細看看。

網絡

講講http的基本結構？

http的基礎結構

說說經常使用的http狀態碼？

http狀態碼

瀏覽器從輸入url到渲染頁面，發生了什麼？

細說瀏覽器輸入URL後發生了什麼

講講你對cookie的理解？包括SameSite屬性。

預測最近面試會考 Cookie 的 SameSite 屬性

這篇文章能夠主要講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類

❤️感謝你們

1.若是本文對你有幫助，就點個贊支持下吧，你的「贊」是我創做的動力。

2.關注公衆號「前端從進階到入院」便可加我好友，我拉你進「前端進階交流羣」，你們一塊兒共同交流和進步。