高性能JavaScript DOM編程

時間 2019-11-18

標籤高性能 javascript dom 編程欄目 JavaScript 简体版

原文原文鏈接

咱們知道，DOM是用於操做XML和HTML文檔的應用程序接口，用腳本進行DOM操做的代價很昂貴。有個貼切的比喻，把DOM和JavaScript（這裏指ECMScript）各自想象爲一個島嶼，它們之間用收費橋樑鏈接，ECMAScript每次訪問DOM，都要途徑這座橋，並交納「過橋費」,訪問DOM的次數越多，費用也就越高。所以，推薦的作法是儘可能減小過橋的次數，努力待在ECMAScript島上。咱們不可能不用DOM的接口，那麼，怎樣才能提升程序的效率？javascript

一、DOM訪問與修改

訪問DOM元素是有代價的（「過橋費」你懂的），修改元素代價更是昂貴，由於它會致使瀏覽器從新計算頁面的幾何變化（重排和重繪）。html

固然最壞的狀況是在循環中訪問或者修改元素，看下面兩段代碼：java

var times = 15000;

// code1
console.time(1);
for(var i = 0; i < times; i++) {
  document.getElementById('myDiv1').innerHTML += 'a';
}
console.timeEnd(1);

// code2
console.time(2);
var str = '';
for(var i = 0; i < times; i++) {
  str += 'a';
}
document.getElementById('myDiv2').innerHTML = str;
console.timeEnd(2);

結果第一次運行的時間竟然是第二次的千倍！(chrome 版本 44.0.2403.130 m)chrome

1: 2846.700ms
2: 1.046ms

第一段代碼的問題在於，每次循環迭代，該元素都會被訪問兩次：一次讀取innerHTML的值，另外一次重寫它，也就是說，每次循環都在過橋（重排和重繪將在下一篇講解）！結果充分代表，訪問DOM的次數越多，代碼的運行速度越慢。所以，能減小DOM訪問的次數則儘可能減小，儘可能留在ECMAScript這端處理。編程

二、HTML集合 & 遍歷DOM

操做DOM另外一個耗能點就是遍歷DOM，通常咱們會收集一個HTML集合，好比用getElementsByTagName()，或者用document.links等，我想你們對此都不陌生。收集的結果是一個相似數組的集合，它處於一種「實時狀態」實時存在，這意味着當底層文檔對象更新時，它也會自動更新。怎麼講？很簡單舉個栗子：數組

<body>
  <ul id='fruit'>
    <li> apple </li>
    <li> orange </li>
    <li> banana </li>
  </ul>
</body>
<script type="text/javascript">
  var lis = document.getElementsByTagName('li');
  var peach = document.createElement('li');
  peach.innerHTML = 'peach';
  document.getElementById('fruit').appendChild(peach);

  console.log(lis.length);  // 4
</script>

而這正是低效之源！很簡單，跟數組的優化操做同樣，緩存個length變量就ok了（讀取一個集合的length比讀取一個普通數組的lengh要慢不少，由於每次都要查詢）：瀏覽器

console.time(0);
var lis0 = document.getElementsByTagName('li');
var str0 = '';
for(var i = 0; i < lis0.length; i++) {
  str0 += lis0[i].innerHTML;
}
console.timeEnd(0);


console.time(1);
var lis1 = document.getElementsByTagName('li');
var str1 = '';
for(var i = 0, len = lis1.length; i < len; i++) {
  str1 += lis1[i].innerHTML;
}
console.timeEnd(1);

咱們看看性能提高能有多少？緩存

0: 0.974ms
1: 0.664ms

當集合的長度大的時候（demo是1000），性能提高仍是很明顯的。app

而《高性能JavaScript》提出了另外一個優化策略，它指出，「因爲遍歷數組比遍歷集合快，所以若是先將集合元素拷貝到數組中，那麼訪問它的屬性會更快」，通過測試，並無很好地發現這個規律，因此仍是不要畫蛇添足了，測試代碼以下：（有疑義歡迎與我交流探討）dom

console.time(1);
var lis1 = document.getElementsByTagName('li');
var str1 = '';
for(var i = 0, len = lis1.length; i < len; i++) {
  str1 += lis1[i].innerHTML;
}
console.timeEnd(1);


console.time(2);
var lis2 = document.getElementsByTagName('li');
var a = [];
for(var i = 0, len = lis2.length; i < len; i++)
  a[i] = lis2[i];

var str2 = '';
for(var i = 0, len = a.length; i < len; i++) {
  str2 += a[i].innerHTML;
}
console.timeEnd(2);

2015-08-24 update：這裏個人理解有一個誤區，其實應該不算拷貝數組的時間，而純粹比較數組的訪問時間和html集合的訪問時間，感謝嘗試愛上編程指出~

本節的最後介紹兩個原生DOM方法，querySelector()和querySelectorAll()，相信你們都不陌生，後者返回一個數組（注意，它們的返回值不像HTML集合同樣會動態變化），前者返回匹配的第一個元素。好吧，其實並非全部時候它的性能都優於前者的HTML集合遍歷。

console.time(1);
var lis1 = document.getElementsByTagName('li');
console.timeEnd(1);

console.time(2);
var lis2 = document.querySelectorAll('li');
console.timeEnd(2);

// 1: 0.038ms
// 2: 3.957ms

可是由於它是相似CSS的選擇方法，因此在作組合選擇的時候，效率會提高，又方便。好比作以下的組合查詢：

var elements = document.querySelectorAll('#menu a');
var elements = document.querySelectorAll('div.warning, div.notice');

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。