這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
第一問：安全型別檢測——typeof和instanceof 區別以及缺陷，以及解決方案
這兩個方法都可以用來判斷變數型別
區別：前者是判斷這個變數是什么型別，后者是判斷這個變數是不是某種型別，回傳的是布林值
（1）typeof
缺陷：
1.不能判斷變數具體的資料型別比如陣列、正則、日期、物件，因為都會回傳object,不過可以判斷function，如果檢測物件是正則運算式的時候,在Safari和Chrome中使用typeof的時候會錯誤的回傳"function",其他的瀏覽器回傳的是object.
2.判斷null的時候回傳的是一個object，這是js的一個缺陷,判斷NaN的時候回傳是number
（2）instanceof 可以用來檢測這個變數是否為某種型別，回傳的是布林值，并且可以判斷這個變數是否為某個函式的實體，它檢測的是物件的原型
let num = 1 num instanceof Number // false num = new Number(1) num instanceof Number // true
明明都是num，而且都是1，只是因為第一個不是物件，是基本型別，所以直接回傳false，而第二個是封裝成物件，所以true，
這里要嚴格注意這個問題，有些說法是檢測目標的__proto__與建構式的prototype相同即回傳true，這是不嚴謹的，檢測的一定要是物件才行，如：
let num = 1 num.__proto__ === Number.prototype // true num instanceof Number // false num = new Number(1) num.proto === Number.prototype // true num instanceof Number // true num.proto === (new Number(1)).proto // true
此外，instanceof還有另外一個缺點：如果一個頁面上有多個框架，即有多個全域環境，那么我在a框架里定義一個Array，然后在b框架里去用instanceof去判斷，那么該array的原型鏈上不可能找到b框架里的array，則會判斷該array不是一個array，
解決方案：使用Object.prototype.toString.call(value) 方法去呼叫物件，得到物件的建構式名，可以解決instanceof的跨框架問題，缺點是對用戶自定義的型別，它只會回傳[object Object]
第二問：既然提到了instanceof，那手寫實作下instanceof吧
// [1,2,3] instanceof Array ---- true
// L instanceof R
// 變數R的原型 存在于 變數L的原型鏈上
function instance_of(L,R){
// 驗證如果為基本資料型別，就直接回傳false
const baseType = ['string', 'number','boolean','undefined','symbol']
if(baseType.includes(typeof(L))) { return false }
let RP = R.prototype; //取 R 的顯示原型
L = L.__proto__; //取 L 的隱式原型
while(true){ // 無線回圈的寫法（也可以使 for(;;) ）
if(L === null){ //找到最頂層
return false;
}
if(L === RP){ //嚴格相等
return true;
}
L = L.__proto__; //沒找到繼續向上一層原型鏈查找
}
}
第三問：作用域安全的建構式--當我們new一個建構式的時候可以獲得一個實體，要是我們忘記寫new了呢？
例如
function Person(){
this.name = "小紅"
}
p = Person();
這會發生什么問題？，怎么解決
這樣直接使用，this會映射到全域物件window上，解決方法可以是：首先確認this物件是正確型別的實體，如果不是，那么會創建新的實體并回傳，請看下面的例子
function Person(){
if(this instanceof Person){
this.name = "小紅"
}else{
return new Person()
}
}
p = Person();
第四問：談一下惰性載入函式
在JavaScript代碼中，由于瀏覽器之間行為的差異，多數JavaScript代碼包含了大量的if陳述句，以檢查瀏覽器特性，解決不同瀏覽器的兼容問題，例如添加事件的函式：
function addEvent (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
每次呼叫addEvent()的時候，都要對瀏覽器所支持的能力仔細檢查，首先檢查是否支持addEventListener方法，如果不支持再檢查是否支持attachEvent方法，如果還不支持，就用DOM 0級的方法添加事件，在呼叫addEvent()程序中，每次這個程序都要走一遍，其實，瀏覽器支持其中的一種方法就會一直支持他，就沒有必要再進行其他分支的檢測了，也就是說if陳述句不必每次都執行，代碼可以運行的更快一些，解決的方案稱之為惰性載入， 所謂惰性載入，就是說函式的if分支只會執行一次，之后呼叫函式時，直接進入所支持的分支代碼，有兩種實作惰性載入的方式，第一種事函式在第一次呼叫時，對函式本身進行二次處理，該函式會被覆寫為符合分支條件的函式，這樣對原函式的呼叫就不用再經過執行的分支了，我們可以用下面的方式使用惰性載入重寫addEvent()，
function addEvent (type, element, handler) {
if (element.addEventListener) {
addEvent = function (type, element, handler) {
element.addEventListener(type, handler, false);
}
}
else if(element.attachEvent){
addEvent = function (type, element, handler) {
element.attachEvent('on' + type, handler);
}
}
else{
addEvent = function (type, element, handler) {
element['on' + type] = handler;
}
}
return addEvent(type, element, handler);
}
在這個惰性載入的addEvent()中，if陳述句的每個分支都會為addEvent變數賦值，有效覆寫了原函式，最后一步便是呼叫了新賦函式，下一次呼叫addEvent()的時候，便會直接呼叫新賦值的函式，這樣就不用再執行if陳述句了，
第二種實作惰性載入的方式是在宣告函式時就指定適當的函式，這樣在第一次調用函式時就不會損失性能了，只在代碼加載時會損失一點性能，一下就是按照這一思路重寫的addEvent()，
var addEvent = (function () {
if (document.addEventListener) {
return function (type, element, fun) {
element.addEventListener(type, fun, false);
}
}
else if (document.attachEvent) {
return function (type, element, fun) {
element.attachEvent('on' + type, fun);
}
}
else {
return function (type, element, fun) {
element['on' + type] = fun;
}
}
})();
這個例子中使用的技巧是創建一個匿名的自執行函式，通過不同的分支以確定應該使用那個函式實作，實際的邏輯都一樣，不一樣的地方就是使用了函式運算式（使用了var定義函式）和新增了一個匿名函式，另外每個分支都回傳一個正確的函式，并立即將其賦值給變數addEvent，
惰性載入函式的優點只執行一次if分支，避免了函式每次執行時候都要執行if分支和不必要的代碼，因此提升了代碼性能，至于那種方式更合適，就要看您的需求而定了，
第五問：談一下函式節流
概念：限制一個函式在一定時間內只能執行一次，
主要實作思路 就是通過 setTimeout 定時器，通過設定延時時間，在第一次呼叫時，創建定時器，先設定一個變數true，寫入需要執行的函式，第二次執行這個函式時，會判斷變數是否true，是則回傳，當第一次的定時器執行完函式最后會設定變數為false，那么下次判斷變數時則為false，函式會依次運行，目的在于在一定的時間內，保證多次函式的請求只執行最后一次呼叫，
函式節流的代碼實作
function throttle(fn,wait){
var timer = null;
return function(){
var context = this;
var args = arguments;
if(!timer){
timer = setTimeout(function(){
fn.apply(context,args);
timer = null;
},wait)
}
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));
函式節流的應用場景(throttle)
- DOM 元素的拖拽功能實作（mousemove）
- 高頻點擊提交，表單重復提交
- 搜索聯想（keyup）
- 計算滑鼠移動的距離（mousemove）
- 監聽滾動事件，比如是否滑到底部自動加載更多，用throttle來判斷
- 射擊游戲的 mousedown/keydown 事件（單位時間只能發射一顆子彈）
- 監聽滾動事件判斷是否到頁面底部自動加載更多：給 scroll 加了 debounce 后，只有用戶停止滾動后，- - 才會判斷是否到了頁面底部；如果是 throttle 的話，只要頁面滾動就會間隔一段時間判斷一次.
第六問：談一下函式防抖
概念：函式防抖（debounce），就是指觸發事件后，在 n 秒內函式只能執行一次，如果觸發事件后在 n 秒內又觸發了事件，則會重新計算函式延執行時間，
函式防抖的要點，是需要一個 setTimeout 來輔助實作，延遲運行需要執行的代碼，如果方法多次觸發，則把上次記錄的延遲執行代碼用 clearTimeout 清掉，重新開始計時，若計時期間事件沒有被重新觸發，等延遲時間計時完畢，則執行目標代碼，
函式防抖的代碼實作
function debounce(fn,wait){
var timer = null;
return function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(fn,wait);
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("resize",debounce(handle,1000));
函式防抖的使用場景 函式防抖一般用在什么情況之下呢？一般用在，連續的事件只需觸發一次回呼的場合，具體有：
- 搜索框搜索輸入，只需用戶最后一次輸入完，再發送請求；
- 用戶名、手機號、郵箱輸入驗證；
- 瀏覽器視窗大小改變后，只需視窗調整完后，再執行 resize 事件中的代碼，防止重復渲染，
目前遇到過的用處就是這些，理解了原理與實作思路，小伙伴可以把它運用在任何需要的場合，提高代碼質量，
第七問：談一下requestAnimationFrame
影片原理 ： 眼前所看到影像正在以每秒60次的頻率重繪，由于重繪頻率很高，因此你感覺不到它在重繪，而影片本質就是要讓人眼看到影像被重繪而引起變化的視覺效果，這個變化要以連貫的、平滑的方式進行過渡， 那怎么樣才能做到這種效果呢？
重繪頻率為60Hz的螢屏每16.7ms重繪一次，我們在螢屏每次重繪前，將影像的位置向左移動一個像素，即1px，這樣一來，螢屏每次刷出來的影像位置都比前一個要差1px，因此你會看到影像在移動；由于我們人眼的視覺停留效應，當前位置的影像停留在大腦的印象還沒消失，緊接著影像又被移到了下一個位置，因此你才會看到影像在流暢的移動，這就是視覺效果上形成的影片，
與setTimeout相比較：
理解了上面的概念以后，我們不難發現，setTimeout 其實就是通過設定一個間隔時間來不斷的改變影像的位置，從而達到影片效果的，但我們會發現，利用seTimeout實作的影片在某些低端機上會出現卡頓、抖動的現象， 這種現象的產生有兩個原因：
-
setTimeout的執行時間并不是確定的，在Javascript中， setTimeout 任務被放進了異步佇列中，只有當主執行緒上的任務執行完以后，才會去檢查該佇列里的任務是否需要開始執行，因此 setTimeout 的實際執行時間一般要比其設定的時間晚一些，
-
重繪頻率受螢屏解析度和螢屏尺寸的影響，因此不同設備的螢屏重繪頻率可能會不同，而 setTimeout只能設定一個固定的時間間隔，這個時間不一定和螢屏的重繪時間相同，
以上兩種情況都會導致setTimeout的執行步調和螢屏的重繪步調不一致，從而引起丟幀現象
requestAnimationFrame：與setTimeout相比，requestAnimationFrame最大的優勢是由系統來決定回呼函式的執行時機，具體一點講，如果螢屏重繪率是60Hz,那么回呼函式就每16.7ms被執行一次，如果重繪率是75Hz，那么這個時間間隔就變成了1000/75=13.3ms，換句話說就是，requestAnimationFrame的步伐跟著系統的重繪步伐走，它能保證回呼函式在螢屏每一次的重繪間隔中只被執行一次，這樣就不會引起丟幀現象，也不會導致影片出現卡頓的問題，
除此之外，requestAnimationFrame還有以下兩個優勢：
-
CPU節能：使用setTimeout實作的影片，當頁面被隱藏或最小化時，setTimeout 仍然在后臺執行影片任務，由于此時頁面處于不可見或不可用狀態，重繪影片是沒有意義的，完全是浪費CPU資源，而requestAnimationFrame則完全不同，當頁面處理未激活的狀態下，該頁面的螢屏重繪任務也會被系統暫停，因此跟著系統步伐走的requestAnimationFrame也會停止渲染，當頁面被激活時，影片就從上次停留的地方繼續執行，有效節省了CPU開銷，
-
函式節流：在高頻率事件(resize,scroll等)中，為了防止在一個重繪間隔內發生多次函式執行，使用requestAnimationFrame可保證每個重繪間隔內，函式只被執行一次，這樣既能保證流暢性，也能更好的節省函式執行的開銷，一個重繪間隔內函式執行多次時沒有意義的，因為顯示幕每16.7ms重繪一次，多次繪制并不會在螢屏上體現出來，
第八問：web計時，你知道該怎么計算首屏，白屏時間嗎？
白屏時間： 白屏時間指的是瀏覽器開始顯示內容的時間，因此我們只需要知道是瀏覽器開始顯示內容的時間點，即頁面白屏結束時間點即可獲取到頁面的白屏時間，
計算白屏時間 因此，我們通常認為瀏覽器開始渲染 標簽或者決議完 標簽的時刻就是頁面白屏結束的時間點，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>白屏</title> <script type="text/javascript"> // 不兼容performance.timing 的瀏覽器，如IE8 window.pageStartTime = Date.now(); </script> <!-- 頁面 CSS 資源 --> <link rel="stylesheet" href="https://www.cnblogs.com/smileZAZ/archive/2022/09/29/common.css"> <link rel="stylesheet" href="https://www.cnblogs.com/smileZAZ/archive/2022/09/29/page.css"> <script type="text/javascript"> // 白屏時間結束點 window.firstPaint = Date.now(); </script> </head> <body> <!-- 頁面內容 --> </body> </html>
因此白屏時間則可以這樣計算出：
可使用 Performance API 時:
白屏時間 = firstPaint - performance.timing.navigationStart;
不可使用 Performance API 時:
白屏時間 = firstPaint - pageStartTime; //雖然我們知道這并不準確，畢竟DNS決議，tcp三次握手等都沒計算入內，
首屏時間： 首屏時間是指用戶打開網站開始，到瀏覽器首屏內容渲染完成的時間，對于用戶體驗來說，首屏時間是用戶對一個網站的重要體驗因素，通常一個網站，如果首屏時間在5秒以內是比較優秀的，10秒以內是可以接受的，10秒以上就不可容忍了，超過10秒的首屏時間用戶會選擇重繪頁面或立刻離開，
通常計算首屏的方法有
-
首屏模塊標簽標記法
-
統計首屏內加載最慢的圖片的時間
-
自定義首屏內容計演算法
1、首屏模塊標簽標記法
首屏模塊標簽標記法，通常適用于首屏內容不需要通過拉取資料才能生存以及頁面不考慮圖片等資源加載的情況，我們會在 HTML 檔案中對應首屏內容的標簽結束位置，使用行內的 JavaScript 代碼記錄當前時間戳，如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首屏</title> <script type="text/javascript"> window.pageStartTime = Date.now(); </script> <link rel="stylesheet" href="https://www.cnblogs.com/smileZAZ/archive/2022/09/29/common.css"> <link rel="stylesheet" href="https://www.cnblogs.com/smileZAZ/archive/2022/09/29/page.css"> </head> <body> <!-- 首屏可見模塊1 --> <div ></div> <!-- 首屏可見模塊2 --> <div ></div> <script type="text/javascript"> window.firstScreen = Date.now(); </script> <!-- 首屏不可見模塊3 --> <div ></div> <!-- 首屏不可見模塊4 --> <div ></div> </body> </html>
此時首屏時間等于 firstScreen - performance.timing.navigationStart;
事實上首屏模塊標簽標記法 在業務中的情況比較少，大多數頁面都需要通過介面拉取資料才能完整展示，因此我們會使用 JavaScript 腳本來判斷首屏頁面內容加載情況，
2、統計首屏內圖片完成加載的時間
通常我們首屏內容加載最慢的就是圖片資源，因此我們會把首屏內加載最慢的圖片的時間當做首屏的時間，
由于瀏覽器對每個頁面的 TCP 連接數有限制，使得并不是所有圖片都能立刻開始下載和顯示，因此我們在 DOM樹 構建完成后將會去遍歷首屏內的所有圖片標簽，并且監聽所有圖片標簽 onl oad 事件，最終遍歷圖片標簽的加載時間的最大值，并用這個最大值減去 navigationStart 即可獲得近似的首屏時間，
此時首屏時間等于 加載最慢的圖片的時間點 - performance.timing.navigationStart; //首屏時間嘗試： //1,獲取首屏基線高度 //2,計算出基線dom元素之上的所有圖片元素 //3,所有圖片onload之后為首屏顯示時間 //
function getOffsetTop(ele) {
var offsetTop = ele.offsetTop;
if (ele.offsetParent !== null) {
offsetTop += getOffsetTop(ele.offsetParent);
}
return offsetTop;
}
var firstScreenHeight = win.screen.height;
var firstScreenImgs = [];
var isFindLastImg = false;
var allImgLoaded = false;
var t = setInterval(function() {
var i, img;
if (isFindLastImg) {
if (firstScreenImgs.length) {
for (i = 0; i < firstScreenImgs.length; i++) {
img = firstScreenImgs[i];
if (!img.complete) {
allImgLoaded = false;
break;
} else {
allImgLoaded = true;
}
}
} else {
allImgLoaded = true;
}
if (allImgLoaded) {
collect.add({
firstScreenLoaded: startTime - Date.now()
});
clearInterval(t);
}
} else {
var imgs = body.querySelector('img');
for (i = 0; i<imgs.length; i++) {
img = imgs[i];
var imgOffsetTop = getOffsetTop(img);
if (imgOffsetTop > firstScreenHeight) {
isFindLastImg = true;
break;
} else if (imgOffsetTop <= firstScreenHeight && !img.hasPushed) {
img.hasPushed = 1;
firstScreenImgs.push(img);
}
}
}
}, 0);
doc.addEventListener('DOMContentLoaded', function() {
var imgs = body.querySelector('img');
if (!imgs.length) {
isFindLastImg = true;
}
});
win.addEventListener('load', function() {
allImgLoaded = true;
isFindLastImg = true;
if (t) {
clearInterval(t);
}
collect.log(collect.global);
});
解釋一下思路，大概就是判斷首屏有沒有圖片，如果沒圖片就用domready時間，如果有圖，分2種情況，圖在首屏，圖不在首屏，如果在則收集，并判斷加載狀態，加載完畢之后則首屏完成加載，如果首屏沒圖，找到首屏下面的圖，立刻觸發首屏完畢，可以想象這么做前端收集是不準的，但是可以確保最晚不會超過win load，所以應該還算有些意義，，沒辦法，移動端很多瀏覽器不支持performance api，所以土辦法前端收集，想出這么個黑魔法，在基線插入節點收集也是個辦法，但是不友好，而且現在手機螢屏這么多，，
3、自定義模塊內容計演算法
由于統計首屏內圖片完成加載的時間比較復雜，因此我們在業務中通常會通過自定義模塊內容，來簡化計算首屏時間，如下面的做法：
- 忽略圖片等資源加載情況，只考慮頁面主要 DOM
- 只考慮首屏的主要模塊，而不是嚴格意義首屏線以上的所有內容
實際上用performance.timing來計算首屏加載時間與白屏時間非常簡單與精確，不過目前只支持IE10和chrome 貼下其API的使用
var navigationStart = performance.timing.navigationStart; //1488984540668 console.log(navigationStart); //Wed Mar 08 2017 22:49:44 GMT+0800 (中國標準時間) console.log(new Date(new Date(navigationStart))); 復制代碼 redirectStart:到當前頁面的重定向開始的時間，但只有在重定向的頁面來自同一個域時這個屬性才會有值；否則，值為0 redirectEnd:到當前頁面的重定向結束的時間，但只有在重定向的頁面來自同一個域時這個屬性才會有值；否則，值為0 console.log(performance.timing.redirectStart);//0 console.log(performance.timing.redirectEnd);//0 fetchStart:開始通過HTTP GET取得頁面的時間 console.log(performance.timing.fetchStart);//1488984540668 domainLookupStart:開始査詢當前頁面DNS的時間，如果使用了本地快取或持久連接，則與fetchStart值相等 domainLookupEnd:査詢當前頁面DNS結束的時間，如果使用了本地快取或持久連接，則與fetchStart值相等 console.log(performance.timing.domainLookupStart);//1488984540670 console.log(performance.timing.domainLookupEnd);//1488984540671 connectStart:瀏覽器嘗試連接服務器的時間 secureConnectionStart:瀏覽器嘗試以SSL方式連接服務器的時間，不使用SSL方式連接時，這個屬性的值為0 connectEnd:瀏覽器成功連接到服務器的時間 console.log(performance.timing.connectStart);//1488984540671 console.log(performance.timing.secureConnectionStart);//0 console.log(performance.timing.connectEnd);//1488984540719 requestStart:瀏覽器開始請求頁面的時間 responseStart:瀏覽器接收到頁面第一位元組的時間 responseEnd:瀏覽器接收到頁面所有內容的時間 console.log(performance.timing.requestStart);//1488984540720 console.log(performance.timing.responseStart);//1488984540901 console.log(performance.timing.responseEnd);//1488984540902 unloadEventStart:前一個頁面的unload事件開始的時間，但只有在前一個頁面與當前頁面來自同一個域時這個屬性才會有值；否則，值為0 unloadEventEnd:前一個頁面的unload事件結束的時間，但只有在前一個頁面與當前頁面來自同一個域時這個屬性才會有值；否則，值為0 console.log(performance.timing.unloadEventStart);//1488984540902 console.log(performance.timing.unloadEventEnd);//1488984540903 domLoading:document.readyState變為"loading"的時間，即開始決議DOM樹的時間 domInteractive:document.readyState變為"interactive"的時間，即完成完成決議DOM樹的時間 domContentLoadedEventStart:發生DOMContentloaded事件的時間，即開始加載網頁內資源的時間 domContentLoadedEventEnd:DOMContentLoaded事件已經發生且執行完所有事件處理程式的時間，網頁內資源加載完成的時間 domComplete:document.readyState變為"complete"的時間，即DOM樹決議完成、網頁內資源準備就緒的時間 console.log(performance.timing.domLoading);//1488984540905 console.log(performance.timing.domInteractive);//1488984540932 console.log(performance.timing.domContentLoadedEventStart);//1488984540932 console.log(performance.timing.domContentLoadedEventEnd);//1488984540932 console.log(performance.timing.domComplete);//1488984540932 loadEventStart:發生load事件的時間，也就是load回呼函式開始執行的時間 loadEventEnd:load事件已經發生且執行完所有事件處理程式的時間 console.log(performance.timing.loadEventStart);//1488984540933 console.log(performance.timing.loadEventEnd);//1488984540933
第九問：你知道web Worker嗎？
多執行緒技術在服務端技術中已經發展的很成熟了，而在Web端的應用中卻一直是雞肋 在新的標準中，提供的新的WebWork API，讓前端的異步作業變得例外簡單， 使用：創建一個Worker物件，指向一個js檔案，然后通過Worker物件往js檔案發送訊息，js檔案內部的處理邏輯，處理完畢后，再發送訊息回到當前頁面，純異步方式，不影響當前主頁面渲染，
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
//創建執行緒 work物件
var work = new Worker("work.js"); //work檔案中不要存在跟ui代碼
//發送訊息
work.postMessage("100");
// 監聽訊息
work.onmessage = function(event) {
alert(event.data);
};
</script>
</head>
<body>
</body>
</html>
work.js
onmessage = function (event) {
//從1加到num
var num = event.data;
var result = 0;
for (var i = 1; i <= num; i++) {
result += i;
}
postMessage(result);
}
本文轉載于:
https://juejin.cn/post/6844904144864542733
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/510740.html
標籤：其他