关于css的两个属性will-change和contain

will-change和contain

一开始知道will-changecontain我很迷茫,总觉得两个差不多,都是用来优化页面的渲染性。搞不懂两个的区别。关于这两个属性的具体介绍以及原理有很多文章可以参考。这里不做介绍。主要总结一下他们的区别,以便于具体场景具体使用。

will-change的作用,主要是跳过来渲染流程中的布局(layout)、重绘,并且使用GPU来合成图层,大大提高来渲染效率。因为跳过来重绘所以,will-change属性主要针对的动画为一下几种:

  1. 几何变换,图层的大小,位置等等。
  2. 透明度变换
  3. 阴影

will-change在需要使用的时候,再动态设置,提前告诉浏览器,什么属性会发生变化,这样浏览器可以提前做渲染准备,提高性能,用完后将值设为auto.

contain的主要作用是隔离,提前告知浏览器,这一部分内容的变化不会影响页面其他元素,就只需要重新绘制这一部分内容就好,避免了重新渲染整个页面,浪费不必要的性能。

一些关于will-change和contain的介绍文章

will-change`

分层和合成机制:为什么 CSS 动画比 JavaScript 高效?
CSS页面渲染优化属性will-change

contain

content-visibility: 一个可以提高渲染性能的css属性
CSS性能优化新属性 contain 的语法、作用及使用场景

关于这两个属性的文章有很多,可以自行搜索学习

你可能感兴趣的:(关于css的两个属性will-change和contain)