讀書筆記(03) - 性能 - JavaScript高級程序設計

warnerwu 發布于2019-08-23 13:52 / 3153人閱讀

摘要：作用域鏈查找作用域鏈的查找是逐層向上查找。而全局變量和閉包則會與之相反，繼續保存，所以使用用后需手動標記清除，以免造成內存泄漏。獲取元素的屬性獲取元素的屬性等參考文檔高級程序設計作者以樂之名本文原創，有不當的地方歡迎指出。

作用域鏈查找

作用域鏈的查找是逐層向上查找。查找的層次越多，速度越慢。隨著硬件性能的提升和瀏覽器引擎的優化，這個慢我們基本可以忽略。

除了層級查找損耗的問題，變量的修改應只在局部環境進行，盡量避免在局部環境下去操作修改父級變量的值。（react/vue 單向數據流的數據傳輸方式）

優化方法：聲明一個變量存儲引用（該方法應用甚多）

不必要的屬性查找

// 未優化（window.location.href 3*2 6次）
var query = window.location.href.substring(window.location.href.indexOf("?"));

// 優化后（3次，以后多次調用url，查詢次數不會增加）
var url = window.location.href;
var query = url.substring(url.indexOf("?"));
url = null;

函數里面聲明的變量，在函數調用棧執行后退出時，會自動清除引用。而全局變量和閉包則會與之相反，繼續保存，所以使用用后需手動標記清除，以免造成內存泄漏。

優化循環

減值迭代

簡化終止條件

簡化循環體

使用后測試循環

減值迭代

日常應用不多，與增值迭代的區別，就在i存儲的值。減值迭代i的值不斷在變小，存儲的空間也在變小。

但在前端極少需要遍歷上萬次上億次的數據，上千上百都很少，所以這個優化可忽略。而且我們遍歷的順序一般都是從數組頭部開始，所以增值迭代應用的更多。

// 增值迭代（用的較多）
for(var i = 0; i < len; i++) {
    //...
}

// 減值迭代
for(var i = len - 1; i >= 0 ; i--) {
    //...
}

簡化終止條件 (常用)

終止條件應該是一個固定值判斷，應避免在終止條件上做其他運算（屬性查找等）。

// 未優化，每次循環都會去計算數組長度
var arr = ["HTML", "CSS", "JavaScript"];
for (var i = 0; i < arr.length; i++) {
    //...
}

// 優化后
for (var i = 0, len = arr.length; i < len; i++) {
    //...
}
// 聲明了一個變量len用于儲存數組長度，只會計算一次

簡化循環體

循環體的代碼應該著重于只需要遍歷處理的代碼，其他無關代碼應放置到循環體外面。

后測試循環

最常用的for循環和while循環都是前測試循環。而do-while這種后測試循環，可以避免最初終止條件的計算，因此運行更快。

前測試循環（for/while），可能一次都不會執行循環體

后測試循環（do...while），至少執行一次

用確定索引值更快

// for循環遍歷
var arr = ["HTML", "CSS", "JavaScript"];
for (let i = 0, len = arr.length; i < len; i++) {
    arr[i];
}

// 確定索引值
arr[0]; 
arr[1]; 
arr[2];

其他

原生方法較快（Math)

switch語句較快 (多個if情況下)

位運算符較快

TIPS: 判斷優化，最可能的到最不可能的順序組織（if/switch)

最小語句數

符合 write less, do more 的代碼追求

多個變量聲明合并

// 多個var聲明
var name = "KenTsang";
var age = 28;
var job = "Developer";

// 合并一個var聲明
var name = "KenTsang",
    age = 27,
    job = "Developer";

插入迭代值

// 優化前
var name = value[i];
i++;

// 優化后
var name = value[i++];

數組/對象字面量

創建引用類型可以使用構造函數和字面量兩種方式，不過日常習慣都使用字面量，因為語句更簡潔，寫起來更像數據封裝。

// 字面量
var arr = [1, 2, 3, 4];
var obj = {
    name: "KenTsang"
}

// 構造函數
var arr = new Array(1, 2, 3, 4);
var obj = new Object();
obj.name = "KenTsang";

DOM優化交互 最小現場更新

現場更新：一旦你需要訪問的 DOM 部分是已經顯示的頁面的一部分，那么你就是在進行一個現場更新

文檔片段

文檔片段相當一個臨時的占位符，只有片段中的內容會被添加到DOM上，片段本身并不會被添加。

// 代碼片段標簽
var ele  = document.getElementById("ul");
var fragment = document.createDocumentFragment();
var browsers = ["Firefox", "Chrome", "Opera", 
    "Safari", "IE"];

browsers.forEach(function(browser) {
    var li = document.createElement("li");
    li.textContent = browser;
    fragment.appendChild(li);
});

// 只會操作一次DOM
ele.appendChild(fragment);

innerHTML

合并插入代碼一次性設置innerHTML。

