2021前端面試必備題答案

vue3.0新特性教程

vue原始碼解析系列

閒雲旅遊專案(vue+element-ui)

前端vue3.0從0到1手把手擼碼搭建管理後台系統

乙個 tcp 連線能發幾個 http 請求？

而如果是 http 1.1 版本協議，支援了長連線，因此只要 tcp 連線不斷開，便可以一直傳送 http 請求，持續不斷，沒有上限；同樣，如果是 http 2.0 版本協議，支援多用復用，乙個 tcp 連線是可以併發多個 http 請求的，同樣也是支援長連線，因此只要不斷開 tcp 的連線，http 請求數也是可以沒有上限地持續傳送

virtual dom 的優勢在**？

virtual dom 的優勢」其實這道題目面試官更想聽到的答案不是上來就說「直接操作/頻繁操作 dom 的效能差」，如果 dom 操作的效能如此不堪，那麼 jquery 也不至於活到今天。所以面試官更想聽到 vdom 想解決的問題以及為什麼頻繁的 dom 操作會效能差。

首先我們需要知道：

dom 引擎、js 引擎相互獨立，但又工作在同一執行緒（主線程） js **呼叫 dom api 必須掛起 js 引擎、轉換傳入引數資料、啟用 dom 引擎，dom 重繪後再轉換可能有的返回值，最後啟用 js 引擎並繼續執行若有頻繁的 dom api 呼叫，且瀏覽器廠商不做「批量處理」優化，引擎間切換的單位代價將迅速積累若其中有強制重繪的 dom api 呼叫，重新計算布局、重新繪製影象會引起更大的效能消耗。

其次是 vdom 和真實 dom 的區別和優化：

虛擬 dom 不會立馬進行排版與重繪操作

虛擬 dom 進行頻繁修改，然後一次性比較並修改真實 dom 中需要改的部分，最後在真實 dom 中進行排版與重繪，減少過多dom節點排版與重繪損耗

虛擬 dom 有效降低大面積真實 dom 的重繪與排版，因為最終與真實 dom 比較差異，可以只渲染區域性

首屏和白屏時間如何計算

首屏時間的計算，可以由 native webview 提供的類似 onload 的方法實現，在 ios 下對應的是 webviewdidfinishload，在 android 下對應的是onpagefinished事件。

白屏的定義有多種。可以認為「沒有任何內容」是白屏，可以認為「網路或服務異常」是白屏，可以認為「資料載入中」是白屏，可以認為「載入不出來」是白屏。場景不同，白屏的計算方式就不相同。

方法1：當頁面的元素數小於x時，則認為頁面白屏。比如「沒有任何內容」，可以獲取頁面的dom節點數，判斷dom節點數少於某個閾值x，則認為白屏。方法2：當頁面出現業務定義的錯誤碼時，則認為是白屏。比如「網路或服務異常」。方法3：當頁面出現業務定義的特徵值時，則認為是白屏。比如「資料載入中」。

介紹下 promise 的特性、優缺點，內部是如何實現的，動手實現 promise

1）promise基本特性

2）promise優點

②promise 與事件對比

③promise 與**對比

④promise 帶來的額外好處是包含了更好的錯誤處理方式（包含了異常處理），並且寫起來很輕鬆（因為可以重用一些同步的工具，比如 array.prototype.map() ）。

3）promise缺點

4）簡單**實現

最簡單的promise實現有7個主要屬性, state(狀態), value(成功返回值), reason(錯誤資訊), resolve方法, reject方法, then方法

class promise
};let reject = reason => 
};try  catch (err) 
}  then(onfulfilled, onrejected) ;
if (this.state === 'rejected') ;
}}

5）面試夠用版

function mypromise(constructor)
}  function reject(reason)
}  //捕獲構造異常 
trycatch(e) 
}mypromise.prototype.then=function(onfullfilled,onrejected)
}// 測試
var p=new mypromise(function(resolve,reject)); 
p.then(function(x))
//輸出1

6）大廠專供版

const pending = "pending"; 
const fulfilled = "fulfilled"; 
const rejected = "rejected";
const resolvepromise = (promise, x, resolve, reject) => 
// if x is an object or function,
if (x !== null && typeof x === 'object' || typeof x === 'function') , r => )
} else 
} catch (e) 
} else 
}function promise(excutor) 
// 實踐中要確保 onfulfilled 和 onrejected ⽅方法非同步執⾏行行，且應該在 then ⽅方法被調⽤用的那⼀一輪事件迴圈之後的新執⾏行行棧中執⾏行行。
settimeout(() => 
});}  function reject(reason) 
});}  // 捕獲在excutor執⾏行行器器中丟擲的異常
// new promise((resolve, reject) => )
try  catch (e) 
}promise.prototype.then = function(onfulfilled, onrejected) ;
if (that.status === fulfilled)  catch(e) 
});})
}  if (that.status === rejected)  catch(e) 
});});
}  if (that.status === pending)  catch(e) 
});that.onrejectedcallbacks.push((reason) =>  catch(e) 
});});
}};

手寫發布訂閱

class eventlistener ;
on(name, fn) 
once(name, fn) 
fn.fn = tem
this.on(name, tem)
}removelistener(name, fn) 
}removealllisteners(name) 
}emit(name, ...args) 
}}

vue 為什麼要用 vm.$set() 解決物件新增屬性不能響應的問題？你能說說如下**的實現原理麼？

1）vue為什麼要用vm.$set() 解決物件新增屬性不能響應的問題

vue使用了object.defineproperty實現雙向資料繫結

在初始化例項時對屬性執行 getter/setter 轉化

屬性必須在data物件上存在才能讓vue將它轉換為響應式的（這也就造成了vue無法檢測到物件屬性的新增或刪除）

所以vue提供了vue.set (object, propertyname, value) / vm.$set (object, propertyname, value)

2）接下來我們看看框架本身是如何實現的呢?

vue 原始碼位置：vue/src/core/instance/index.js

export function set (target: array| object, key: any, val: any): any 
// key 已經存在，直接修改屬性值  
if (key in target && !(key in object.prototype)) 
const ob = (target: any).__ob__
// target 本身就不是響應式資料, 直接賦值
if (!ob) 
// 對屬性進行響應式處理
definereactive(ob.value, key, val)
ob.dep.notify()
return val
}

如果目標是陣列，直接使用陣列的 splice 方法觸發相應式；

如果目標是物件，會先判讀屬性是否存在、物件是否是響應式，

最終如果要對屬性進行響應式處理，則是通過呼叫 definereactive 方法進行響應式處理

definereactive 方法就是 vue 在初始化物件時，給物件屬性採用 object.defineproperty 動態新增 getter 和 setter 的功能所呼叫的方法

2021前端面試必備題答案

2023年前端面試相關

前端面試題和答案

Python 前端面試題（附答案）

2021前端面試必備題 答案

2023年前端面試相關

前端面試題和答案

Python 前端面試題（附答案）

相關推薦

2021前端面試必備題答案