什么是回流与重绘 (Reflow & Repaint)

最新推荐文章于 2022-07-09 14:05:53 发布
最新推荐文章于 2022-07-09 14:05:53 发布
阅读量552 收藏 1
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33551792/article/details/111387201
版权
本文介绍了浏览器的渲染机制，重点关注回流（Reflow）和重绘（Repaint）。回流发生在元素尺寸、位置或内容变化时，浏览器需要重新计算布局并可能影响到其他元素。重绘则仅涉及样式变化，不改变布局。回流成本高于重绘，浏览器通过队列优化绘制。避免两者的方法包括减少DOM操作、使用绝对定位、一次性修改样式等。
摘要由CSDN通过智能技术生成

写在前面

在讨论今天的主角之前，我们要先了解一下浏览器的渲染机制。以Google,Firefox,Safari为例，Firefox 使用Geoko——Mozilla 自主研发的渲染引擎，Safari 和Chrome 都使用 webkit。

我们主要以 Webkit的主流程为例

  • 浏览器使用流式布局模型 (Flow Based Layout)
  • 解析HTML 生成 DOM 树
  • 解析CSS 生成CSSOM 规则树
  • 将 DOM 树与 CSSOM 规则树合并在一起生成渲染树Render Tree
  • 根据渲染树遍历拿到每个节点开始布局，计算每个节点的位置大小信息
  • 将渲染树每个节点绘制到屏幕

回流（Reflow）

上面我们知道，我们会根据 Render Tree 去遍历渲染，所以当我们的节点发生改变时，浏览器重新渲染部分节点或者全部文档，我们称这个过程为回流

大致整理会导致回流的一些操作

  • 页面首次渲染
  • 浏览器窗口大小发生改变
  • 元素尺寸或位置发生改变
  • 元素内容变化（文字数量或图片大小等等）
  • 元素字体大小变化
  • 添加或者删除可见的DOM元素
  • 激活CSS伪类（例如：
