前端面試問題總結

淺拷貝、深拷貝之間的區別

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

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

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

實現深拷貝，用什麼方法來實現:
JSON.parse() + JSON.stringify()（缺點：只能處理能夠被枚舉的屬性）；
原理： 用JSON.stringify將對象轉成JSON字符串，再用JSON.parse()把字符串解析成對象，一去一來，新的對象產生了，並且對象會開闢新的棧，實現深拷貝。

let arr = [1, 3, {
   username: ' kobe'
}];
let arr4 = JSON.parse(JSON.stringify(arr));

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

** 從輸入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-p...
gzip、雪碧圖、減小http請求數、減小DNS請求、避免重定向、緩存ajax請求、延遲加載、預加載、減小DOM數、使用框架例如React的虛擬DOM樹、減小DOM操做、使用CDN、減小 css 裏 @import 寫法、
十、圖片使用 雪碧圖 和 base64字符串 你以爲哪一個好？爲何？
雪碧圖能夠緩存；
base64能夠減小請求數；
進階一：若是你決定使用雪碧圖/base64字符串，你會怎麼作？

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