亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

warnerwu / 3242人閱讀

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

作用域鏈查找

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

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

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

不必要的屬性查找 
// 未優(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ù)不會增加）
var url = window.location.href;
var query = url.substring(url.indexOf("?"));
url = null;

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

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

減值迭代

簡化終止條件

簡化循環(huán)體

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

減值迭代

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

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

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

// 減值迭代
for(var i = len - 1; i >= 0 ; i--) {
    //...
}
簡化終止條件 (常用)

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

// 未優(yōu)化，每次循環(huán)都會去計算數(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++) {
    //...
}
// 聲明了一個變量len用于儲存數(shù)組長度，只會計算一次
簡化循環(huán)體

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

后測試循環(huán) 
最常用的for循環(huán)和while循環(huán)都是前測試循環(huán)。而do-while這種后測試循環(huán)，可以避免最初終止條件的計算，因此運行更快。
前測試循環(huán)（for/while），可能一次都不會執(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語句較快 (多個if情況下)

位運算符較快

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

最小語句數(shù)

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

多個變量聲明合并 
// 多個var聲明
var name = "KenTsang";
var age = 28;
var job = "Developer";

// 合并一個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ù)和字面量兩種方式，不過日常習慣都使用字面量，因為語句更簡潔，寫起來更像數(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)顯示的頁面的一部分，那么你就是在進行一個現(xiàn)場更新
文檔片段

文檔片段相當一個臨時的占位符，只有片段中的內(nèi)容會被添加到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

合并插入代碼一次性設(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;
    事件代理（事件委托）

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

      
    
    • 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，不管它是一個屬性還是一個方法，都是在文檔上進行一個查詢，這個查詢開銷很昂貴。
    // 一個死循環(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會不斷地插入a標簽

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

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

    返回HTMLCollection對象情況有：

    document.getElementByTagName()。

    獲取元素的childNodes屬性

    獲取元素的attributes屬性

    document.forms,document.images等

    參考文檔

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

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

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

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

    相關(guān)文章

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

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

      dayday_up 評論0 收藏0

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

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

      tinylcy 評論0 收藏0

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

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

      banana_pi 評論0 收藏0

    • 001-讀書筆記-JavaScript高級程序設(shè)計 JavaScript簡介

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

      masturbator 評論0 收藏0

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

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

      Corwien 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <