2019大廠面試必備

                                          想要升職加薪的都關注我了~

（關注福利，關注本公衆號根據提示回覆領取優質前端視頻，包括Vue、React視頻實戰、面試指導...）

聲明：此文乾的不行，備好紙巾以防乾哭

目錄：

對async、await的理解，內部原理 ？

介紹下Promise，內部實現

從輸入URL到頁面加載全過程經歷了什麼？

bind、call、apply的區別

介紹下原型鏈（解決的是繼承問題嗎）

對跨域的瞭解

前端怎麼作單元測試

前端性能優化

至於框架面試題相關請繼續關注本公衆號

接下來會一個一個完美解答 ↓ ↓ ↓

對async、await的理解，內部原理 ？

首先先從字面意思來理解。async 是「異步」的簡寫，而 await 能夠認爲是 async wait 的簡寫。因此應該很好理解 async 用於申明一個 function 是異步的，而 await 用於等待一個異步方法執行完成。

async 和 async 是ES7新增的規範，兩個規範能夠當作一隊連體嬰，他們要一塊兒出現纔有效果：

async 會將其後的函數（函數表達式或 Lambda）的返回值封裝成一個 Promise 對象，而 await 會等待這個 Promise 完成，並將其 resolve 的結果返回出來。

也就是說，只有當 async 函數內部的異步操做都執行完，纔會執行 then 方法的回調。

注意：Async 函數的錯誤處理

當 async 函數中只要一個 await 出現 reject 狀態，則後面的 await 都不會被執行。

解決辦法：能夠添加 try/catch。

介紹下Promise，實現原理

既然說到promise首先我們先來瞭解一下他的核心概念：

Promise 歸納來講是對異步的執行結果的描述對象。（這句話的理解很重要）

promise 的狀態只有3種：pending fulfilled rejected分別爲等待、執行成功和執行失敗狀態。

爲何要使用它？

利用 Promise 可讓異步編程更符合人的直覺，讓代碼邏輯更加清晰，把開發人員從回調地獄中釋放出來。

實現

Promise對象是一個構造函數，用來生成Promise實例。經過在函數內部return 一個 Promise對象的實例，這樣就可使用Promise的屬性和方法進行下一步操做了。

列子

從輸入URL到頁面加載全過程經歷了什麼

1. DNS 解析

2. TCP 鏈接

3. HTTP 請求拋出

4. 服務端處理請求，HTTP 響應返回

5. 瀏覽器拿到響應數據，解析響應內容，把解析的結果展現給用戶

擴展（向面試官要分數）

對於前端來講想優化的話能夠作的事情很是有限。

HTTP 優化有兩個大的方向：

減小請求次數

減小單次請求所花費的時間

bind、call、apply的區別

call()、apply()、bind() 都是用來重定義 this 這個對象的

它們的區別主要是在於方法的實現形式和參數傳遞上的不一樣

①：函數.call(對象,arg1,arg2....)

②：函數.apply(對象，[arg1,arg2,...])

③：var ss=函數.bind(對象,arg1,arg2,....)

介紹下原型鏈（解決的是繼承問題嗎）

通俗易懂的說明：

小明媽也是由小明媽的媽媽生的，經過小明媽找到小明媽的媽媽，再經過小明媽的媽媽找到媽媽……，這個關係叫作原型鏈。

一張圖帶你秒懂

對跨域的瞭解

跨域，指的是瀏覽器不能執行其餘網站的腳本。它是由瀏覽器的同源策略形成的，是瀏覽器對JavaScript施加的安全限制。

所謂的同源，指的是域名、協議、端口均相等。

http://www.abc.com/a/b 調用 http://www.abc.com/d/c（非跨域）

http://www.abc.com/a/b 調用 http://www.def.com/d/c （跨域：域名不一致）

http://www.abc.com:81/a/b 調用 http://www.abc.com:82/d/c （跨域：端口不一致）

http://www.abc.com/a/b 調用 https://www.abc.com/d/c （跨域：協議不一樣）

解決跨域問題，有以下三種方式：

一、使用jsonp

二、服務器代理

三、在服務端設置response header中Access-Control-Allow-Origin字段。

綜上三種解決跨域的方案，我的感受使用服務代理最好，沒有破壞瀏覽器的安全策略，但這個對開發環境要高一點。設置response header的方式，根據具體狀況分析，要考慮清楚產品面向的用戶。對於jsonp這種方式，雖然沒有破壞瀏覽器的安全策略，但只支持get方式的請求，有點不能接受，由於get傳輸有參數長度的限制，同時又要考慮傳輸中文的亂碼問題，但若是項目中只是簡單的查詢、展現，這種方式仍是能夠考慮的。

前端單元測試

什麼是單元測試？

每一個單元測試就是一段用於測試一個模塊或接口是否能達到預期結果的代碼。開發人員須要使用代碼來定義一個可用的衡量標準，而且能夠快速檢驗。

爲何要單元測試？

單元測試應該是一個框架、標準，常常被形容被腳手架，像建築同樣，腳手架的高度至少應該和大樓高度不相上下，甚至一開始就搭好腳手架。

怎麼作這裏不作過多描述 詳情訪問：https://blog.csdn.net/Frank_YLL/article/details/79058616

前端性能優化

先來張nb的圖（此乃阿里前端大神修言親做）

一）內容層面

一、DNS解析優化（DNS緩存、減小DNS查找、keep-alive、適當的主機域名）

二、避免重定向（/仍是須要的）

三、切分到多個域名

四、杜絕404

二）網絡傳輸階段

一、減小傳輸過程當中實體的大小

1）緩存

2）cookie優化

3）文件壓縮（Accept-Encoding：g-zip）

二、減小請求的次數

1）文件適當的合併

2）雪碧圖

三、異步加載（併發,requirejs）

四、預加載、延後加載、按需加載

三）渲染階段

一、js放底部，css放頂部

二、減小重繪和迴流

三、合理使用Viewport 等meta頭部

四、減小dom節點

五、BigPipe

四）腳本執行階段

一、緩存節點，儘可能減小節點的查找

二、減小節點的操做（innerHTML）

三、避免無謂的循環，break、continue、return的適當使用

四、事件委託

交流

本人Github連接以下，歡迎各位Star

https://github.com/Xingen123

長按掃碼關注我

乾貨都給你