图层与重绘重排与优化《性能优化第三篇》

最新推荐文章于 2024-08-21 16:45:15 发布
最新推荐文章于 2024-08-21 16:45:15 发布
阅读量925 收藏 25
点赞数 15
分类专栏： 程序员 文章标签： 性能优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84091580/article/details/137563722
版权
本文详细介绍了浏览器如何将页面划分为图层并进行渲染，包括样式计算、布局、重绘和重排的过程。讨论了图层创建的条件，并重点讲解了重绘与重排的区别，提出优化方案如使用CSS3 transform避免重排，以及避免table布局等。此外，作者分享了自己的前端开发经验，并提供了一份全面的前端学习资料，强调平时的知识积累和实践经验对于面试和能力提升的重要性。
摘要由CSDN通过智能技术生成

浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层有一个或多个节点，在渲染DOM时候，浏览器所做的工作实际上是：

  1. 获取DOM后分割为多个图层

  2. 对每个图层的节点计算样式结果 （Recalculate style—样式重计算）

  3. 为每个节点生成图形和位置 （layout–布局，重排，回流）

  4. 将每个节点绘制填充到图层位图中 （Paint—重绘）

  5. 图层作为纹理上传至GPU

  6. 组合多个图层到页面上生成最终屏幕图像 （Composite Layers – 图层重组）

图层创建的条件：

=======================================================================

  1. 拥有具有3D变换的CSS属性

  2. 使用加速视频解码的<video>节点

  3. <ca