最低0.47元/天 解锁文章
w候人兮猗
关注
专栏目录
什么是回流，什么是重绘，有什么区别？
a577473253的博客
09-11 765
文章目录html 加载时发生了什么什么是回流什么是重绘区别扩展：浏览器的帮忙自己的优化 html 加载时发生了什么 在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体 DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree，但区别很大，因为render tree能识别样式，rend
回流与重绘
chanda_yang的博客
09-02 2199
回流与重绘 1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。 2. 当render tree中的一些元素需要
回流和重绘
WHY_222的博客
05-29 390
在学习前端如何优化网站性能时将减少重排（reflow）也就是回流（下面都写为回流）作为一种方法， 于是想把回流和重绘的区别记录下来 回流：render树中元素的规模尺寸，布局，隐藏改变需重新构建，称为回流，每个页面至少一次回流，就是在页面第一次加载的时候。 重绘：回流时，浏览器会使渲染树中受影响的部分失效，重新构造这部分渲染树，完成回流，浏览器会重新绘制受影响的部分到屏幕上，改过程为重绘。 注意：...
什么是回流和重绘
Joker.M的博客
07-23 2008
什么是回流和重绘 当渲染树中的一部分或者全部因为元素的尺寸、布局、隐藏等改变而需要重新构建的时候，这时候就会发生回流。 每个页面都至少发生一次回流，也就是页面第一次加载的时候。 在回流的时候，浏览器会使渲染树中受到影响的元素部分失效，并重新绘制这个部分的渲染树，完成回流以后，浏览器会重新绘制受到影响的部分元素到屏幕中，这个过程就是重绘。 什么时候会发生回流？ 1、添加或者删除可见的DOM...
什么是重绘与回流？
热门推荐
m0_64547652的博客
07-09 1万+
简单来说就是重新绘画，当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，就会重新渲染页面，这就是重绘。当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树然后再次进行渲染，这就是回流。1.多个属性尽量使用简写，例如：boder可以代替boder-width、boder-color、boder-style 2.创建多个dom节点时，使用documentfragment创建 3.避免使用table布局 4.避免设置多层内联样式，避免节点层级过多 5.避免
回流（Reflow）与重绘（Repaint）
连通块的应用
12-02 689
1. 回流与重绘 1）回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时， 浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响）， 然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。 2）重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时， 浏览器不需重新计算元素的几何属...
减少页面回流与重绘（Reflow & Repaint）
分享技术，共建开放平台
08-31 4866
如果你的HTML变得很大很复杂，那么影响你JavaScript性能的可能并不是JavaScript代码的复杂度，而是页面的回流和重绘。 回流（Reflow）是指布局引擎为frame计算图形的过程。 frame是一个矩形，拥有宽高和相对父容器的偏移。frame用来显示盒模型（content model）， 但一个content model可能会显示为多个frame，比如换行的文本每行都会显示为
CSS回流（Reflow）与重绘（Repaint）
qq_48113035的博客
03-07 1394
1.
渲染篇 5：最后一击——回流（Reflow）与重绘（Repaint）(1).md
最新发布
04-01
在前端性能优化的领域中，回流（Reflow）与重绘（Repaint）是非常关键的概念。它们是浏览器渲染过程中最常见、也最影响性能的两个步骤。为了深入理解这两个概念，我们首先需要了解浏览器的渲染流程。 在用户通过...
sisterAn#blog#浏览器的重绘与回流（Repaint、Reflow）1
07-25
1. 浏览器渲染机制 2. 重绘 3. 回流 4. 浏览器优化 5. 减少重绘与回流
什么是回流和重绘？
m0_59070120的博客
12-07 107
回流：（改变大小和布局） 当渲染树中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建的过程叫回流（改变大小、布局） 重绘：（改变样式） 当渲染树中的一部分元素需要更新属性，如改变元素的外观、风格，而不影响布局的重新渲染的过程叫重绘（改变样式） ...
什么是重绘与回流，二者之间的关系是？
weixin_44269229的博客
03-23 883
1、什么是重绘、回流 重绘(repaint)：当元素样式改变而不影响元素在页面中的位置时，浏览器对元素进行更新这就是重绘； 回流(reflow)：当元素样式改变而影响到其在页面中的位置和大小时，浏览器将对页面重新计算渲染树，这就是回流 二者之间的关系：发生回流一定会触发重绘，但是触发重绘不一定会发生回流； 举个简单的例子： 因为元素的颜色的改变会导致元素的样式改变此时就触发了重绘，但是其并没有影响其在页面的位置和大小所以就没有触发回流； 但是元素通过定位或者改变大小导致样式的改变此时即符合重绘的定义也符合回
什么是回流,重绘，他们之间有什么区别？
weixin_46379044的博客
07-10 450
什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。 什么是重绘 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，
重绘和回流
qq_36262295的博客
11-11 144
html 加载时发生了什么 在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树， DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体 DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree，但区别很大，因为render tree能识别样式，render tree中每个NODE都有自己的style，而且render tree不包含隐藏的
回流VS重绘
weixin_34414196的博客
08-14 59
回流（Reflow）重绘（Repaint） 从最初接触css和html的时候，就听说过回流和重绘，当时只是简单的知道一个是尺寸位置等变化引起，另一个是因为外观样式变化引起，并没有做深入的考究，究竟哪些情况会引起重绘，哪些情况会引起回流，没有做过详细的总结，今天我们就来一起复习总结一下。 一、概念 首先我们来回顾一下浏览器渲染页面的流程 渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式...
什么是回流和重绘-小白专享
m0_46370471的博客
07-10 415
说简单的人话，能听懂的： 重绘：就是当页面上的宽高，布局，显示或者隐藏没有改变，但是颜色啊什么的元素风格发生改变就是重绘。 回流:就是页面上的宽高布局等基本骨架发生改变的时候就叫做回流。 定义概念： 重绘不一定会触发回流，而回流一定会触发重绘。 那是不是可以这样想，重绘就只改变外观风格，而不改变骨架，所以就对优化渲染要好一点，而回流改变基本骨架和外观风格，就会对优化渲染不太友好，所以要尽量避免回流。 如何避免回流呢： 1不要使用table 布局，因为table 的每一个行甚至每一个单元格的样式更新都会导
理解Web性能：页面呈现、重绘与回流
这个过程通常涉及到三个关键步骤：DOM树构建、样式计算和渲染树生成，以及后续的回流（Reflow）和重绘（Repaint）。 首先，浏览器接收到HTML文档后，会将其解析成一个DOM（Document Object Model）树。DOM树是HTML...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值