前端性能优化之重绘与回流

最新推荐文章于 2024-08-05 09:56:05 发布
最新推荐文章于 2024-08-05 09:56:05 发布
阅读量403 收藏
点赞数 1
分类专栏： 前端性能优化 文章标签： 前端 性能优化 重绘与回流
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wen81643956/article/details/83142678
版权

回流

    当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)；

    当页面布局和几何属性改变时就需要回流；

重绘

    当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

PS：回流必将引起重绘，而重绘不一定会引起回流。

 

触发页面重布局的属性

 

盒子模型相关属性会触发重布局：

  • width                                    
  • height
  • padding
  • margin
  • display
  • border-width
  • border
  • min-height

    

定位属性及浮动也会触发重布局：

  • top

  • bottom

  • left

  • right

  • position

  • float

  • clear

 

 

改变节点内部文字结构也会触发重布局：

  • text-align

  • overflow-y

  • font-weight

  • overflow

  • font-family

  • line-height

  • vertival-align

  • white-space

  • font-size

 

 

只触发重绘的属性

  • color
  • border-style
  • border-radius
  • visibility
  • text-decoration
  • background
  • background-image
  • background-position
  • background-repeat
  • background-size
  • outline-color
  • ouline
  • outline-style
  • outline-width
  • box-shadow
