使用 javascript 向 DOM 树中添加大量元素时使用 DocumentFragment

介绍

在维护遗留系统和提高性能时，有时会完成荒谬的实现（悲伤）

这次，我将介绍一个改进我遇到的实现并且能够将执行时间提高到 1/20 左右的故事。

实施细节

（虽然与实际处理内容略有不同，）我们会反复处理API获取的数据（列表），并实现在表格中显示。

原始实现

在最初的实现中，我在 html 端创建了一个模板，将其克隆在一个循环中，并将其添加到 DOM 树中，同时用正则表达式替换字符串。
（实际实现的元素较多，处理复杂，所以显示10000个项目大概需要30到40秒。在上面的JSFiddle中，在我的环境中，10到12秒左右。）

改进后实施

在改进的实现中，使用document.createDocumentFragment()创建了一个虚拟DOM，将子项添加到虚拟DOM中，并在循环处理后全部添加。
（在实际实现的改进版中改进到了 2 到 3 秒，在 JSFiddle 中改进到了大约 0.1 到 0.3 秒。）

评论

• 由于正则表达式的字符串替换是在原始过程中与实际执行的过程一起执行的，因此删除它也导致处理速度的提高。我做了一些额外的测试，得到了以下结果。
  • 通过克隆添加: 4-5 秒
  • 使用 DocumentFragment: 约 0.1 秒
• 原来的过程中，onClick设置在html端，_ID设置为参数，看来他也想替换它。
  • （它会移动，但令人沮丧...... w）

参考

在最后

这个遗留系统有多个以与原始过程相同的方式创建表和列表的过程的实现。
我认为做它的人首先用这个过程实现它，并在模仿那个过程的同时制作它，所以缓慢的过程逐渐增加。

我认为重要的是要实施它，同时验证它是否可以正常工作，即使在初始实施阶段有很多案例。

原流程的实现中有一个页面实现了创建多表的流程，第一次加载需要一两分钟的时间，所以性能提升相当大，我会继续验证和改进在将来。