由VUE3动画引发的对浏览器性能的思考

1.引言

        作者最近在研究vue3的动画应用的时候，突然看到了vue文档中的对于浏览器动画性能优化的部分，作者打算结合以前进行学习的浏览器高级的知识，进行细说一下动画的性能影响问题。

2.浏览器的几个知识

        1.回流(reflow) 可以理解为重排

                1.概念

                        第一次确定节点的大小和位置，可以理解为layout布局，之后对节点的大小，位置进行重新计算称之为回流。

                2.什么情况会引起回流

                        1.DOM结构发生变化(操作真实DOM)

                        2.改变了布局（修改了width，height，padding，font-size等）

                        3.修改窗口resize（修改了窗口的尺寸）

                        4.使用getComputedStyle获取尺寸，位置信息

        2.重绘(repaint)

                1.概念

                        第一次进行渲染内容称之为绘制，之后进行重新渲染称之为重绘

                2.什么情况会引起重绘呢？

                        进行修改背景色，文字颜色，边框颜色，样式等

        3.注意: 回流一定会引起重绘，回流是一件十分消耗浏览器性能的事情。

        4.如何进行避免发生回流

                1.修改样式时尽量一次性修改

                        比如通过cssText进行修改，通过class进行修改

                2.尽量避免频繁操作DOM

                        可以在一个DocumentFragment或者父元素中将要操作的DOM操作完成，再进行一次性操作

                3.尽量避免通过getComputedStyle获取尺寸/位置等信息

                4.对某些元素使用position的absolute或者fixed

                        依然会引起回流，但是由于使用绝对定位/固定定位/粘性定位之后脱离了标准流，不会对其他元素造成太大的影响，使得回流次数减小。

        5.特殊解析 - composite合成

                1.概念

                        浏览器的一种优化手段，在绘制的过程中，可以将布局后的元素绘制到多个合成图层中，在默认情况下，标准流中的东西都是倍绘制在同一个图层中，有一些特殊的属性，会创建一个新的合成层，并且新的图层是可以进行利用GPU进行加速绘制的。（每个合成层都是可以进行单独渲染的）

                2.什么属性可以形成新的合成层？

                        1.3D transforms

                        2.video canvas iframe

                        3.opacity 动画转换时

                        4.will-change：一个实验性的属性，提前告诉浏览器那些元素可能发生哪些变化，通知浏览器进行优化。

                        5.animation/transition设置了opacity/transform

                3.注意点

                        分层确实可以进行提高性能，但是是以内存管理为代价的，因此不能进行作为web性能优化策略的一部分进行过度使用。

可见，如果我们进行的动画操作，导致浏览器进行了无数次的回流重绘或者导致了无数次的合成，对性能会有很大的损耗。

3.VUE文档中对transition性能的描述

        VUE文档中甚至使用昂贵一词来进行形容如果我们使用动画的时候修改的是height/width等属性，会极大的消耗性能，因为这会导致浏览器进行回流！甚至如果元素被修改height/width等属性的时候，是在标准流中的，那么，会极大的影响其余元素的排列布局，导致浏览器在执行动画效果的时候，进行无数次的回流，重绘，性能出现极大的损耗。

4.CSS Trigger --- 优化手段

        1.引言

                这是一个非常棒的网站，告诉开发者不通风内核浏览器对css属性修改的重绘/回流情况，告诉开发者这些细节，帮助开发者提升网站的页面性能。

        2.怎么看明白这个网站？

                紫色代表如果layout，中文一般翻译成回流，浅绿色代表Paint，一般翻译成重绘，深墨绿色代表Composite，翻译成混合，重绘和回流任意发生一个就会引起混合。
Change from default：设置属性(从默认值修改，相当于一开始没设置css)，Subsequernt updates：修改属性(对现有的属性值进行修改)。当前看的属性是align-content，在这种情况下，B/G/W/E四种内核因为内核不同对修改/设置align-content引起的重绘/回流的情况各不相同。