2019前端面試題（持續更新）

最近也在準備換工做了，而後收集了一些我以爲今年面試會遇到常見的問題。

若是有機會，記得也幫忙分享我一下。
2019的行情確實很糟糕。看到這麼多人收藏點贊。個人心裏也是哇涼哇涼的。
我也給一些除了面試題以外的經驗吧

我相信不景氣也是相對的，提高自我也是必要的。我說說我最近在準備些什麼。

• 首先優化本身的博客。有技術博客的求職者，一定會給面試官篩選簡歷時一個很好的印象
• 針對你想求職的企業規模，乘着這段時間，深刻的瞭解一些源碼。如中型企業大多都偏心vue。我最近也在研究其中的源碼。
• 更高bigger的，能夠在研究框架源碼中，得出一些經驗，寫一套本身框架。目前我也正在準備。
• 還有本身的npm的組件包。

1，講講淺拷貝、深拷貝之間的區別

核心：引用類型和非引用類型的拷貝結果是不一樣的

淺拷貝只是拷貝基本類型的數據，若是父對象的屬性等於數組或另外一個對象，那麼實際上，子對象得到的只是一個內存地址，所以存在父對象被篡改的可能，淺拷貝只複製指向某個對象的指針，而不復制對象自己，新舊對象仍是共享同一塊內存

//簡單的淺拷貝
var a = 1;
var b = a;//賦值
console.log(b) //1
a = 2;//改變a的值
console.log(b) //1

• 若是要實現深拷貝，用什麼方法來實現

JSON.parse() + JSON.stringify()（缺點：只能處理能夠被枚舉的屬性）；
for in 循環遞歸遍歷；

深拷貝就是可以實現真正意義上的數組和對象的拷貝。遞歸調用"淺拷貝"。（深拷貝會另外創造一個如出一轍的對象，新對象跟原對象不共享內存，修改新對象不會改到原對象）

• 若是你想要實現支持setter和getter特性的拷貝，該怎麼實現？

Object.defineproperties （定義屬性）、Object.getOwnPropertyDescriptors（es2017，獲取對象的多個屬性）、Object.getOwnPropertyDescriptor（老一點，獲取對象的單個屬性的屬性），但babel能夠解決。

二、原型鏈的prototype和__proto__的區別；

• prototype 在 new 示例後會被轉爲 __proto__
• __proto__是非標準化的；

全部東西的原型鏈向上延伸到原型鏈的頂端，是什麼；

• Object.prototype.__proto__，結果是null.

Function自己就是函數，
Function.__proto__
是標準的內置對象Function.prototype，
Function.prototype.__proto__
是標準的內置對象Object.prototype

三、若是想實現繼承，說幾種你知道的方法？

• 原型鏈繼承、構造繼承、實例繼承、拷貝繼承、組合繼承、寄生組合繼承

原型鏈繼承

三、var、let、const的區別；

• var 會變量提高；
• let 聲明的變量只在它所在的代碼塊有效；
• const 聲明後不能再修改其指向的目標，假如const 指向的是一個對象/數組，那麼雖然不能更改指向目標，可是能夠更改對象和數組內部的值；

進階一：說到變量提高，class 聲明一個類時，存在變量提高麼？爲何？

• 不存在。由於要方便類的繼承，先聲明子類再聲明父類；

進階二：const 聲明一個對象，如何讓對象內部的屬性的值也沒法改變？

• 使用Object.freeze()鎖死（es5新增特性）；
• 對數組等引用類型的值，仍是能修改的；

進階三：全局做用域？函數做用域？塊級做用域？做用域鏈？

js有哪些基本數據類型？

• Boolean、Null、Undefined、Number、String、Object；
• Symbol（es6新增）

進階：es6新增的原型數據類型Symbol，特色是什麼；

• 表示獨一無二的值；
• 聲明時不能使用new Symbol()，而是 Symbol()；
• 聲明時能夠加參數，用於描述；
• 做爲key時不能被遍歷；

進階2：如何聲明兩個相等的Symbol變量？

• 使用Symbol.for，參數相同時；

let a = Symbol.for('a');
let b = Symbol.for('a');
a === b; // true

#### Promise是什麼？

* 是異步編程的一種解決方案；
* 所謂Promise，簡單說就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。從語法上說，Promise 是一個對象，從它能夠獲取異步操做的消息。

通常何時使用？

* 處理異步請求時使用，好比ajax請求；

有哪些狀態？

* 狀態有pending、resolved、rejected；

怎麼捕獲他的錯誤？

* 最後寫catch；
* then裏面第二個參數能夠捕獲；

若是內部拋錯，可是沒有被捕獲，這個沒被捕獲的錯誤接下來會發生什麼事情？

* 冒泡；

能不能被try catch捕獲？爲何？

* 不能，由於是異步編程。

能不能被window.onerror捕獲？

* 不能

new Promise((resolve,reject)=>throw new Error('a')).then(fn1).then(fn2,fn3).catch(fn4) 這個函數，會執行哪些函數
* fn3，沒了

4,從輸入URL到瀏覽器顯示頁面發生了什麼。（特別注意）

