根据需要动态插入DOM元素块可以提高性能？

Question

我正在寻找提高单页网络应用性能的方法，这需要在包括低端手机在内的各种设备上运行。

我有8个模态（Twitter Bootstrap，但这个问题适用于任何框架），它将超过200个元素添加到我的总页面DOM元素数（783）。是否值得将这些作为Javascript中的字符串而不是HTML中的代码，并在需要时在显示之前立即将它们注入到DOM中，然后将其删除？将实时DOM大小减少四分之一，从而例如JQuery元素搜索更快，更轻量级的页面等。

我正在考虑使用JQuery的$ .detach（）和$ .append（）例如

Answer 1

无论何时修改DOM，您都会受到性能影响，因为浏览器必须重排＆＃34;重排＆＃34;和＃34;重画＆＃34;用户界面。因此，将这些修改保持在最小值将有所帮助，但是批量修改会吸收一些性能损失（即分别更改3个DOM元素比一次更改所有3个元素更昂贵）。因此，尽可能将DOM更改组合在一起。

用于注入新内容的实际机制可以是：

1. 将一串HTML传递给HTML解析器并要求它解析 按需提供字符串。这与流程基本相同 从服务器解析页面时发生的情况。运用 标准.innerHTML或JQuery .html()完成此任务。

2. 您也可以先在内存中构建DOM元素 在适当的时间将该节点注入DOM（即document.createElement或document.createDocumentFragment）。我一般都喜欢 这种方法因为它更具程序性，大大减少了 字符串连接和引用错误的可能性是 清洁阅读。从性能的角度来看，这给你带来了 在DOM注入之前完成一些工作的好处 时间。这相当于DOM .appendChild()或 JQuery .append()方法。

最后，今天的现代用户代理处理DOM变化的方式比过去好得多，而且这两种方法都是可行的。它是非常糟糕的技术（比如在循环中修改DOM），你想要远离它，最终会产生影响。