前端css动画性能相关总结

涉及两个概念：

回流Reflow：

当页面（文档流）中的Dom元素发生某些改变（如：宽高、位置）使得页面重新计算所有元素在页面中的位置、大小。

重绘Repaint：

当页面（文档流）中的Dom元素发生某些改变（如：颜色，背景）使得页面重新绘制该dom元素的样式。

该两种情况都会导致页面耗费一定的性能去处理（Reflow>Repaint）。因此，前端动画代码的书写要尽可能避开以上两种情况

案例：

当你需要移动某个元素从左到右时
1、使用left:0 ——》right:0 触发回流及重绘
2、使用transfrom: translateX(100%) 不触发回流及重绘

当你需要改变某个元素的大小时
1、使用width:100%——》width: 80% 触发回流及重绘
2、使用transfrom: scale(0.8) 不触发回流及重绘

当你需要隐藏某个元素是
1、使用display: none 触发回流及重绘
2、使用opacity: 0 不触发回流及重绘

哪些属性触发回流重绘：

https://csstriggers.com/

css属性之contain:

使得浏览器在重新计算布局、样式、绘图、大小或这四项的组合时，只影响到有限的 DOM 区域，而不是整个页面，可以有效改善性能。

https://developer.mozilla.org/en-US/docs/Web/CSS/contain

/* 关键词值 */
contain: none;

/* 等价于 contain: layout paint size */
contain: strict;

/* 等价于 contain: layout paint W3C 链接：https://www.w3.org/TR/css-contain-2/#valdef-contain-content*/
contain: content;

contain: size;
contain: layout;
contain: style;
contain: paint;

/* 支持指定多个关键词 */
contain: size paint;
contain: size layout paint;

/* 全局值 */
contain: inherit;
contain: initial;
contain: unset;