讀書筆記(03) - 性能 - JavaScript高級(jí)程序設(shè)計(jì)

warnerwu 發(fā)布于2019-08-23 13:52 / 3156人閱讀

摘要：作用域鏈查找作用域鏈的查找是逐層向上查找。而全局變量和閉包則會(huì)與之相反，繼續(xù)保存，所以使用用后需手動(dòng)標(biāo)記清除，以免造成內(nèi)存泄漏。獲取元素的屬性獲取元素的屬性等參考文檔高級(jí)程序設(shè)計(jì)作者以樂之名本文原創(chuàng)，有不當(dāng)?shù)牡胤綒g迎指出。

作用域鏈查找

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

除了層級(jí)查找損耗的問題，變量的修改應(yīng)只在局部環(huán)境進(jìn)行，盡量避免在局部環(huán)境下去操作修改父級(jí)變量的值。（react/vue 單向數(shù)據(jù)流的數(shù)據(jù)傳輸方式）

優(yōu)化方法：聲明一個(gè)變量存儲(chǔ)引用（該方法應(yīng)用甚多）

不必要的屬性查找

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

// 優(yōu)化后（3次，以后多次調(diào)用url，查詢次數(shù)不會(huì)增加）
var url = window.location.href;
var query = url.substring(url.indexOf("?"));
url = null;

函數(shù)里面聲明的變量，在函數(shù)調(diào)用棧執(zhí)行后退出時(shí)，會(huì)自動(dòng)清除引用。而全局變量和閉包則會(huì)與之相反，繼續(xù)保存，所以使用用后需手動(dòng)標(biāo)記清除，以免造成內(nèi)存泄漏。

優(yōu)化循環(huán)

減值迭代

簡化終止條件

簡化循環(huán)體

使用后測試循環(huán)

減值迭代

日常應(yīng)用不多，與增值迭代的區(qū)別，就在i存儲(chǔ)的值。減值迭代i的值不斷在變小，存儲(chǔ)的空間也在變小。

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

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

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

簡化終止條件 (常用)

終止條件應(yīng)該是一個(gè)固定值判斷，應(yīng)避免在終止條件上做其他運(yùn)算（屬性查找等）。

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

// 優(yōu)化后
for (var i = 0, len = arr.length; i < len; i++) {
    //...
}
// 聲明了一個(gè)變量len用于儲(chǔ)存數(shù)組長度，只會(huì)計(jì)算一次

簡化循環(huán)體

循環(huán)體的代碼應(yīng)該著重于只需要遍歷處理的代碼，其他無關(guān)代碼應(yīng)放置到循環(huán)體外面。

后測試循環(huán)

最常用的for循環(huán)和while循環(huán)都是前測試循環(huán)。而do-while這種后測試循環(huán)，可以避免最初終止條件的計(jì)算，因此運(yùn)行更快。前測試循環(huán)（for/while），可能一次都不會(huì)執(zhí)行循環(huán)體
后測試循環(huán)（do...while），至少執(zhí)行一次

用確定索引值更快

// for循環(huán)遍歷
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語句較快 (多個(gè)if情況下)

位運(yùn)算符較快

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

最小語句數(shù)

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

多個(gè)變量聲明合并

// 多個(gè)var聲明
var name = "KenTsang";
var age = 28;
var job = "Developer";

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

插入迭代值

// 優(yōu)化前
var name = value[i];
i++;

// 優(yōu)化后
var name = value[i++];

數(shù)組/對象字面量

創(chuàng)建引用類型可以使用構(gòu)造函數(shù)和字面量兩種方式，不過日常習(xí)慣都使用字面量，因?yàn)檎Z句更簡潔，寫起來更像數(shù)據(jù)封裝。

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

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

DOM優(yōu)化交互 最小現(xiàn)場更新

現(xiàn)場更新：一旦你需要訪問的 DOM 部分是已經(jīng)顯示的頁面的一部分，那么你就是在進(jìn)行一個(gè)現(xiàn)場更新

