2025年重绘和重排和回流(重绘 回流 重排)

重绘和重排和回流(重绘 回流 重排)1 浏览器是如何进行界面渲染的 1 解析 Parser HTML 生成 DOM 树 DOM Tree 2 同时解析 Parser CSS 生成样式规则 Style Rules 3 根据 DOM 树和样式规则 生成渲染树 Render Tree 4 进行布局 Layout 回流 重排 根据生成的渲染树 得到节点的几何信息 位置 大小 5 进行绘制 Painting 重绘

大家好,我是讯享网,很高兴认识大家。



 

1.浏览器是如何进行界面渲染的

        1.解析(Parser)HTML,生成DOM树(DOM Tree)

        2.同时解析(Parser)CSS,生成样式规则(Style Rules)

        3.根据DOM树和样式规则,生成渲染树(Render Tree)

        4.进行布局Layout(回流/重排):根据生成的渲染树,得到节点的几何信息(位置,大小)

        5.进行绘制 Painting(重绘):根据计算和获取的信息进行整个页面的绘制

        6.Display:展示在页面上


讯享网

2.回流(重排)

        当 Render Tree 中部分或者全部元素 尺寸、结构、布局等发生改变时,浏览器就会重新渲染部分或全部文档的过程 称为 回流

3.重绘

        由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如:color、background-color、outline等),称为重绘

重绘不一定引起回流,而回流一定会引起重绘。

4.会导致回流(重排)的操作

        1.页面的首次刷新

        2.浏览器的窗口大小发生改变

        3.元素的大小或位置发生改变

        4.改变字体的大小

        5.内容的变化(如:input框的输入,图片的大小)

        6.激活css伪类(如: :hover)

        7.脚本操作DOM (添加或删除可见的DOM元素)

简单理解 影响到布局了,就会有回流

小讯
上一篇 2025-05-27 09:11
下一篇 2025-04-21 12:09

相关推荐

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