说说回流和重绘

最新推荐文章于 2024-02-06 10:00:00 发布
最新推荐文章于 2024-02-06 10:00:00 发布
阅读量152 收藏
点赞数
分类专栏： 前端面试 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/welnee/article/details/109196327
版权

详见：重绘和重排

如何减少回流和重绘？

  • 使用 transform 替代 top
  • 使用 visibility 替换 display: none。因为前者只会引起重绘，后者会引发回流（改变了布局）
  • 不要把节点的属性值放在一个循环里当成循环里的变量
  • 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
  • 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用requestAnimationFrame
  • CSS 选择符从右往左匹配查找，避免节点层级过多
welnee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
回流和重绘
Isshark的博客
03-29 522
回流（重构/重排/reflow） DOM树和CSSOM树结合后的渲染树后，将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。 重绘（repaint或redraw） 通过构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换...
一文教会你何为重绘、回流？
热门推荐
官方推荐
04-08 4万+
文章目录css图层图层创建的条件重绘(Repaint)回流触发重绘的属性触发回流的属性常见的触发回流的操作优化方案requestAnimationFrame----请求动画帧写在最后 css图层 浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。 也就是我们各种各样的Dom标签 在渲染DOM的时候，浏览器所做的工作实际上是： 1. 获取DOM后分割为多个图层 2. 对每个图层的节点计算样式结果 （Recalculate style–样式重计算） 3. 为每个节点生
页面的回流与重绘
主要领域：前端开发
05-16 5739
页面呈现的具体过程 Step1 浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个tag都是DOM树中的1个节点，根节点就是我们常用的document对象。 DOM树里包含了所有HTML标签，包括使用了display:none隐藏的元素，还有用JS动态添加的元素等。 Step2 浏览器把所有样式（用户定义的CSS和用户代理）解析成样式结构体（CSSOM树），在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而FF会去掉_开头的样式。 Step3 DOM树和样式结构体（
什么是重绘与回流？
m0_64547652的博客
07-09 1万+
简单来说就是重新绘画，当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，就会重新渲染页面，这就是重绘。当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树然后再次进行渲染，这就是回流。1.多个属性尽量使用简写，例如：boder可以代替boder-width、boder-color、boder-style 2.创建多个dom节点时，使用documentfragment创建 3.避免使用table布局 4.避免设置多层内联样式，避免节点层级过多 5.避免
回流跟重绘到底是什么？（一篇详细的给你讲清楚）
贫僧法号依平
02-06 2909
几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来。在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变。），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘。Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）当你获取布局信息的操作的时候，会强制队列刷新，包括前面讲到的。
HTML中的重绘与回流
01-08
在认识重绘和回流之前，我们先认识一下一个页面加载的时候，会发生什么？ 　页面加载时，生成一个DOM树，DOM Tree里包含了构成页面所有的标签。Style Sheets（CSS样式表）会生成一个Style Rules。当DOM Tree和Style ...
HTML回流和重绘.md
最新发布
06-13
HTML回流和重绘
高性能WEB开发 页面呈现、重绘、回流。
10-29
在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。
浏览器的重绘与回流
07-20
理解重绘与回流对浏览器渲染效率的影响的PPT。用于知识分享
前端进阶版本 ，性能优化—-防抖、节流、重绘与回流。
01-20
同时，理解浏览器的重绘（Repaint）和回流（Reflow）机制也是前端开发中的重要知识点，它们直接影响页面渲染的效率。 防抖技术的核心思想是在一定时间内，如果一个任务被连续触发，那么只有最后一次触发的任务会在...
前端面试题 | 什么是回流和重绘？它们的区别是什么？
weixin_48491416的博客
03-13 1万+
在了解回流和重绘之前我们可以先简单了解一下浏览器的渲染过程~ 1. 解析获取到的HTML，生成DOM树，解析CSS，生成CSSOM树 2. 将DOM树和CSSOM树进行结合，生成渲染树（render tree） 3.根据生成的渲染树，进行回流（Layout）,得到节点的几何信息（位置，大小） 4.重绘（Painting）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素（像素，背景色，外观等） 5.Displa...
什么是回流和重绘？他们的区别是什么？
weixin_40381947的博客
04-07 884
对于DOM结构中的各个元素都有自己的盒子模型,这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了，这个过程称之为repaint。
回流跟重绘
RongKai_L的博客
05-10 335
一、 什么是重绘和回流 在 html 中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流和重绘： 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置 重绘：当计算好盒子模型的位置、大小及其其他属性后，浏览器根据每个盒子特性进行绘制 具体的浏览器解析渲染机制如下所示： 具体的浏览器解析渲染机制如下所示： 解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layou..
什么是回流跟重绘？从中怎么优化网页性能？
有事儿私信。
09-11 916
在前端开发中，回流（reflow）和重绘（repaint）是两种重要的概念，它们直接影响到网页的渲染性能。理解这两个概念以及它们在什么场景下会被触发，对于优化网页性能具有重要意义。
回流与重绘
GW05431的博客
01-21 1544
浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。当触发回流时，一定会触发重绘，但是重绘不一定会引发回流。1.回流与重绘的概念及触发条件。2.如何避免回流与重绘?
什么是回流和重绘
Joker.M的博客
07-23 1988
什么是回流和重绘 当渲染树中的一部分或者全部因为元素的尺寸、布局、隐藏等改变而需要重新构建的时候，这时候就会发生回流。 每个页面都至少发生一次回流，也就是页面第一次加载的时候。 在回流的时候，浏览器会使渲染树中受到影响的元素部分失效，并重新绘制这个部分的渲染树，完成回流以后，浏览器会重新绘制受到影响的部分元素到屏幕中，这个过程就是重绘。 什么时候会发生回流？ 1、添加或者删除可见的DOM...
ES6的class中的static方法和普通方法的区别
welnee的博客
09-28 2640
什么是静态（static）方法？ 类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。 class Foo { static classMethod() { return 'hello'; } } Foo.classMethod() // 'hello' var foo = new Foo(); foo.classMethod() // TypeError: foo.
哪些情况会触发回流和重绘
05-30
回流和重绘是浏览器对页面进行重新渲染的过程，会消耗大量的CPU资源。触发回流和重绘的情况有以下几种： 1. 修改了DOM元素的几何属性，比如宽度、高度、位置等； 2. 添加或删除DOM元素； 3. 修改了DOM元素的内容，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值