什么是重绘和回流?

什么是重绘和回流?重绘 回流 DOM 性能浏览器的性能大部分都是被这两个问题所消耗重绘 DOM 树没有元素增加或删除 只是样式的改变 会导致浏览器对某一元素进行单独的渲染 这个过程就叫做重绘回流 DOM 树中的元素被增加或者删除 导致浏览器需要重新的去渲染整个 DOM 树 回流比重绘更消耗性能 发生回流必定重绘 重绘不一定会导致回流 因为重绘和回流的存在导致真实 DOM 性能不佳 所以 VUE 和 recat 还有 angular 等框架增加了虚拟 DOM 技术 就是为了减少 DOM 的重绘和回流从而减少浏览器性能消耗 这就是虚拟 DOM 的好处

重绘、回流

因为重绘和回流的存在导致真实DOM性能不佳,所以VUE和recat还有angular等框架增加了虚拟DOM技术,就是为了减少DOM的重绘和回流从而减少浏览器性能消耗,这就是虚拟DOM的好处。

*重排(重构/回流/reflow)*:当渲染树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候。

重绘和重排的关系:在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程称为重绘。

触发重排的条件:任何页面布局和几何属性的改变都会触发重排,比如:
  1、页面渲染初始化;(无法避免)

2、添加或删除可见的DOM元素;

3、元素位置的改变,或者使用动画;

4、元素尺寸的改变——大小,外边距,边框;

5、浏览器窗口尺寸的变化(resize事件发生时);

6、填充内容的改变,比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变;

7、读取某些元素属性:(offsetLeft/Top/Height/Width, clientTop/Left/Width/Height, scrollTop/Left/Width/Height, width/height, getComputedStyle(), currentStyle(IE) )

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/223726.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月17日 下午1:33
下一篇 2026年3月17日 下午1:33


相关推荐

  • java测试案例编写方法_java实现自动化测试实例

    java测试案例编写方法_java实现自动化测试实例1.定义一个测试类(测试用例)1.1测试类名:被测试类的名字+Test比如UserServiceImplTest1.2测试类的包名:最后以.test结尾比如xxx.xx.test2.测试类中的测试方法2.1test+方法名比如testAdd2.2返回值建议void因为独立运行没有调用返回值没有意义2.3同上没有调用自然也不会有人传参参数建议…

    2022年10月10日
    6
  • 黑苹果怎么安装clover(clover引导教程)

    黑苹果安装教程多逛逛论坛,多攒攒人品,相信人品加技术再有点经验,安装黑苹果并不难(大神说的。。。。)

    2022年4月17日
    59
  • 图像生成与图像处理_matlab中colorbar是什么意思

    图像生成与图像处理_matlab中colorbar是什么意思1colorBar介绍colorBar主要是指一些图像处理中使用的常见纯色或者渐变色条。colorBar用途可作为测试样图来验证某些图像算法的效果,从而避免图像内容或者硬件对图像的干扰,使图像算法

    2022年8月2日
    13
  • SQL数据库学习心得

    SQL数据库学习心得使用润乾报表 需要良好的数据库编写逻辑 一条准确的数据库语言可以帮助你简单高效的完成报表的筛选条件 nbsp SQL 语句中有一个很好用的取字符串函数 SUBSTRING 格式如下 SUBSTRING string start position length 表示从字符串 string 的起始字符位置 start position 开始取字符 取出长度为 length 的字符串 比如 selec

    2026年3月17日
    2
  • keyvaluepair_KeyValuePair用法(转)

    keyvaluepair_KeyValuePair用法(转)C#KeyValuePair的用法。结构体,定义可设置或检索的键/值对。也就是说我们可以通过它记录一个键/值对这样的值。比如我们想定义一个ID(int类型)和Name(string类型)这样的键/值对,那么可以这样使用。//////设置键/值对//////privateKeyValuePairSetKeyValuePair(){intintKey=1;stringstrV…

    2022年7月26日
    10
  • 安装aptitude

    安装aptitudeaptitude 与 apt get 一样 是 Debian 及其衍生系统中功能极其强大的包管理工具 与 apt get 不同的是 aptitude 在处理依赖问题上更佳一些 举例来说 aptitude 在删除一个包时 会同时删除本身所依赖的包 这样 系统中不会残留无用的包 整个系统更为干净在安装 vim 的时候遇到依赖的包比电脑低级的问题用 aptitude 可以实现包的降级 sud

    2026年3月18日
    1

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号