03渲染优化-05减少重绘

最新推荐文章于 2022-04-27 16:05:58 发布

trust_future99

最新推荐文章于 2022-04-27 16:05:58 发布

阅读量118

点赞数

分类专栏：前端文章标签： html5 css3

本文链接：https://blog.csdn.net/trust_future99/article/details/114140114

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

使用动画的时候，尽量使用transform

transform

		0%{transform:scale(.1,.1)}
		100%{transform:scale(1,1)}

在这里插入图片描述

非transform（width/height）

	0%{
	width: 10%;
		height: 10%;
	}
	
	100%{
		width: 100%;
		height: 100%;
	}
	// 和上面的scale展示效果不同，但能说明修改width或height对渲染的影响

在这里插入图片描述

减少重绘的方案

利用devtools识别paint的瓶颈（可参考上述案例）
利用will-change创建新的图层

CSS 属性 will-change 为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。
适用任何元素

不要将 will-change 应用到太多元素上：浏览器已经尽力尝试去优化一切可以优化的东西了。有一些更强力的优化，如果与 will-change 结合在一起的话，有可能会消耗很多机器资源，如果过度使用的话，可能导致页面响应缓慢或者消耗非常多的资源。
有节制地使用：通常，当元素恢复到初始状态时，浏览器会丢弃掉之前做的优化工作。但是如果直接在样式表中显式声明了 will-change 属性，则表示目标元素可能会经常变化，浏览器会将优化工作保存得比之前更久。所以最佳实践是当元素变化之前和之后通过脚本来切换 will-change 的值
不要过早应用 will-change 优化：如果你的页面在性能方面没什么问题，则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化手段，用来尝试解决现有的性能问题。它不应该被用来预防性能问题。过度使用 will-change 会导致大量的内存占用，并会导致更复杂的渲染过程，因为浏览器会试图准备可能存在的变化过程。这会导致更严重的性能问题。
给它足够的工作时间：这个属性是用来让页面开发者告知浏览器哪些属性可能会变化的。然后浏览器可以选择在变化发生前提前去做一些优化工作。所以给浏览器一点时间去真正做这些优化工作是非常重要的。使用时需要尝试去找到一些方法提前一定时间获知元素可能发生的变化，然后为它加上 will-change 属性。

// 默认值；表示没有特别指定哪些属性会变化，浏览器需要自己去猜，然后使用浏览器经常使用的一些常规方法优化
will-change: auto

// 表示开发者希望在不久后改变滚动条的位置或者使之产生动画
will-change: scroll-position

// 表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画
will-change: contents

//will-change:  <custom-ident>
// 表示开发者希望在不久后改变指定的属性名或者使之产生动画。如果属性名是简写，则代表所有与之对应的简写或者全写的属性
will-change: transform      // 在 transform上使用will-change
will-change: opacity        // 在 opacity 上使用will-change
will-change: left, top      // 在 left, top 上使用will-change