重绘和回流的区别

重绘和回流的区别1 回流 元素的大小或者位置发生改变 当页面布局发生改变的时候 触发了重新布局导致渲染树重新计算布局和渲染 如添加或删除可见的 DOM 元素 元素的位置发生变化 元素的尺寸发生变化 内容发生变化 如文本变化或图片被另一个不同尺寸的图片所代替 页面一开始渲染的时候 无法避免 因为回流是根据视口大小来计算元素的位置和大小的 所以浏览器窗口尺寸变化也会引起回流 2 重绘 只改变自身样式 不会影响到其他元素元素样式的改变 但宽高 大小 位置不变 eg visibility color

1、回流:元素的大小或者位置发生改变(当页面布局发生改变的时候),触发了重新布局导致渲染树重新计算布局和渲染

​如添加或删除可见的DOM元素; 元素的位置发生变化; 元素的尺寸发生变化、 内容发生变化(如文本变化或图片被另一个不同尺寸的图片所代替); 页面一开始渲染的时候(无法避免); 

​ 因为回流是根据视口大小来计算元素的位置和大小的,所以浏览器窗口尺寸变化也会引起回流

2、重绘:只改变自身样式,不会影响到其他元素

元素样式的改变(但宽高、大小、位置不变) eg: visibility、color、background-color等 

注意:回流一定会触发重绘,而重绘不一定会回流

优化:限制回流和重绘的范围
在这里插入图片描述

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

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

(0)
上一篇 2026年3月20日 下午12:38
下一篇 2026年3月20日 下午12:38


相关推荐

发表回复

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

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