用于DOM修改的高效Javascript

用于DOM修改的高效Javascript,第1张

概述说,我有一个 HTML文件,我想用 Javascript处理.例如: >添加一些DOM元素,例如span或div包装器. >稍微更改文档样式,如基本字体大小,行高等. >使用催眠术来增加和害羞;实体. 什么是最有效的方法,即我想用最少量的回流来做到这一点. 理想的情况是在第一个布局之前运行JS代码.这可能吗?我知道,在页面显示之前执行昂贵的脚本通常是一个坏主意,这会使页面看起来空白一段时间,这是一 说,我有一个 HTML文件,我想用 Javascript处理.例如:

>添加一些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所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1081265.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存