will-change和contain
一开始知道
will-change和contain我很迷茫，总觉得两个差不多，都是用来优化页面的渲染性。搞不懂两个的区别。关于这两个属性的具体介绍以及原理有很多文章可以参考。这里不做介绍。主要总结一下他们的区别，以便于具体场景具体使用。
will-change的作用，主要是跳过来渲染流程中的布局（layout）、重绘，并且使用GPU来合成图层，大大提高来渲染效率。因为跳过来重绘所以，will-change属性主要针对的动画为一下几种：
- 几何变换，图层的大小，位置等等。
- 透明度变换
- 阴影
will-change在需要使用的时候，再动态设置，提前告诉浏览器，什么属性会发生变化，这样浏览器可以提前做渲染准备，提高性能，用完后将值设为auto.
contain的主要作用是隔离，提前告知浏览器，这一部分内容的变化不会影响页面其他元素，就只需要重新绘制这一部分内容就好，避免了重新渲染整个页面，浪费不必要的性能。
一些关于will-change和contain的介绍文章
will-change`
分层和合成机制：为什么 CSS 动画比 JavaScript 高效？
CSS页面渲染优化属性will-change
contain
content-visibility: 一个可以提高渲染性能的css属性
CSS性能优化新属性 contain 的语法、作用及使用场景
关于这两个属性的文章有很多，可以自行搜索学习