最低0.47元/天 解锁文章
2401_84091580
关注
专栏目录
网页性能优化及重排与重绘详解
qq_38886284的博客
05-17 296
网页性能优化因为涉及到计算机网络、数据算法、图形图像处理、浏览器渲染等多方面计算机知识， 这里浅浅讨论下。
什么是重排、重绘,如何优化
从人到猿
03-30 1866
什么是重排、重绘,如何优化
什么是重排与重绘，如何减少重排
WZH15075051915的博客
03-01 1097
10.查询某些属性或调用某些计算方法：offsetWidth、offsetHeight 等，除此之外，当我们调用 getComputedStyle 方法，或者 IE 里的 currentStyle 时，也会触发重排，原理是一样的，都 为求一个 “即时性” 和 “准确性”。浏览器会维护一个队列，把所有会引起重排、重绘的操作放入这个队列，等队列中的操作到了一定数量或者到了一定的时间间隔，浏览器就会 flush 队列，进行一个批处理。1. 减少直接操作 DOM 元素。
浏览器渲染机制：重排（Reflow）与重绘（Repaint）以及Vue优化策略
JINGWHALE
04-25 1357
本文介绍了浏览器渲染机制，重排、重绘概念，以及何时会发生重排、重绘以及如何避免不必要的重排、重绘，提升性能。另外，介绍了Vue优化重排和重绘机制以及开发者在实际项目中可以采取的优化重排和重绘策略。重排（Reflow）与重绘（Repaint）是浏览器渲染过程中对页面元素进行更新的两个重要步骤，理解它们的工作机制有助于我们进行性能优化。
动画02 浏览器的重绘与重排以及动画性能优化
多啦的博客
02-02 1182
浏览器渲染过程 大体上，浏览器渲染过程分为5步 处理HTML生成DOM树 处理CSS生成样式树 将DOM树和样式树合并为Render树（渲染树） 对Render树进行布局计算，生成盒模型 将信息绘制到屏幕的真实节点 重排（reflow） 当DOM变化影响了元素的几何属性（比如宽、高），浏览器需要重新计算元素几何属性 导致渲染树发生了改变，需要重新构造Render树 重绘（r
前端性能优化-CSS性能优化
LYFlied的博客
03-27 2591
一、内联首屏关键CSS 二、异步加载CSS 异步加载的几种方式 1.js动态创建样式表link元素，并插入到DOM中。 2.设置media属性 3.设置rel属性 4. rel="preload" 三、文件压缩 四、去除无用CSS 五、有选择地使用选择器 六、减少使用昂贵的属性 七、优化重排与重绘 1. 减少重排 2.避免不必要的重绘 八、让元素及其内容尽可能独立于文档树的其余部分 九、避免使用@import 十、开启GPU渲染动画 十一、合并css文件
前端性能优化的指标
最新发布
qq_33653886的博客
08-21 814
注意：回流一定会造成重绘，但是重绘不一定会回流 1、造成回流的情况有：回流这一阶段主要是计算节点的位置和几何信息，那么在页面布局的几何信息发生变化时，就需要回流. 一个DOM树常见几何属性有：width、height、padding、margin、left、top等 2、造成重绘的情况有：例如改变visibility、autline、background-color等属性，这些属性只是影响元素的外观、风格、 并没有影响几何属性，只会导致重绘。由此，元素在用户视角就形成了层叠的关系，某个元素可能。
浏览器重排(回流)重绘以及优化方案
hello ice cream
03-20 2143
一、什么是重排和重绘 要说清重排(reflow)和重绘(repaint)，首先要理解排列和绘制，浏览器渲染页面时，在获取完html、css资源之后，会大致经过以下步骤。 (1) html生成html树 (2) css形成css规则 (3) 两者形成一个渲染树 (4) 去文档当中找寻各自的布局位置----- 排列 (5) 将内容填充到文档上 ----- 绘制 【排列】就是计算位置调整布局的过程，而【绘制】就是把它画上去的过程。【重排】也就是除了最开始排列的布局，后续经过一些操作而使得dom元素重新找寻位置的过
重排、重绘、合成以及如何优化（基于Chrome）
我本可以
06-21 1482
重排又称重构、回流,当我们通过JavaScript或者CSS修改了元素的几何位置属性，例如改变元素的宽度、高度等，那么浏览器会触发重新布局，解析之后的一系列子阶段。 repaint是在一个元素的外观被改变，但没有改变布局的情况下发生的，如改变了visibility、outline、background等。当repaint发生时，浏览器会验证DOM树上所有其他节点的visibility属性。
图层重排重绘及优化
凤凰的博客
09-03 214
###css图层 浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。 在渲染DOM的时候，浏览器所做的工作实际上是： 1. 获取DOM后分割为多个图层 2. 对每个图层的节点计算样式结果 （Recalculate style–样式重计算） 3. 为每个节点生成图形和位置 （Layout–布局，重排,回流） 4. 将每个节点绘制填充到图层位图中 （Paint–重绘） 5. 图层作为纹理上传至GPU 6. 组合多个图层到页面上生成最终屏幕图像 （Composite
重排与重绘及优化策略
DLGDark的博客
05-29 500
1.重排 渲染层内的元素布局发生修改，都会导致页面重新排列，比如窗口尺寸发生变化、删除或添加DOM元素以及修改了影响元素盒子大小的CSS属性（如width，height，padding，） 重排由CPU处理的 2.重绘 绘制，即渲染上色，所有对元素的视觉表现属性的修改，都会引发重绘。 重绘由GPU处理的 无论是重排还是重绘，都会阻塞浏览器；要提高网页性能，就要降低重排和重绘的频率和成本，尽可能少的...
浏览器重绘(repaint)重排(reflow)与优化[浏览器机制]
weixin_34242819的博客
12-24 269
很多人都知道要减少浏览器的重排和重绘，但对其中的具体原理以及如何具体操作并不是很了解，当突然提起这个话题的时候，还是会一脸懵逼。希望大家可以耐着性子阅读本文，仔细琢磨，彻底掌握这个知识点！ 博客、前端积累文档、公众号、GitHub 网页生成过程： HTML被HTML解析器解析成DOM 树 css则被css解析器解析成CSSOM 树 结合DOM树和CSSOM树，生成一棵渲染树(Render T...
重排、重绘--性能优化问题
weixin_45656737的博客
07-02 467
重绘：某些元素的外观被改变，例如：元素的填充颜色 重排（回流）：重新生成布局，重新排列元素。 减少重排、重绘优化性能，其中减少重排尤为重要。重新绘制受到此次重排影响的部分，比如改变元素高度，这个元素乃至周边dom都需要重新绘制。重绘不一定导致重排，但重排一定会导致重绘。 引起重排的原因(掘金+简书的搬运工) a. 页面初始渲染，这是开销最大的一次重排 b. 添加/删除可见的DOM元素 c. 改变元素位置 d. 改变元素尺寸，比如边距、填充、边框、宽度和高度等 e. 改变元素内容，比如文字数量，.
CSS重排与重绘总结
张木期的博客
08-09 4525
昨天面试被问到了什么是重排和重绘，回答的并不是很好，下面来总结一下：关于CSS重排和重绘的概念，在制作中考虑浏览器的性能，减少重排能够节省浏览器对其子元素及父类元素的重新渲染；避免过分的重绘也能节省浏览器性能；优化动画，使用3D启用GPU硬件加速；慎重选择高消耗的样式，如box-shadow、border-radius、transform、css filters等。 浏览器的渲染机制 浏览器渲染展...
性能优化篇-解决重排重绘导致的性能问题
m0_45236510的博客
09-18 1051
重排与重绘导致的性能问题 浏览器的重排重绘导致一定的性能问题，频繁的性能操作会严重导致浏览器卡顿，影响用户体验；因此在开发过程中我们应该尽量的避免浏览器的重排重绘，从而性能与用户体验； 避免重排与重绘的例子 例： 当要改变某个dom的位置时，平常的方法就是获取这个dom节点，修改该节点的style样式，当修改这个样式时改变了cssom;因此浏览器重新渲染；不明白为什么要重新渲染？ 因为浏览器的渲染是遵循下面公式： dom + cssom = renderDom 所以cssom改变了，renderDom也要变
浏览器重绘与重排的性能优化
尐轩web前端网络日志
11-25 6279
了解了浏览器渲染原理之后 我们知道了浏览器听过渲染树计算布局后，就开始绘制页面元素 但是渲染树并不是一成不变的，在我们的脚本当中 它是可能改变的重绘与重排当DOM变化影响了元素的几何属性（宽、高改变等等） 浏览器此时需要重新计算元素几何属性 并且页面中其他元素的几何属性可能会受影响 这样渲染树就发生了改变，也就是重新构造RenderTree渲染树 这个过程叫做重排（reflow）如果D
css 页面重绘和回流(重排)以及优化
热门推荐
小亚美美的博客
02-19 1万+
一、html页面的呈现流程 1.  浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个tag都是DOM树中的1个节点，根节点就是我们常用的document对象。DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。 2. 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，
ArcGIS性能优化策略与硬件环境建议
"ArcGIS性能优化涉及ArcEngine、ArcSDE和ArcServer的设置，目标是提升服务响应速度和系统效率。当前环境下，空间数据库与其他数据库共用服务器，GIS服务器上运行多个服务，导致性能瓶颈。优化策略包括硬件环境升级和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值