我正在寻找提高单页网络应用性能的方法，该应用需要在包括低端手机在内的各种设备上运行。
我有 8 个模式（Twitter Bootstrap，但这个问题适用于任何框架），它们在我的页面 DOM 元素总数 (783) 中添加了 200 多个元素。是否值得将这些作为 Javascript 中的字符串而不是 HTML 中的代码，并在需要时在显示之前立即将它们注入 DOM，然后再将它们删除？将实时 DOM 大小减少四分之一，从而使例如JQuery 元素搜索更快、更轻量级的页面等。
我想以 JQuery 的 $.detach() 和 $.append() 为例
【问题讨论】：
标签： javascript jquery html dom
每当您修改 DOM 时，都会对性能造成影响，因为浏览器将不得不“重排”和“重绘”用户界面。因此，将这些修改保持在最低限度会有所帮助，但是批量修改会吸收一些性能损失（即单独更改 3 个 DOM 元素比同时更改所有 3 个元素更昂贵）。因此，请尽可能将您的 DOM 更改组合在一起。
您用来注入新内容的实际机制可能是：
将 HTML 字符串传递给 HTML 解析器并要求它解析
按需串。这与流程基本相同
当从服务器解析页面时会发生这种情况。使用
标准的 .innerHTML 或 JQuery .html() 可以实现这一点。
您也可以先在内存中构建 DOM 元素，然后
在正确的时间将该节点注入 DOM（即document.createElement 或document.createDocumentFragment）。我一般赞成
这种方法更加程序化，大大减少了
字符串连接和引用错误的可能性，并且是
阅读更干净。从性能的角度来看，这为您提供了
在 DOM 注入之前完成一些工作的好处
时间。这相当于 DOM .appendChild() 或
JQuery .append() 方法。
最后，今天的现代用户代理处理 DOM 更改的能力比过去要好得多，而且任何一种方法都是可行的。你想要远离的真正糟糕的技术（比如在循环中修改 DOM）最终会有所作为。
【讨论】：