資料存取

字面量、本地變數、陣列元素、物件成員

字面量只代表自身，不儲存在特定的位置。JavaScript 中的字面量有：字串、數字、布林值、物件、陣列、函式、正則表示式以及特殊的 null 和 undefined 值。

一般來說，訪問本地變數和字面量的事件較少，訪問陣列元素和物件成員花費時間較多。

訪問區域性變數的時間比全域性變數的時間少。

還有一點，從伺服器獲取的資料、陣列的長度之類的變數最好用一個變數儲存起來，這樣再次訪問的時候就相當於直接訪問區域性變數，否則計算會消耗部分效能。

瀏覽器中的 DOM

DOM 和 JavaScript 相當於兩個島嶼，因此 ECMAScript 每次訪問 DOM ,都需要耗費時間和精力。

因此想要提高效能，減少 ECMAScript 和 DOM  之間的互動也是知識點的一部分。

DOM 訪問與修改

在不影響功能的情況下，儘可能減少對 DOM 的訪問，能只訪問一次決不訪問多次。

innerHTML 對比 DOM 方法

最新研究表明，innerHTML 比 document.createElement() 方法快。

HTML  集合

昂貴的集合

document.getElementsByName()

document.getElementsByClassName()

document.getElementsByTagName()

document.images   頁面中所有 img 元素

document.links  所有 a 元素

document.forms 所有表單元素

document.forms[0].elements 頁面中第一個表單種的所有欄位

以上方法和屬性的返回值就是 HTML 集合物件，是一個類似陣列的列表。他們並不是真正的陣列，因為他們沒有 push() 或者 slice() 之類的方法。

但他們提供了一個類似陣列中的 length 屬性，可以通過數字索引的方式訪問列表種的元素。

***** 但實際上，這種方法非常昂貴。這樣最意味著 javascript 和 dom 元素一直保持著連線。每次需要最新資訊時，都會重複執行查詢的過程。即使你只是想獲取集合的長度，也會查詢。因此，這種做法非常低效

我們可以接收一個集合，將它放到陣列中。

var coll = document.getElementsByTagName('div');

var ar = toArray(coll);

訪問集合元素時使用區域性變數

當遍歷一個集合時，第一優化原則是把集合儲存在區域性變數中，並把 length 快取在迴圈外部，然後，使用區域性變數替代這些需要多此讀取的元素。

function collectionNodeLocal(){

    var coll = document.getElementsByTagName('div'),
    len = coll.length,
    name = '',
    el = '',
    
    for(var count = 0; count < len; count ++){
        el = coll[count];
        name = el.nodeName;
        name = el.nodeType;
        name = el.tagName;
    }

    return name;
}

// 其實我感覺 這段 name 的程式碼好像有點錯誤，但是書上原文是這樣子。意思表達的就是儘可能的化遍歷量為常量，減少迴圈次數吧

獲取 DOM 元素

新提供的 querySelectorAll() 比 getElementById() 和 getElementsByTagName() 更好控制。

例如如下程式碼：

var elements = document.querySelectorAll('#menu a');

elements 的值包含一個引用列表，指向位於 id  = "menu" 的元素之中的所有 a 元素。

待續。