在 HTML 元素中使用 Jquery 添加值的最快方法是什么？答案

【问题标题】：Which is the fastest method to add values with Jquery in HTML elements?在 HTML 元素中使用 Jquery 添加值的最快方法是什么？
【发布时间】：2017-08-07 17:53:49
【问题描述】：

使用纯 HTML，然后通过 jquery 添加值：

  <div id="leftAxis">
    <div class="leftQuadrant">
      <div id="oneval" class="insideQuadrant"></div>
    </div>
    <div class="leftQuadrant">
      <div id="twoVal" class="insideQuadrant"></div>
    </div>
    <div class="leftQuadrant">
      <div id="threeVal" class="insideQuadrant"></div>
    </div>
  </div>


    fillLeftAxis: function() {
        var data = ['one', 'two', 'three'],
            IdHtml = ['#oneVal', '#twoVal', '#threeVal'];

        for(var i=0; i<IdHtml.length; i++) {
            $(IdHtml[i]).html(data[i]);
        }
    };

或者直接用其中的值构造 HTML 元素，稍后用 jquery 将其附加到容器中：

  <div id="leftAxis">
  </div>

fillLeftAxis: function() {
    var data = ['one', 'two', 'three'],
        html = '';

    for(var i=0; i<data.length; i++) {
        html += '<div class="leftQuadrant"><div id="' + data[i] + 'Val" class="insideQuadrant">' + data[i] + '</div></div>';
    }

    $('#leftAxis').html(html);
};

【问题讨论】：

如果你真的需要一些快速的代码，放弃 jQuery。
如果您只添加文本，请使用jQuery.text()。但我只能同意上一篇文章：如果你想要它快做原生JS。 jQuery 有很多开销。 $(IdHtml[i]).html(data[i]) 将使用一个条目创建一个类似数组的结构，迭代元素并执行 html 函数。
如果您使用第二种方法（构建大量 html）然后进行 single jquery 调用，“开销”将非常小。即使您使用第一种方法，与原生相比，使用$(id).html() 的“开销”也将完全最小（因为重绘会产生更大的开销）。因此，虽然“jquery 有开销”的一般性全面声明通常是正确的，但 this 场景中的实际开销不值得不使用 jquery。所以要看你的情况。

标签： javascript jquery html optimization

【解决方案1】：

您可以使用Document.querySelectorAll() 来选择类"insideQuadrant" 的所有元素，而不是使用jQuery，这是一个外部库，其中包含许多您可能不需要在脚本（或项目）中全部使用的方法。

您可以使用Array.prototype.forEach() 遍历elements 的所有数组。

代码：

(function () {
  var data = ['one', 'two', 'three'];

  document
    .querySelectorAll('.insideQuadrant')
    .forEach(function (element, index) {
      element.textContent = data[index];
    });
})();

<div id="leftAxis">
  <div class="leftQuadrant">
    <div class="insideQuadrant"></div>
  </div>
  <div class="leftQuadrant">
    <div class="insideQuadrant"></div>
  </div>
  <div class="leftQuadrant">
    <div class="insideQuadrant"></div>
  </div>
</div>

注意：在这种情况下，不需要使用元素 id 属性，因为这需要对 DOM 进行更多查询。

【讨论】：

【解决方案2】：

第二种方式。

第一种方式会导致 Dom Tree 刷新每个循环，这会导致大量的性能消耗。不建议。

查看更多有关浏览器中的 Dom 渲染和 UI 线程的详细信息。

【讨论】：