>添加一些DOM元素,例如span或div包装器.
>稍微更改文档样式,如基本字体大小,行高等.
>使用催眠术来增加和害羞;实体.
什么是最有效的方法,即我想用最少量的回流来做到这一点.
理想的情况是在第一个布局之前运行Js代码.这可能吗?我知道,在页面显示之前执行昂贵的脚本通常是一个坏主意,这会使页面看起来空白一段时间,这是一个非常糟糕的体验.但是,我将需要这个离线工作,这对我的项目来说不是问题.
或者,是否有办法在一组中进行所有dom修改,即在所有修改完成后触发重排?
解决方法 有几种方法.所有这些的主要目标是你最终导致一次 – 或至少尽可能少 – 回流/重绘.非DOM元素
您可以在不附加到DOM的情况下使用元素,然后在设置完所有内容后将所有内容附加到一起.
唯一的问题是,如果您的代码需要引用偏移维度,因为DOM中尚未包含的元素没有.
var container = document.createElement('section'); //not in the DOM yet//do some extensive work here to prepare the docdocument.body.appendChild(container); //Now we go to the DOM,causing a single re-paint
Doc片段
这个主题的更正式化和可能改进的变化将是document fragments,这带来了性能优势(显然).它们实际上是第二个独立的DOM,没有显示.
串
所有这些中最快的可能是将文档构建为字符串.显而易见的意思是你不能在它上面使用DOM方法,但是如果你对字符串处理和REGEX的兴趣很高(当然不是理想的HTML),那么值得考虑.
最后,如果速度至关重要并且您需要进行大量计算或字符串处理,那么您可能希望利用Web工作者.这些不能直接与DOM通信,但您可以将任务外包给它们,而且至关重要的是,它们在一个单独的线程上异步工作.
总结以上是内存溢出为你收集整理的用于DOM修改的高效Javascript全部内容,希望文章能够帮你解决用于DOM修改的高效Javascript所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)