DOM的重绘以及回流
发布日期:2021-05-07 10:55:39 浏览次数:21 分类:技术文章

本文共 582 字,大约阅读时间需要 1 分钟。

​ ** 首先**要想了解什么是DOM的重绘和回流,首先我们要知道的是什么是DOM!

​ DOM的全拼为 Domcument Object Model(文档对象模型)是一种用于HTML和XML文档的编程接口,它给文档提供了一种结构化的标识方法,可以改变文档的内容和呈现方式。

1、什么是DOM的回流

当页面中元素的位置,大小或结构、定位发生改变,会引发浏览器对当前页面的结构进行重新的计算、这是非常耗性能的。

2、什么是DOM的重绘

​ 就是当元素中的背景、透明度、颜色发生变化后,浏览器会进行重新的描绘,这个过程就是浏览器的重绘

3、优化

减少回流,重排

1、在浏览器本身放入优化策略

浏览器会维护一个队列,把所有的引起回流,重绘的操作放入这个队列,等队列中的操作到了一定的数量或者到了一定的事件后,浏览器就会flush队列,进行一个批的处理。

2、我们通过减少DOM树渲染的操作,减少一些style信息【样式】的请求

  • 将多次的样式改变的操作合并成一次
  • 对于一些不需要进行重新排列的元素,通过属性操作将其脱离文档流,从而不会影响其他元素
  • 在内存中通过多次操作节点,完成后在添加到文档中,也就是通过异步获取元素,在添加到元素中。通过在内存中构建DOM树,之后待操作完成,再更新的文档中,减少document中的Dom树的创建次数
  • 获取浏览器重排DOM节点的属性值,存储到变量中
上一篇:skyfans之每天一个Liunx命令系列之一:uname
下一篇:一个简单的shell脚本:weblogic日志按天生成(日志压缩)

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2025年03月26日 00时38分47秒