用于DOM修改的高效Javascript

Question

说,我有一个HTML文件,我想用Javascript处理.例如:

• 添加一些DOM元素,如span或div包装器.
• 稍微更改文档样式,如基本字体大小,行高等.
• 使用hyphentor添加­实体.

什么是最有效的方法,即我想用最少的回流量做到这一点.

理想的情况是在第一个布局之前运行JS代码.这可能吗？我知道,在页面显示之前执行昂贵的脚本通常是一个坏主意,这会使页面看起来空白一段时间,这是一个非常糟糕的体验.但是,我将需要这个离线工作,这对我的项目来说不是问题.

或者,是否有办法在一组中进行所有dom修改,即在所有改动完成后触发回流？

Answer 1

有几种方法.所有这些的主要目标是你最终导致一次 - 或至少尽可能少 - 回流/重绘.

非DOM元素

您可以在不附加到DOM的情况下使用元素,然后在设置完所有内容后将所有内容附加到一起.

唯一的问题是,如果您的代码需要引用偏移维度,因为DOM中尚未包含的元素没有.

var container = document.createElement('section'); //not in the DOM yet
//do some extensive work here to prepare the doc
document.body.appendChild(container); //now we go to the DOM, causing a single re-paint

Doc片段

这个主题的更正式化和可能改进的变化将是文档片段,它带来了性能上的好处(显然).它们实际上是第二个独立的DOM,没有显示.

串

所有这些中最快的可能是将文档构建为字符串.显而易见的意思是你不能在它上面使用DOM方法,但是如果你对字符串处理和REGEX的兴趣很高(当然不是理想的HTML),那么值得考虑.

最后,如果速度至关重要并且您需要进行大量计算或字符串处理,那么您可能希望利用Web工作者.这些不能直接与DOM通信,但您可以将任务外包给它们,而且至关重要的是,它们在一个单独的线程上异步工作.