Javascript性能优化

Question

我使用下面的代码循环数千次，我需要它尽可能快，但是我不是Javascript方面的专家，我所知道的就是这段代码比使用innerHTML方法更快。

它能被优化吗？如果是这样的话，是怎么做的？

    var a,b,c,d,e,
    trEl, tdEl, imgEl

    for (i = 0; i < docs.length; i++) {
      trEl = document.createElement('tr');
      tdEl = document.createElement('td');
      td1El = document.createElement('td');
      td2El = document.createElement('td');
      td3El = document.createElement('td');
      imgEl = document.createElement('img');

      var str
      a = docs[i]['a']
      b = docs[i]['b']
      c = docs[i]['c']
      d = docs[i]['date'] + " - " + docs[i]['timestamp']
      e = docs[i]['_e']

      trEl.setAttribute('id', e);
      trEl.setAttribute('ondblclick', 'scan(' + '"' + e + '"' + ')');
      imgEl.setAttribute('src', 'css/bullet.png');
      tdEl.appendChild(imgEl);

      tdEl.appendChild(document.createTextNode(a));
      td1El.appendChild(document.createTextNode(d));
      td2El.appendChild(document.createTextNode(b));
      td3El.appendChild(document.createTextNode(c));

      trEl.appendChild(tdEl);
      trEl.appendChild(td1El);
      trEl.appendChild(td2El);
      trEl.appendChild(td3El);

      document.getElementById("search-results").appendChild(trEl)
      }

Answer 1

不要在每次迭代中计算docs.length --它是常量的，所以只需要计算一次：

for (var i = 0, n = docs.length; i < n; ++i)

将docs[i]转换为别名变量，这样您就不会重复对同一个元素执行数组查找，并且除非键是可变的，否则不要使用字符串作为键：

var doc = docs[i];
var a = doc.a;
...

如果上述局部变量a通过e只使用一次，则根本不用存储它们，只要在需要时将它们作为简单的参数输入即可(见下文)

如果可以的话，使用DOM属性代替setAttribute函数调用：

trEl.id = doc._e;                // instead of 'e'
imgEl.src = 'css/bullet.png';

不要使用内联事件处理程序：

trEl.addEventListener('dblclick', scan, false);

不需要将变量e传递给scan，因为它只是单击元素的ID，因此在事件处理程序中很容易提取：

function scan(event) {
    var e = this.id;
    ...
}

使用DocumentFragment存储所有新元素，然后一次性将整个片段添加到document中，允许浏览器一次性处理所有可见的DOM更改：

var rows = document.createDocumentFragment();

for (...) {
    ...
    rows.appendChild(trEl);
}

document.getElementById("search-results").appendChild(rows);