我正在尝试使用javascript更新html表的正文。
有两种方法可以实现这一点
html表格:
<table>
<thead>
<tr>
<th>Title</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
方法1(字符串插值):
document.querySelector('table tbody').innerHTML=
'<tr><td>some text</td></tr><tr><td>some text</td></tr>'
方法二:
const table = document.querySelector("table");
const row = table.insertRow(0);
const cell1 = row.insertCell(0);
cell1.innerHTML = 'some text';
哪种方法的性能更好?为什么?
假设每1秒我们必须更新表的整个主体,并且我们有100行
注意:我只想了解性能,而忽略安全性等其他问题
3条答案
按热度按时间vulvrdjw1#
我们用1000次表体更新来测试性能,为了比较,两种方法都是每次更新100行来替换整张表:
控制台日志:
正如所猜测的那样,method1比method2快2.5倍,这是有道理的,因为要替换method2中的tbody,首先需要清空它,并且有200个方法调用,而不是一次更新。
nbysray52#
尽可能避免更改DOM
作为前端开发人员,我们要处理的消耗资源最多的操作之一就是对DOM的更改。回流和重绘涉及到浏览器必须处理的大量计算,因此要将交互和对DOM的更改保持在最低限度。我们可以添加、删除并通过使用
documentFragment
作为构建的临时文档来修改HTML和文本。t附加到DOM,因此对docFrag执行的任何操作都不会影响DOM。在测试A和测试B中,所有操作都是在docFrag上完成的--每个测试DOM将有2次重画和2次回流。为了充分理解回流和重画的危害,转到此test suite。其中有4个测试用例TEST A和TEST B与此答案中提供的堆栈代码段相同--TEST C为测试A没有docFrag,测试D是测试B没有docFrag。至于测试C/D触发了多少次回流/重画,我没有费心去计数(我们可以安全地假设远远超过微不足道的2测试A/B)。
JSBench.Me - TEST A/B/C/D
获胜者是...
试验A占优势🥇
测试A
documentFragment
和HTML表格元素方法测试B
documentFragment
和呈现HTML一个二个一个一个
fcwjkofz3#
JS代码更快!
自己测试...
使用文本意味着使用HTML解释器来生成DOM元素,而JS代码直接完成这一工作,这里特别优化了处理html表格。