文檔片段

文檔片段相當(dāng)一個(gè)臨時(shí)的占位符，只有片段中的內(nèi)容會(huì)被添加到DOM上，片段本身并不會(huì)被添加。

// 代碼片段標(biāo)簽
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);
});

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

innerHTML

合并插入代碼一次性設(shè)置innerHTML。

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

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

事件代理（事件委托）

通過事件流——冒泡機(jī)制實(shí)現(xiàn)代理，子元素事件觸發(fā)冒泡到父元素，由父元素綁定一個(gè)事件進(jìn)行統(tǒng)一處理，避免多個(gè)事件綁定影響性能。


    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

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

// 一個(gè)死循環(huán)例子
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會(huì)不斷地插入a標(biāo)簽

因?yàn)?b>existLinkEle.length每次循環(huán)都會(huì)重新計(jì)算頁面a節(jié)點(diǎn)的數(shù)量，而得到的值一直遞增。

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

返回HTMLCollection對象情況有：

document.getElementByTagName()。

獲取元素的childNodes屬性

獲取元素的attributes屬性

document.forms,document.images等

參考文檔

《JavaScript高級(jí)程序設(shè)計(jì)》

作者：以樂之名
本文原創(chuàng)，有不當(dāng)?shù)牡胤綒g迎指出。轉(zhuǎn)載請指明出處。

GPU云服務(wù)器云服務(wù)器高級(jí)程序設(shè)計(jì)-筆記讀書筆記編程思想讀書筆記大數(shù)據(jù)時(shí)代讀書筆記

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99702.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

warnerwu

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow數(shù)據(jù)集下載

閱讀 3671·2023-04-26 02:07
海會(huì)主機(jī)是什么-主機(jī)和服務(wù)器的區(qū)別是什么？

閱讀 3178·2021-09-22 15:55
騰訊云服務(wù)器2020年6月促銷活動(dòng)整理,騰訊云最便宜的云服務(wù)器一網(wǎng)打盡

閱讀 2548·2021-07-26 23:38
CSS module 入門

閱讀 3128·2019-08-29 15:16
基于Vue,Vue-router,Vuex的簡書網(wǎng)站模仿

閱讀 2019·2019-08-29 11:16
切圖崽的自我修養(yǎng)－梳理Jquery API

閱讀 1760·2019-08-29 11:00
局域網(wǎng) pm2 離線安裝

閱讀 3601·2019-08-26 18:36
單選多選場景的解決方案集合

閱讀 3172·2019-08-26 13:32

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

讀書筆記(03) - 性能 - JavaScript高級(jí)程序設(shè)計(jì)

相關(guān)文章

**<javascript高級(jí)程序設(shè)計(jì)>第十二章讀書筆記----偏移量**

讀書筆記(05) - 事件 - JavaScript高級(jí)程序設(shè)計(jì)

002-讀書筆記-JavaScript高級(jí)程序設(shè)計(jì) 在HTML中使用JavaScript

**001-讀書筆記-JavaScript高級(jí)程序設(shè)計(jì) JavaScript簡介**

**《JavaScript高級(jí)程序設(shè)計(jì)》（第3版）讀書筆記第1~2章**

發(fā)表評(píng)論

0條評(píng)論

warnerwu

男|高級(jí)講師

TA的文章

tensorflow數(shù)據(jù)集下載

海會(huì)主機(jī)是什么-主機(jī)和服務(wù)器的區(qū)別是什么？

騰訊云服務(wù)器2020年6月促銷活動(dòng)整理,騰訊云最便宜的云服務(wù)器一網(wǎng)打盡

CSS module 入門

基于Vue,Vue-router,Vuex的簡書網(wǎng)站模仿

切圖崽的自我修養(yǎng)－梳理Jquery API

局域網(wǎng) pm2 離線安裝

單選多選場景的解決方案集合

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

讀書筆記(03) - 性能 - JavaScript高級(jí)程序設(shè)計(jì)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！