我正在寻找提高单页网络应用性能的方法,这需要在包括低端手机在内的各种设备上运行。
我有8个模态(Twitter Bootstrap,但这个问题适用于任何框架),它将超过200个元素添加到我的总页面DOM元素数(783)。是否值得将这些作为Javascript中的字符串而不是HTML中的代码,并在需要时在显示之前立即将它们注入到DOM中,然后将其删除?将实时DOM大小减少四分之一,从而例如JQuery元素搜索更快,更轻量级的页面等。
我正在考虑使用JQuery的$ .detach()和$ .append()例如
答案 0 :(得分:0)
无论何时修改DOM,您都会受到性能影响,因为浏览器必须重排"重排"和#34;重画"用户界面。因此,将这些修改保持在最小值将有所帮助,但是批量修改会吸收一些性能损失(即分别更改3个DOM元素比一次更改所有3个元素更昂贵)。因此,尽可能将DOM更改组合在一起。
用于注入新内容的实际机制可以是:
将一串HTML传递给HTML解析器并要求它解析
按需提供字符串。这与流程基本相同
从服务器解析页面时发生的情况。运用
标准.innerHTML
或JQuery .html()
完成此任务。
您也可以先在内存中构建DOM元素
在适当的时间将该节点注入DOM(即document.createElement
或document.createDocumentFragment
)。我一般都喜欢
这种方法因为它更具程序性,大大减少了
字符串连接和引用错误的可能性是
清洁阅读。从性能的角度来看,这给你带来了
在DOM注入之前完成一些工作的好处
时间。这相当于DOM .appendChild()
或
JQuery .append()
方法。
最后,今天的现代用户代理处理DOM变化的方式比过去好得多,而且这两种方法都是可行的。它是非常糟糕的技术(比如在循环中修改DOM),你想要远离它,最终会产生影响。