淺談 function properties & DOM cache

javascript function properties

javascript 的 function 是 first-class function, 因此可以賦予 properties

這部份可以 google javascript function properties 會有很好的說明, 常用的 property 比如 arguments 等等

下面是個小小範例

1
2
3
4
5
6
function whatever () {
whatever.myFriend = 'gordon';
return whatever.myFriend;
}
whatever(); // gordon

將 DOM cache 進 properties

下方這段 code 示範將 getElementsByTagName() 所取得的 DOM cache 進 function properties, 再用 console.time 計時

這段code可以直接給瀏覽器跑, 各位可以開 console 觀察 output

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
<div></div>
</body>
<script>
console.time('DOM test without cache.');
for (var i = 0; i < 1000000; i++) {
document.getElementsByTagName('div'); // 傳統用法
}
console.timeEnd('DOM test without cache.');
console.time('DOM test with cache.');
for (var i = 0; i < 1000000; i++) {
getElements('div');
}
console.timeEnd('DOM test with cache.');
function getElements (name) {
// 檢查 cache 是否已經建立
if (!getElements.cache) getElements.cache = {};
return getElements.cache[name] =
getElements.cache[name] ||
document.getElementsByTagName(name);
}
</script>

結論

會變快, 因為查 DOM 很慢, 至於加速多少似乎沒個準, 也要看瀏覽器本身, 我自己測試是 2.5 倍, 但網路上從 5 倍到 10 倍的都有, 或許是實作上更猛

有興趣可以 google 關鍵字 DOM cache 就會有很多測試以及方法, 我自己是參考 jQuery 作者 Johm Resig 的作法

這次是將 function properties 學習上變得有趣一點, 可以確實看到有用的加速^^

參考資料

Secretes of the JavaScript Ninja by John Resig & Bear Bilbeault