這題能夠了解一下，儘管面試時候造飛船，真的幹活可能仍是擰螺絲。

• 1.在瀏覽器中輸入url（解析IP地址）
• 2.應用層DNS解析域名
• 3.應用層客戶端發送HTTP請求
• 4.傳輸層TCP傳輸報文(3次握手)
• 5.網絡層IP協議查詢MAC地址
• 6.數據到達數據鏈路層
• 7.服務器接收數據
• 8.服務器響應請求
• 9.服務器返回相應文件
• 2、頁面渲染：現代瀏覽器渲染頁面的過程是這樣的：解析HTML以構建DOM樹 –> 構建渲染樹 –> 佈局渲染樹 –> 繪製渲染樹。

在瀏覽器還沒接收到完整的HTML文件時，它就開始渲染頁面了，在遇到外部鏈入的腳本標籤或樣式標籤或圖片時，會再次發送HTTP請求重複上述的步驟。在收到CSS文件後會對已經渲染的頁面從新渲染，加入它們應有的樣式，圖片文件加載完馬上顯示在相應位置。在這一過程當中可能會觸發頁面的重繪或重排。

五、async、await 的使用場景是什麼？

連續的異步請求，下一步的異步請求依賴於前一步的異步請求結果；
進階一：假若有A、B、C三個異步請求，異步請求C依賴於異步請求A和B的結果（即A和B完成後再發起C），那麼你會如何實現它？

Promise.all()；
設置狀態分別標記A和B，A、B完成後會去修改本身的完成標記，而後檢查全部的狀態標記，假如都是完成狀態，而後去執行異步請求C。

六、Promise是什麼？

是異步編程的一種解決方案；
所謂Promise，簡單說就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。從語法上說，Promise 是一個對象，從它能夠獲取異步操做的消息。
通常何時使用？

處理異步請求時使用，好比ajax請求；
有哪些狀態？

狀態有pending、resolved、rejected；
怎麼捕獲他的錯誤？

最後寫catch；
then裏面第二個參數能夠捕獲；
若是內部拋錯，可是沒有被捕獲，這個沒被捕獲的錯誤接下來會發生什麼事情？

冒泡；
能不能被try catch捕獲？爲何？

不能，由於是異步編程。
能不能被window.onerror捕獲？

不能
new Promise((resolve,reject)=>throw new Error('a')).then(fn1).then(fn2,fn3).catch(fn4) 這個函數，會執行哪些函數 * fn3，沒了

七、數字計算：請問在js中，輸入表達式 0.1 + 0.2 的結果是什麼？

• 0.30000000000000004（能回答出來不是0.3，而是0.3後有若干個0和一個數字便可）

進階一：爲何？

• 緣由是浮點數和整數，在存儲時的方法是不一樣的，所以相加的規則也是不一樣的；

進階二：浮點數是怎麼存儲的（本問題比較難）（能夠跳到進階三，比本題簡單）

而double類型就是雙精度浮點數，這種指使用64位（8字節）來存儲一個浮點數。

根據規定，這64位bit裏，分爲三部分：

第一部分(1bit)：

符號位，表示正負，正數爲0，負數爲1。

第二部分(11bit)：

階碼位，也能夠稱爲指數位。

第三部分（52bit)

尾數位，即表示實際數字的。

假如正負符號的值爲S，正數S爲1，負數S爲-1；
假如指數位表示的值爲E（計算後），指數位表示的值爲2的E次方；
假如尾數位表示的值爲M，尾數位表示的值爲M；

根據科學表示法，任何一個範圍內的浮點數能夠經過如下方法來表示：（別問我爲啥，我沒去谷歌……）

浮點數 = S * Math.pow(2,E) * M;

進階三：咱們在實際開發中，若是碰見了這種浮點數計算的狀況，怎麼處理比較合適？

八、移動端開發的時候，通常怎麼實現自適應？

• rem
• vw和vh
• 媒體查詢（bootstrap）；

進階一：他們的特色分別是什麼？或者說實現原理是什麼？

• rem 根據 html 的 font-size；
• vw是瀏覽器窗口寬度，vh是高度；
• 媒體查詢是根據瀏覽器窗口寬度或高度，進行響應式選擇顯示哪一個css；

進階二：彈出輸入框會發生定位錯誤，fixed佈局，怎麼解決？

九、在咱們將開發好的頁面，進入線上環境的時候，確定要最大化性能優化，那麼咱們常見的作法有哪些？

• https://csspod.com/frontend-performance-best-practices/
• gzip、雪碧圖、減小http請求數、減小DNS請求、避免重定向、緩存ajax請求、延遲加載、預加載、減小DOM數、使用框架例如React的虛擬DOM樹、減小DOM操做、使用CDN、減小 css 裏 @import 寫法、

十、圖片使用 雪碧圖 和 base64字符串 你以爲哪一個好？爲何？

• 雪碧圖能夠緩存；
• base64能夠減小請求數；

進階一：若是你決定使用雪碧圖/base64字符串，你會怎麼作？

• webpack 配 url-loader（base64）；
• webpack 的雪碧圖插件 webpack-spritesmith；