回流（Reflow）和重绘（Repaint）

最新推荐文章于 2024-07-22 15:19:55 发布
最新推荐文章于 2024-07-22 15:19:55 发布
阅读量429 收藏 1
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010392459/article/details/130384954
版权
通过构造渲染树将可见DOM节点以及它对应的样式结合起来，然后计算他们在设备视口内的确切位置和大小，这个计算的阶段就是回流。通过构造渲染树和回流阶段计算的可见节点的位置和大小，将渲染树上的每个节点转换成屏幕上的实际像素，这个阶段叫做重绘。
摘要由CSDN通过智能技术生成

目录

浏览器渲染过程：

什么是回流？(reflow)

什么是重绘?（repaint）

何时发生重绘和回流？

当页面布局和几何信息发生变化的时候，就需要回流：

减少重绘和回流的办法

浏览器渲染过程：

  • 解析HTML，生成DOM树，解析CSS，生成CSSDOM树
  • 将DOM树和CSSDOM树结合，生成渲染树(Render Tree)
  • Reflow(回流)：根据生成的渲染树，得到节点的几何信息（位置，大小）
  • Painting(重绘)：根据渲染树以及回流得到的几何信息，得到节点的绝对像素
  • Display：将像素发送给GPU，展示在页面上。

什么是回流？(reflow)

通过构造渲染树将可见DOM节点以及它对应的样式结合起来，然后计算他们在设备视口内的确切位置和大小，这个计算的阶段就是回流。

什么是重绘?（repaint）

通过构造渲染树和回流阶段计算的可见节点的位置和大小，将渲染树上的每个节点转换成屏幕上的实际像素，这个阶段叫做重绘。

何时发生重绘和回流？

最低0.47元/天 解锁文章
稳稳的前进
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
重绘（Repaint）和回流（Reflow）
糖长老莫小贝的博客
01-08 233
首先加载dom结构形成dom树–>然后加载css–>dom树和css结合形成render树 -->渲染页面 当改变样式（不改变大小）的时候，从render树开始重新开始渲染页面，这就是重绘当改变dom结构的时候，会从dom树开始从新渲染页面。重排(回流)和重绘都会影响性能。 概念 重绘：当节点需要更改外观而不会影响布局的，比如改变 color、background-color、visibility等就叫称为重绘 回流：布局或者几何属性需要改变 就称为回流。 PS：回流必定会发生重绘，重.
回流Reflow和重绘Repaint
weixin_45766034的博客
10-09 124
在了解回流和重绘之前，我们先来了解一下浏览器是如何进行解析的 我将它归纳为四个步骤： 解析html(或者是js通过createElement)生成DOM树 解析css，绘制上面是DOM树（注意！此时还未挂载到浏览器上） 将DOM树挂载在浏览器上，计算各个DOM具体点的坐标，以及布局和大小（回流） 在浏览器上绘制已经生成的DOM树（重绘） 回流的成本比重绘的成本高很多很多！！！ 一个节点的重流，可能会导致子节点或者父节点以及同级节点的重流 如果电脑低的话 会造成卡顿和更耗电 那说到现在，我们该
回流reflow和重绘repaint
奥特打小怪的博客
06-01 549
Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验　　简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：　　1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；　　2. 浏览器开始载入html代码，发现标签内有一个标签引用外部CS
reflow(回流)和repaint(重绘)
qq_44738313的博客
07-01 1243
reflow(回流)和repaint(重绘)的个人理解以及参考文案的理解
如何减少浏览器的reflow和repaint
09-03
`reflow`（回流）和`repaint`（重绘）是浏览器在更新页面布局和视觉表现时的两个关键过程。理解并有效地减少这两者的发生，能够显著提升网页加载速度和交互响应。以下是一些基于项目经验的策略来降低`reflow`和`...
有关javascript的性能优化 (repaint和reflow)
10-27
本文将深入探讨两个关键概念：repaint（重绘）和reflow（渲染），以及如何通过理解它们的工作原理来提升JavaScript的执行效率。 **Repaint（重绘）**是指当一个元素的外观发生变化，但其在页面布局中的位置并未改变...
渲染篇 5：最后一击——回流（Reflow）与重绘（Repaint）(1).md
04-01
至少当我确定自己的研发方向、并接到第一个性能优化任务时，我做的第一件事是向搜索引擎求助，第二件事是买书，然后开始了摸着石头过河，前后花费了大量的时间和精力。我深感性能优化实在是前端知识树中特别的一环...
sisterAn#blog#浏览器的重绘与回流（Repaint、Reflow）1
07-25
1. 浏览器渲染机制 2. 重绘 3. 回流 4. 浏览器优化 5. 减少重绘与回流
python爬虫基础——Webbot库介绍
最新发布
qq_56262770的博客
07-22 668
Webbot是一个专为Python设计的库，用于简化网页自动化任务。它基于Selenium WebDriver，提供了一系列高级接口，使自动化任务更加直观和易于管理。Webbot库的设计理念是将复杂的网页交互抽象为简单的API调用，从而减少开发者在编写自动化脚本时的工作量。Webbot库的核心功能包括自动化表单填写、点击操作、数据抓取等，同时支持处理JavaScript渲染的页面和模拟用户行为。这些功能使得Webbot库成为自动化测试、数据收集和网页监控等领域的理想选择。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 895
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1822
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 547
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
前端性能优化--懒加载
weixin_43799793的博客
07-19 183
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
[web]-反序列化-绕过__wakeup(转)
mails2008的专栏
07-18 402
终点：很直接是echo $flag,在__destruct中，username==='admin' 和 password==100。反序列化过程中发现起点在终点之前调用，反而是捣乱的，那我们就不需要自动执行__wakeup，绕过的方法，设置的字段数量比实际字段大的值。其实简单的很简单，难得也很难，慢慢学习就好，没必要焦虑，觉得很难，纯粹一个兴趣爱好就行。起点：_wakeup函数中是$this->username='guest',是给赋值；按照常规思路，寻找起点、终点、跳板。
谷粒商城实战笔记-35-前端基础-ES6-模块化
epitomizelu的专栏
07-20 513
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
Web Pages 表单
07-20 294
Web pages 表单是现代网页设计中不可或缺的组成部分，它们允许用户与网站进行交互，提交信息，如注册、登录、反馈、预订等。表单的设计和功能对用户体验和网站的业务目标有着直接的影响。本文将深入探讨Web pages表单的各个方面，包括设计原则、常用元素、验证机制和最佳实践。
前端小项目-强调鼠标悬停时效果的名片
关注收藏，可以私信解决问题！
07-19 1068
在学习完HTML和CSS之后，我们就可以开始做一些小项目了。本篇文章所讲的小项目为——动态效果名片。通过这个项目，你将学会如何使用HTML和CSS来创建一个具有动态效果的名片。
web前端 React 框架面试200题（三）
柯晓楠
07-21 426
纯组件是可以编写的最简单和最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用程序的性能。Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性在JSX表达式中，一个开始标签(比如)和一个关闭标签(比如)之间的内容会作为一个特殊的属性props.children被自动传递给包含着它的组件。
css重绘和重排（回流）
09-14
重绘（Repaint）指的是当元素的样式发生变化，但不影响其布局时，浏览器会将新样式应用到元素上，重新绘制元素的外观。重绘的开销相对较小，不会引起布局的变化。 而重排（Reflow）指的是当页面布局发生变化时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值