浏览器的回流和重绘（Reflow&&Repaint）

最新推荐文章于 2024-02-06 10:00:00 发布
最新推荐文章于 2024-02-06 10:00:00 发布
阅读量1k 收藏
点赞数
分类专栏： 学习笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46186102/article/details/123771872
版权 
回流一定会引起重绘，重绘不一定引起回流

回流：页面的部分内容或者全部内容重新渲染

重绘：对元素的样式进行改变

会导致回流的操作

  1. 页面首次渲染
  2. 元素内容改变
  3. 字体大小改变
  4. 激活CSS伪类
  5. 添加删除DOM元素

如何避免回流

CSS

  • 尽量不使用table布局
  • 避免使用CSS表达式

JavaScript

  • 避免频繁操作样式
  • 避免频繁操作DOM
  • 给元素设置display
  • 避免频繁读取

总结

一切引起元素位置改变的行为都会引起回流

不会引起元素位置发生改变的行为称为重绘

乐乐好痛苦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何减少浏览器的reflow和repaint
09-03
本文主要是结合自己的一些项目经验，给大家提出了几点减少浏览器reflow和repaint的方法和注意事项，希望对大家能有所帮助。
浏览器的回流与重绘 (Reflow & Repaint)
zxl1990_ok的博客
11-16 1270
页面生成的过程： HTML 被 HTML 解析器解析成 DOM 树； CSS 被 CSS 解析器解析成 CSSOM 树； 结合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)，这一过程称为 Attachment； 再执行 Reflow，根据 Render Tree 计算每个可见元素的布局（几何属性） 执行 Repaint，通过绘制流程，将每个像素渲染到屏幕上 注意： Render Tree 只包含渲染网页所需要的节点； Reflow 过程是布局计算每个对象的精确位置和大
浏览器回流与重绘
天书笔记
02-12 1719
回流必定会发生重绘，重绘不一定会引发回流。重绘和回流会在我们设置节点样式时频繁出现，同时也会很大程度上影响性能。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。根据改变的范围和程度，渲染树中或多或少的部分节点需要重新计算，有些改变还会触发整个页面的重排。
浏览器的回流和重绘（Reflow & Repaint）
qq_42582773的博客
03-07 812
浏览器的回流和重绘
什么是回流和重绘？他们的区别是什么？
weixin_40381947的博客
04-07 786
对于DOM结构中的各个元素都有自己的盒子模型,这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了，这个过程称之为repaint。
浏览器的回流与重绘
weixin_46422035的博客
07-12 681
关于浏览器的回流与重绘你了解吗？对于重绘的顺序是怎样的？一起了解一下吧~
sisterAn#blog#浏览器的重绘与回流（Repaint、Reflow）1
07-25
1. 浏览器渲染机制 2. 重绘 3. 回流 4. 浏览器优化 5. 减少重绘与回流
有关javascript的性能优化 (repaint和reflow)
10-27
本篇文章，小编将为大家介绍，有关javascript的性能优化(repaint和reflow)，有需要的朋友可以参考一下
JavaScript中的Repaint和Reflow用法详解
10-23
主要介绍了JavaScript中的Repaint和Reflow用法详解,是JS入门学习中的基础知识,需要的朋友可以参考下
回流跟重绘到底是什么？（一篇详细的给你讲清楚）
最新发布
贫僧法号依平
02-06 2042
几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来。在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变。），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘。Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）当你获取布局信息的操作的时候，会强制队列刷新，包括前面讲到的。
浏览器-回流与重绘
KAMHUNCHAN的博客
01-26 1828
浏览器-回流与重绘 浏览器的渲染过程 从上面这个图上，我们可以看到，浏览器渲染过程如下： 解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小） Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素 生成渲染树 为了构建渲染树，浏览器主要完成了以下工作： 从DOM树的根节点开始遍历每个可见节点。 对于每个可见的节
浏览器：重绘（repaint）与回流/重排（reflow）
snowball的博客
11-06 1966
3.1、理解回流/重排当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。回流：是布局或者几何属性需要改变就称为回流。
浏览器的回流和重绘
热爱前端的大三在校生
05-16 363
回流和重绘可以说是每一个web开发者都经常听到的两个词语，可是可能有很多人不是很清楚这两步具体做了什么事情。本文将带你从零开始理解回流与重绘的概念和区别
前端面试题 | 什么是回流和重绘？它们的区别是什么？
weixin_48491416的博客
03-13 9807
在了解回流和重绘之前我们可以先简单了解一下浏览器的渲染过程~ 1. 解析获取到的HTML，生成DOM树，解析CSS，生成CSSOM树 2. 将DOM树和CSSOM树进行结合，生成渲染树（render tree） 3.根据生成的渲染树，进行回流（Layout）,得到节点的几何信息（位置，大小） 4.重绘（Painting）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素（像素，背景色，外观等） 5.Displa...
【浏览器的回流与重绘 (Reflow & Repaint)】
qq_40992225的博客
07-28 421
当页面中元素样式的改变并不影响它在文档流中的位置时（例如color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。当RenderTree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。4、当你Resize窗口的时候（移动端没有这个问题，因为移动端的缩放没有影响布局视口)1、当你增加、删除、修改DOM结点时，会导致Reflow,Repaint。5、当你修改网页的默认字体时。...
什么是浏览器的回流和重绘？
Dayunyun2019的博客
03-10 361
先上个流程图（网上找的） HTML——>HTML Parser ——>DOM Tree ——> Style Sheets——>CSS Parser——>Style Rules——> Attachment——>Render Tree——>painting——>display 具体步骤： 1.解析HTML，构建DOM数； 2.解析CSS，生成样式规则； 3.合并DOM数和样式规则，生成渲染树； 4.布局render Tree(layout r
浏览器渲染过程、回流、重绘简介
风动之石的专栏
12-18 3283
谷歌 Web 开发最佳实践手册（4.1.1）：创建对象模型     http://blog.jobbole.com/68018/ 谷歌 Web 开发最佳实践手册（4.1.2）：渲染树结构、布局和绘制    http://blog.jobbole.com/68208/ 谷歌 Web 开发最佳实践手册（4.1.3）：阻塞渲染的CSS    http://blog.jobbole.com/68253
页面的回流(reflow)和重绘(repaintd)
weixin_42011096的博客
04-17 490
1.首先需要了解的是页面渲染过程(如下图所示):2.回流和重绘的概念:回流:浏览器重新构建render tree的过程重绘:浏览器根据render tree重新绘制界面的过程3.引起回流的操作当改变界面已有元素的位置,大小(width,height,border,padding,margin,content),或者新添加元素的时候,都会引起回流;每个页面至少有一次回流,也就是页面刚开始加载的时候4...
在js中什么是重绘和回流
07-22
在 JavaScript 中，重绘（repaint）和回流（reflow）是与浏览器渲染相关的两个概念。 重绘指的是当元素样式发生改变，但不影响其布局时，浏览器会根据新的样式重新绘制这个元素的过程。重绘并不会引起页面的重新...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值