浅谈浏览器的图层与重绘重排（详细），以及如何用于性能优化

最新推荐文章于 2025-01-09 00:21:12 发布

codingWeb

最新推荐文章于 2025-01-09 00:21:12 发布

阅读量2k

点赞数 5

分类专栏：浏览器前端性能优化文章标签： javascript css html html5 css3

本文链接：https://blog.csdn.net/fesfsefgs/article/details/105918451

版权

本文详细介绍了浏览器的图层原理，包括图层创建的条件和CSS图层的重要性。讨论了重绘和重排的概念，强调了重排的成本高于重绘。文章探讨了如何通过理解这些概念进行性能优化，如利用transform和opacity减少重排，避免table布局，以及在修改DOM时的注意事项，以提升网页渲染效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css图层

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

     	1. 获取DOM后分割为多个图层
    	2. 对每个图层的节点计算样式结果		（Recalculate style--样式重计算）
    	3. 为每个节点生成图形和位置			（Layout--重排,回流）
    	4. 将每个节点绘制填充到图层位图中		（Paint--重绘）
    	5. 图层作为纹理上传至GPU
    	6. 组合多个图层到页面上生成最终屏幕图像	（Composite Layers--图层重组）

图层创建的条件

大致来说，Chrome浏览器满足以下任意情况就会创建图层：

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

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

  3. <canvas>节点

  4. CSS3动画的节点

  5. 拥有CSS加速属性的元素(will-change)

验证如下：
1.开启图层观察的工具
在这里插入图片描述
2.开启旋转，旋转图层，简单的观察下一个简单的图层

3.添加图层创建的条件。比如transform

4.旋转图层，仔细观察，发现有两层图层叠加在一起

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title

最低0.47元/天解锁文章