Noblesse-
关注
专栏目录
前端性能优化——重排重绘
GoodLuck_wu5的博客
07-13 493
重排和重绘 重排：节点信息计算，即根据渲染树计算每个节点的几何信息（大小及位置）。 重绘：渲染绘制，即根据计算好的信息绘制整个页面，渲染出最终的页面。 理论上，每一次的dom更改或者css几何属性更改，都会引起一次浏览器的重排和重绘过程，而如果是css的非几何属性更改，则只会引起重绘过程。重排负责元素的几何属性更新，重绘负责元素的样式更新。 重排一定会引起重绘，而重绘不一定会引起重排。 下面情况会导致重排： （1）页面首次渲染（所以渲染页面至少会有一次重排和重绘) （2）改变字体大小或数量 （3）元素内容.
前端性能优化—回流与重绘
2401_84097696的博客
04-22 923
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。先得哦。**[外链图片转存中…(img-evox60RQ-1713722207644)][外链图片转存中…(img-zWOYoBvw-1713722207644)]
前端进阶版本 ，性能优化—-防抖、节流、重绘与回流。
01-20
下面来介绍一下什么是防抖！        防抖：任务频繁触发的情况下，只有任务触发的间隔超过制定的时间间隔的时候，任务才会被执行。 下面引用一下知乎上的一个例子： 防抖 点我防抖！ [removed] = function() { // 1、获取这个按钮，并绑定事件 var myDebounce = document.getElementById(debounce); myDebounce.addEventListener(click, debounce(sayDebounce)); } // 2、防抖功能
前端性能优化之回流重绘
An滴饭儿的博客
01-17 2200
首先，我们需要先明白一个问题 用户请求的资源到达渲染引擎后如何工作？ 构建DOM树 构建CSSOM树和样式计算 构建渲染树 下面是网上的一张图片，可以很清晰的说明前三步 布局阶段 布局阶段会从渲染树的根节点开始遍历，然后确定每个节点对象在页面上的确切的大小和位置，所有相对的测量值也都会被转换为屏幕内的绝对像素值。 绘制 浏览器主进程将默认的图层（普通文档流的元素）和多个独立图层交给GPU进程，GPU进程再将各个图层合成，最终显示在屏幕上。 哪些元素会独立图层？ <video>
前端性能优化-回流与重绘
最新发布
逍遥的前端笔记
08-05 802
本文总结回流与重绘相关的知识点。
前端的重绘和回流
cx18333的博客
06-09 287
浏览器在生成页面时，会解析html文件生成dom树，然后浏览器主线程会解析css并确定每个dom节点的样式（位置，大小等），在知道dom树和节点样式后，主线程根据遍历dom和计算好的样式，来生成`layout tree`渲染页面(Layout布局)，`重绘和回流都会导致layout重新计算`
前端性能优化--重绘与回流
weixin_33691700的博客
02-26 410
简介 实际案例 说明 performance:性能layers: 图层recalculate style: 重新计算样式paint:重绘layout：回流update layer tree: 更新图层树composite layers: 合并图层 translate代替top top &lt;!DOCTYPE html&gt; ...
前端性能优化与实践.zip
07-23
5. **回流（Reflow）与重绘（Repaint）**："最后一击——回流与重绘"可能讨论了这两者对性能的影响，以及如何通过优化DOM操作来减少不必要的重排和重绘。 6. **事件的节流（throttle）与防抖（debounce）**："事件...
前端性能-重绘和重排（回流）
natsu-cc的博客
06-04 957
前言：
【前端知识之CSS】回流和重绘
weixin_44337386的博客
05-17 538
本系列主要整理前端面试中需要掌握的知识点。本节介绍回流和重绘以及什么时候会触发。
前端性能：浏览器的重绘和回流
yivisir的博客
09-29 226
浏览器的重绘和回流 浏览器渲染机制 浏览器采用流式布局模型 浏览器将HTML解析成DOM树，CSS解析成CSSOM树，将DOM和CSSOM合并成Render树。 有了RenderTree，就需要计算他们在页面上的大小和位置，最后绘制到页面上。 由于浏览器使用流式布局，对Render Tree只需要计算一次布局，但是table元素及其内部元素需要进行多次计算，通常要花3倍同等元素的时间，因此要避免使用table。 重绘 由于结点的几何属性改变或者样式改变而不会影响布局的称为“重绘”。 例如：visibi
一文讲解回流和重绘
a158559681的博客
04-01 242
今天我们为大家介绍一下web前端中涉及到的回流和重绘的概念，先来看一下官方给出的定义： 回流（reflow）：对于DOM结构中的各个元素都有自己的盒子模型,这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow ; 重绘（repaint）：当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了，这个过程称之为repaint。 其实简单的说： 回流
前端浏览器渲染原理---重绘（Repaint）和回流（Reflow）
LuckXinXin的博客
11-14 442
重绘和回流会在我们设置节点样式时频繁出现，同时也会很大程度上影响性能。 重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘 回流是布局或者几何属性需要改变就称为回流。 回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。 以下几个动作可能会导致性能问题： 改变 window 大小 改变字体 添加或删除样式 文字改变 定位或者浮动 盒模型 并且很多人不知道的是，重绘和回流其实也和 Eventloop .
【浏览器】回流与重绘
小秀的博客
08-29 346
回流是指在渲染页面时，由于DOM结构或尺寸的改变，需要重新计算元素的几何属性和页面布局。当发生回流时，浏览器需要重新计算每个受影响元素的位置和尺寸，然后重新绘制整个页面。回流（Reflow）和重绘（Repaint）是浏览器渲染过程中的两个关键概念，它们与修改DOM和CSS相关。虽然这两个过程都是渲染的一部分，但它们的开销和影响是不同的。通过合理优化和设计，可以减少回流和重绘的次数，提高网页的响应速度和用户体验。因此，需要尽量避免频繁的DOM和样式改变，以减少回流的次数。
前端之回流（Reflow）与重绘（Repaint）
qq_44410862的博客
07-21 1061
回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。 重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘。 由此我们可以看出，重绘不一定导致回流，回流一定会导致重绘。硬要比较的
前端渲染过程及重绘回流探究
diqiang1579的博客
09-26 195
记得前几个月小伙伴准备跳槽的时候，建议他可以准备下“从输入URL到页面加载发生了什么”这个前端面试常见问题。结果真的命中了两次。后来仔细思考，中间的确也反应出了很多知识点。如果能把整个过程弄懂，并且熟悉里面的所有知识，也的确能算一个中级前端工程师了。看了下网上的最详细版答案，发现自己主要不明白的地方在于渲染过程这一块。 以前理解的前端渲染（非异步的情况），是...
重绘与回流总结（前端性能优化）
m0_46217225的博客
07-21 581
快速掌握重绘与回流（前端性能优化） 这篇文章非常适合复习，以及面试的小伙伴们 游览器渲染过程如下： 解析html，生成 DOM 树 解析css，生成 CSS 树 合并 DOM 树与 CSS 树，生成渲染树（render tree） 节点布局 页面渲染 重绘与回流 渲染过程解析： 游览器解析html会生成 DOM 树，解析css会生成 CSS 树，然后合并成为一个渲染树（render tree）。 **注意！！**渲染树只会包含可视化节点，比如 script、head、meta、link 这些非可视化
前端优化之回流和重绘
qq_44718039的博客
10-11 944
回流和重绘
前端优化之页面回流与重绘
宇cccc
07-18 521
近日有一朋友去面试,遇到如下一道题目,要给一个dom元素循环添加一组dom元素,要放在循环内还是循环外, 代码如下:let div = document.getElementById('div') div.forEach(item=>{ // 循环给div append添加dom或者其他 }) // 一次append相信绝多数fe都知道要放在循环外 问: 为什么？ 答：因为
前端性能优化：回流与重绘深度解析
本文档主要介绍了前端性能优化中的关键概念——回流（Reflow）与重绘（Repaint），以及它们在前端开发中的重要性。作者强调性能优化是前端工程师必备的技能，它涵盖了理论知识和实践经验，而且这两者是相辅相成的。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值