// 優化前：操作多次DOM
var list = document.getElementById("myList");
for (var i=0; i < 10; i++) {
    list.innerHTML += "Item " + i + "";
}

// 優化后：操作一次DOM
var innerHtml = "";
for (var i = 0; i < 10; i++) {
    innerHtml += "Item" + i + "";
}
list.innerHTML = innerHtml;

事件代理（事件委托）

通過事件流——冒泡機制實現代理，子元素事件觸發冒泡到父元素，由父元素綁定一個事件進行統一處理，避免多個事件綁定影響性能。


    HTML
    CSS
    JavaScript


var listEle = document.getElementById("list");

listEle.addEventListener("click", function(event) {
    if (event.target.className.indexOf("item") > -1) {
        console.log(event.target.innerHTML); 
    }
})

// jquery
$("#list").on("click", ".item", function(event){
    console.log($(this).html());
})

注意HTMLCollection

任何時候要訪問 HTMLCollection，不管它是一個屬性還是一個方法，都是在文檔上進行一個查詢，這個查詢開銷很昂貴。

// 一個死循環例子
link
    
var existLinkEle = document.getElementsByTagName("a");
for (var i = 0; i < existLinkEle.length; i++) {     
    console.log(i);
    var linkEle = document.createElement("a");
    document.body.appendChild(linkEle);
}
// body會不斷地插入a標簽

因為existLinkEle.length每次循環都會重新計算頁面a節點的數量，而得到的值一直遞增。

// 優化（一個變量存儲引用）
var len = existLinkEle.length;
for (var i = 0; i < len; i++) {
    //...
}

返回HTMLCollection對象情況有：

document.getElementByTagName()。

獲取元素的childNodes屬性

獲取元素的attributes屬性

document.forms,document.images等

參考文檔

《JavaScript高級程序設計》

作者：以樂之名
本文原創，有不當的地方歡迎指出。轉載請指明出處。

云服務器 GPU云服務器高級程序設計-筆記讀書筆記編程思想讀書筆記大數據時代讀書筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99702.html

<javascript高級程序設計>第十二章讀書筆記----偏移量

摘要：包括元素的高度上下內邊距上下邊框值，如果元素的的值為那么該值為。該值為元素的包含元素。最后，所有這些偏移量都是只讀的，而且每次訪問他們都需要重新計算。為了避免重復計算，可以將計算的值保存起來，以提高性能。 offsetHeight 包括元素的高度、上下內邊距、上下邊框值，如果元素的style.display的值為none,那么該值為0。offsetWidth 包括元素的寬度、左...

dayday_up 2019-08-21 10:30 評論0 收藏0
讀書筆記(05) - 事件 - JavaScript高級程序設計

摘要：而事件分為個級別級事件處理程序，級事件處理程序和級事件處理程序。級中沒有規范事件的相關內容，所以沒有級事件處理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript來實現用戶與WEB網頁之間的動態交互，接收用戶操作并做出相應的反饋，而事件在此間則充當橋梁的重要角色。日常開發中，經常會...

tinylcy 2019-08-23 13:58 評論0 收藏0
002-讀書筆記-JavaScript高級程序設計 在HTML中使用JavaScript

摘要：文件內部使用使用到的代碼引入外部文件外部代碼的地址標簽的位置一般情況下，標簽的位置放在標簽中引入代碼頁面結構對于需要引入很多的中間，如果把放在頭部，無疑會導致瀏覽器呈現頁面出現延遲，就是導致頁面出現空白。頁面結構引入代碼這篇筆記的內容對應的是《JavaScript高級程序設計(第三版)》中的第二章。 1.使用方式在HTML中使用 JavaScript 的方式有兩種，第一種就是直接內...

banana_pi 2019-08-22 11:13 評論0 收藏0
001-讀書筆記-JavaScript高級程序設計 JavaScript簡介

摘要：由于計算機的國際化，組織的標準牽涉到很多其他國家，因此組織決定改名表明其國際性。規范由萬維網聯盟制定。級標準級標準是不存在的，級一般指的是最初支持的。這篇筆記的內容對應的是《JavaScript高級程序設計(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是歐洲計算機制造商協會的縮寫，全程是 European Computer Manufacturers Ass...

masturbator 2019-08-21 17:18 評論0 收藏0
《JavaScript高級程序設計》（第3版）讀書筆記第1~2章

摘要：表示應該立即下載腳本，但不應妨礙頁面中的其他操作可選。表示通過屬性指定的代碼的字符集。表示腳本可以延遲到文檔完全被解析和顯示之后再執行。實際上，服務器在傳送文件時使用的類型通常是，但在中設置這個值卻可能導致腳本被忽略。第1章 JavaScript 簡介雖然JavaScript和ECMAScript通常被人們用來表達相同的含義，但JavaScript的含義比ECMA-262要多得多...

Corwien 2019-08-23 17:18 評論0 收藏0