Question

我需要在页面中添加一些div元素。有两种方法：方式1（附加完整的字符串）：

$('#page123').append("<div id='foo' class='checkbox' data-quesid='foofaa'><label class='control-label'>Question<span class='quesNo'>"+ quesNo +"</span>: <span class='q'>" + title +"</span></label></div>")

方式2（克隆html元素，填充然后追加）：

var question = $('div.sampleQuestionLayOut').first().clone(true);
question.removeClass('sampleQuestionLayOut');
question.removeAttr('style');

question.attr('id', 'foo');
question.attr('data-quesid', 'foofaa');
......so on

$('#page123').append(question);

显然，在第2种方式中，我正在编写一个示例html元素来选择它并填充它并追加。在我的html文件中：

<div id='' class='checkbox sampleQuestionLayOut' data-quesid='' style='display:none'>
  <label class='control-label'>
    Question
    <span class='quesNo'></span>: 
    <span class='q'></span>
  </label>
</div>

现在我可能会在我的页面上添加这样的问题20次。上述哪种方式在性能方面更有效，哪种方式更好？？

Answer 1

在这种情况下，使用jQuery实现最佳性能的最佳方法是创建整个标记（使用字符串）并仅调用.append（string）一次（选项＃1）。

这样做，你只需要使用DOM一次（Javascript较慢），而不是多次/多次（选项＃2）。

Answer 2

第一种方法应该更快一点，因为它对DOM的处理较少。

这是一个使用performance.now()来测量执行时间的小测试：

$(function() {

  var s1 = performance.now();
  $('#page123').append("<div id='foo' class='checkbox' data-quesid='foofaa'><label class='control-label'>Question<span class='quesNo'>2</span>: <span class='q'>2</span></label></div>")
  var e1 = performance.now();
  console.log('StringAppend: ' + (e1 - s1) + ' ms');

  var s2 = performance.now();
  var question = $('div.sampleQuestionLayOut').first().clone(true);
  question.removeClass('sampleQuestionLayOut');
  question.removeAttr('style');
  question.attr('id', 'foo');
  question.attr('data-quesid', 'foofaa');
  question.html("<label class='control-label'>Question<span class='quesNo'>1</span>: <span class='q'>1</span></label>")
  $('#page123').append(question);
  var e2 = performance.now();
  console.log('CloneAndAppend: ' + (e2 - s2) + ' ms');

})

https://jsfiddle.net/s1odw6pg/1/

我可以补充一点，一般来说，您应该尽量减少append()方法的调用次数，从而最大限度地减少DOM操作操作的调用次数。如果你的元素需要一个接一个地出现，你可以构建一个大的HTML字符串并将它们全部附加在一起。查看不同方法的有趣资源如下：http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

Answer 3

实际上，第一种方法应该稍快一些，因为它不首先寻找模板元素。至于最佳实践，我不确定。我更喜欢第二种，但它可以变得非常主观。

[错误]第二种方法应该更快，因为它也不需要解析标记。

编辑 - 我应该更加关注。我很快就浏览了它，并认为你是在方法2中从头开始创建的。（这本来是最快的方式）

在jQuery中哪种创建和追加元素的方式更快？

3 个答案: