关于重绘、重排和回流

最新推荐文章于 2023-02-20 22:07:24 发布
最新推荐文章于 2023-02-20 22:07:24 发布
阅读量759 收藏 3
点赞数 1
分类专栏： JavaScript 文章标签： 前端 javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43183219/article/details/122396331
版权
本文介绍了浏览器的渲染机制，包括DOM树构建、渲染树建立、布局与绘制过程。详细讨论了重绘和重排的概念，它们在元素几何属性和外观属性改变时触发。文章还提供了优化重排和重绘的策略，如集中样式改变、DOM离线化、批量添加DOM、脱离文档流以及缓存布局，以减少性能开销。
摘要由CSDN通过智能技术生成

1.浏览器的渲染机制

1.1浏览器的运行机制

  • 构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node，包括js生成的标签，生成内容树（Content Tree/DOM Tree）
  • 构建渲染树（construct）：解析对应的CSS样式文件信息，包括js生成的样式和外部css文件，而这些文件信息以及HTML中可见的指令，构建渲染树（Rendering Tree/Frame Tree）；
  • 布局渲染树（reflow/layout）：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标；
  • 绘制渲染树（paint/repaint）：遍历渲染树，使用UI后端层来绘制每个节点。

1.2渲染引擎工作原理

在这里插入图片描述

1.3 WebKit工作原理

在这里插入图片描述

2.什么是重绘和重排

重排：当DOM的

最低0.47元/天 解锁文章
.慢慢亦漫漫
关注
专栏目录
重绘和重排
qq_20544669的博客
05-29 1760
  浏览器下载完页面中所有的组件——html标记、js、css、图片，之后就会解析并生成两个内部数据结构：DOM表示页面结构、渲染树表示DOM节点如何显示。   DOM树中每一个需要显示的节点在渲染树中至少存在一个对应的节点（隐藏的元素在渲染树中没有对应的节点）。一旦DOM和渲染树构建完成。浏览器开始绘制页面元素。   当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框宽度或给段落增...
重绘和重拍
sinat_24496253的博客
04-11 1078
1.什么是重绘和重排 重排：若渲染树的一部分更新，且尺寸变化，就会发生重排； 重绘：部分节点需要更新，但不改变其他集合形状。如改变某个元素的颜色，就会发生重绘。 2.重绘和重排何时会发生： （1）增加或删除DOM节点； （2）display:none（重排并重绘）；visibility:hidden（重排）； （3）移动页面中的元素； （4）增加或修改样式
css重绘与重排的方法
09-27
主要介绍了css重绘与重排的方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
重绘与重排(回流)
yf18040578780的博客
05-16 3515
一、重绘不一定需要重排，重排必然会导致重绘。 回流会导致渲染树需要重新计算，开销比重绘大，所以我们要尽量避免回流的产生 重排：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。 页面第一次渲染 在页面发生首次渲染的时候，所有组件都要进行首次布局，这是开销最大的一次回流。 浏览器窗口尺寸改变 元素位置和尺寸发生改变的时候 新增和删除可见元素 内容发生改变（文字数量或图片大小等等） 元素字体大小变化。 激活CSS伪类（例如：:hove
什么是重排和重绘
YuChangBin99的博客
08-08 3060
什么是重排和重绘
重排(reflow) & 重绘(repaint)
sxm666666的博客
04-27 1274
在页面的生命周期中：至少会发生一次渲染，在用户访问的过程中，还会不断的触发重排(reflow)重绘(repaint) 重绘和重排都会影响性能，尤其是重排，会使我们付出高昂的性能代价。 页面生成的过程（浏览器的渲染机制） 浏览器采用流式布局模型（Flow Based Layout） HTML被HTML解析器解析成DOM Tree CSS被CSS解析器解析成CSSOM Tree 结合DOM树和CSSOM树，生成一棵渲染树（Render Tree） 生成布局(flow),浏览器在屏幕上画出渲染树中的所有节点 计
重排(回流)和重绘
weixin_42679876的博客
08-02 998
重排(回流)和重绘
前端性能-重绘和重排（回流）
natsu-cc的博客
06-04 955
前言：
回流(重排/重构)和重绘
weixin_45392559的博客
03-22 639
知识普及： 浏览器会把获取到的HTML解析成一个 DOM tree； 浏览器会把所有样式解析成样式结构体； DOM tree (树) 和样式结构体组合后构建成 render tree; 一旦render tree构建完毕后，浏览器就可以根据render tree来绘制页面了； 回流：当render中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流（reflow）;每个页面至少需要一次回流，就是在页面第一次加载的时候。 回流过程：在回流的时候，浏览器会是渲染
【CSS】回流/重排与重绘
qq_43057018的博客
08-08 1042
现代的浏览器都是很聪明的，由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，：将元素的透明度设置为 0，以此来实现元素的隐藏。：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。：元素在页面中仍占据空间，但是不会响应绑定的监听事件。.
什么是重绘重排？
sweet_12312的博客
02-10 2515
通俗点说，重绘就是改变某个节点的样式，重排就是增加或者删掉某些节点 所以说，重绘不一定会引起重排，但是重排一定会引起重绘。 也就是你写了一个html+css，重绘就是修改一下颜色，字体大小，背景等等；但是重排的话，就会在你原来的结构上，又增加了一个东西，把你的写的东西全打乱了，所以你需要重绘，把结构重新排版。 引起重排的原因： 1）添加、删除可见的dom 2）元素的位置改变 3）元素的尺寸改变（外边距、内边距、边框厚度、宽高等几何属性） 4）页面渲染初始化 5）浏览器窗口尺寸改变
重绘和回流（重排）是什么，如何避免？
笑望灬星辰
04-08 522
重绘和回流（重排）是什么，如何避免？ DOM的变化影响到了元素的⼏何属性（宽⾼），浏览器重新计算元素的⼏何属性，其他元素的⼏何 属性和位置也会受到影响，浏览器需要重新构造渲染树，这个过程称为重排，浏览器将受 到影响的部分 重新绘制到屏幕上的过程称为重绘。引起重排的原因有 1. 添加或者删除可⻅的DOM元素 2. 元素位置、尺⼨、内容改变 3. 浏览器⻚⾯初始化 4. 浏览器窗⼝尺⼨改变，重排⼀定重绘，重绘不⼀定重排 减少重绘和重排的方法 1. 不在布局信息改变时做 DOM 查询 2.
2021-05-25
yyhjiulaikankan的博客
05-25 1935
HTML面试题总结2 1.属于HTML5标签语意化的元素有 (AD) A.article、footer B.block C.section、banner D.header、nav 解释：html5手册语义化标签：article、section、aside、hgroup、header、 footer、nav、time、mark、figure、figcaption、contextmenu+menu 2.下面有关html结构正确的有（ ABC ） A.<ul><li></li&g
重绘与重排
m0_61696809的博客
02-20 920
重绘（Repaint）和重排（Reflow）的相关性，以及我们应该如何应对
什么是重绘和重排？
卿本无忧的博客
06-24 9714
什么是重排和重绘
重排（reflow）& 重绘（repaint）
DepressedPrince的博客
02-28 537
什么是重排和重绘？ 重排（重构/回流/reflow）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏显示等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。 重绘（repaint）：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些元素都按照各自的属性绘制一遍，将内容呈现在页面上。重绘是指一个元...
前端知识点分析——重排和重绘
sophia_little的博客
03-19 9879
1.document.write和innerHTML的区别document.write重排整个页面 innerHTML可以重绘页面的一部分2.浏览器运行机制1、构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；2、构建渲染树（construct）：解析对应的CSS样式文...
css重绘和重排（回流）
最新发布
09-14
重绘和重排是CSS渲染过程中的两个重要概念。 重绘（Repaint）指的是当元素的样式发生变化，但不影响其布局时，浏览器会将新样式应用到元素上，重新绘制元素的外观。重绘的开销相对较小，不会引起布局的变化。 而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值