.append VS .html VS .innerHTML表现

Question

这个网站在3种不同的方法之间运行测试,它似乎.html是最快的,其次是.append.接着是.innerHTML.有人可以向我解释原因吗？

这是三种方法之间进行比较的网站.

我已经读过这个与此相关的问题但是我并不真正理解给定的答案,而且这个问题并没有真正详细阐述.innerHtml.

我不明白以下部分:

创建一个临时元素,我们称之为x.x的innerHTML设置为您传递的HTML字符串.然后jQuery将每个生成的节点(即x的childNodes)转移到新创建的文档片段,然后它将被缓存以供下次使用.然后它将片段的childNodes作为新的DOM集合返回.请注意,它实际上要复杂得多,因为jQuery会进行一系列跨浏览器检查和各种其他优化.例如,如果你只传递<div></div>给jQuery(),jQuery将采用一个快捷方式,只需执行document.createElement('div').

有人可以简化这个吗？

Answer 1

这个基准毫无价值.innerHTML总是比DOM操作更快.

jQuery 似乎更快,因为它首先准备一个包含所有HTML的字符串,而其他人在每次迭代时执行一次操作.另请注意,jQuery.html()会innerHTML尽可能使用.

来自基准测试的jQuery

var html = '';
for (var i = 0; i < len; i++) {
  html += '<div>Test ' + i + '</div>';
}

$('#list').html(html);

来自基准的innerHTML

var list = document.getElementById('list');
for (var i = 0; i < len; i++) {
  list.innerHTML = list.innerHTML + '<div>Test ' + i + '</div>';
}

innerHTML如果它的编写方式如下,则测试速度会快得多:

var list = document.getElementById('list');
var html = '';

for (var i = 0; i < len; i++) {
    html += '<div>Test ' + i + '</div>';
}

list.innerHTML = html;

http://jsben.ch/#/yDvKH

Answer 2

这三个对我来说都很慢.在每次迭代中修改dom很慢.

http://jsperf.com/jquery-append-vs-html-list-performance/24

我刚刚在那里添加了一个新测试:

var html = [];
for (var i = 0; i < len; i++) {
  html.push('<div>Test ' + i + '</div>');
}

document.getElementById('list').innerHTML = html.join('');

这再快一点.:)

我在Firefox中的方法是26k Ops/sec,而不是1,000,10,000和13

Answer 3

怎么能.html比快.innerHTML时,.html使用.innerHTML了大量额外的代码？这里.html用jQuery实现(直接从jQuery文件中获取).

html: function( value ) {
    return jQuery.access( this, function( value ) {
        var elem = this[0] || {},
            i = 0,
            l = this.length;

        if ( value === undefined ) {
            return elem.nodeType === 1 ?
                elem.innerHTML.replace( rinlinejQuery, "" ) :
                undefined;
        }

        // See if we can take a shortcut and just use innerHTML
        if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
            ( jQuery.support.htmlSerialize || !rnoshimcache.test( value )  ) &&
            ( jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value ) ) &&
            !wrapMap[ ( rtagName.exec( value ) || ["", ""] )[1].toLowerCase() ] ) {

            value = value.replace( rxhtmlTag, "<$1></$2>" );

            try {
                for (; i < l; i++ ) {
                    // Remove element nodes and prevent memory leaks
                    elem = this[i] || {};
                    if ( elem.nodeType === 1 ) {
                        jQuery.cleanData( getAll( elem, false ) );
                        elem.innerHTML = value;
                    }
                }

                elem = 0;

            // If using innerHTML throws an exception, use the fallback method
            } catch(e) {}
        }

        if ( elem ) {
            this.empty().append( value );
        }
    }, null, value, arguments.length );
}

Answer 4

正如 Bart 所说，innerHTML 总是比 DOM 操作更快。

我正在测试 hyperHTML，所以我想分享一下我的结果。实际上，我最初并没有在 CodePen 中运行基准测试，并且有一个有趣的区别，即 jQuery 时间与在 CodePen 中运行的innerHTML 更接近。

铬合金：
创建片段 312.80 毫秒  
超 HTML 253.10 毫秒     
内部HTML 62.70 毫秒   
$.append 183.40 毫秒

Chrome（扩展关闭）： 
创建片段 225.10 毫秒
超 HTML 139.80 毫秒
内部HTML 47.80 毫秒
$.append 170.90 毫秒

火狐浏览器： 
创建Fragment 141毫秒
超 HTML 84 毫秒
内部HTML 25 毫秒
$.append 90 毫秒

边缘： 
创建片段 422.50 毫秒
超 HTML 184.60 毫秒
内部HTML 44.00 毫秒
$.append 1629.69 毫秒

IE11: 
创建片段 1180.29 毫秒
hyperHTML 13315.59 ms //回退速度慢，IE很糟糕
内部HTML 125.70 毫秒
$.append 2382.49 毫秒

我认为这一切都很简单。JavaScript 解析和创建元素的速度不如浏览器快，因为浏览器是特定于机器的编译代码。没有比直接交出 HTML 并让浏览器不间断地完成工作更好的方法了。

某些性能差异可能是由于 XSS 检查造成的，这看起来是谨慎的。

function runbench(){
  var data = [];
  for (var i = 0; i < 10001; i++) {
      data.push("<span>" + i + "</span>");
  }

  var perf=[];
  var t0 = performance.now();
  var c = document.createDocumentFragment();
  for (var i = 0; i < 10001; i++) {
      var e = document.createElement("span");
      e.innerHTML = data[i];
      c.appendChild(e);
  }
  document.querySelector('#createFragment').appendChild(c);
  document.querySelector('#createFragment').classList='done';
  var t1 = performance.now();
  perf.push(t1-t0);

  var t0 = performance.now();
  document.querySelector('#innerHTML').innerHTML = data.join('');
  document.querySelector('#innerHTML').classList='done';
  var t1 = performance.now();
  perf.push(t1-t0);

  var t0 = performance.now();
  $('#jqhtml').html(data.join(''));
  document.querySelector('#jqhtml').classList='done';
  var t1 = performance.now();
  perf.push(t1-t0);

  var t0 = performance.now();
  $('#jqappend').append(data.join(''));
  document.querySelector('#jqappend').classList='done';
  var t1 = performance.now();
  perf.push(t1-t0);

  var t0 = performance.now();
  hyperHTML.bind(document.querySelector('#hyperHTML'))       
  `${data.map(function (item) {
      return "<span>" + item + "</span>";
  })}`;
  document.querySelector('#hyperHTML').classList='done';
  var t1 = performance.now();
  perf.push(t1-t0);

  var stats = [];
  stats.push("<table>")
  stats.push("<tr><td>createFrag: </td><td>" + perf[0].toFixed(2) + "</td></tr>");
  stats.push("<tr><td>innerHTML: </td><td>" + perf[1].toFixed(2) + "</td></tr>");
  stats.push("<tr><td>$.html: </td><td>" + perf[2] .toFixed(2) + "</td></tr>");
  stats.push("<tr><td>$.append: </td><td>" + perf[3] .toFixed(2) + "</td></tr>");
  stats.push("<tr><td>hyperHTML: </td><td>" + perf[4].toFixed(2) + "</td></tr>");
  stats.push("</table>");
  $('#performance').html(stats.join(''));
  document.querySelector('#performance').classList='done';
}

https://codepen.io/jwhooper/pen/GzKwMV