CSS 3D 加速

目录

一、作用 

二 、流程 

 三、为什么GPU更擅长图形渲染？

---

一、作用 ：

                        使用GPU完成页面渲染绘制的计算

                        提升绘制效率，特别是动画会比较流畅

                        减少CPU的负载，JS线程能获得更多的运行时间——减少卡顿

             什么时候加速：检测到某个DOM元素可能会从中获益的时候才会应用硬件加速

                    1. 3D transform

                    2. opacity

                    3. video

                    4.canvas

                    5. will-change

          负面  ：会增加内存消耗，消耗更多电量

二 、流程 ：

          a. DOM 会和CSSDOM结合为render tree ， 渲染树当中质保函需要渲染的节点。

          b. 布局：放什么元素，在那里，款到多少，之间关联是什么

          c. 绘制：一旦渲染树创建并且布局完成，像素就可以绘制屏幕上，如果多个层情况下， 执行合并操作。

                i. GPU 作用就是最终让多个层合并

                ii. 与上述GPU属性时候，浏览器会将合成层提升到GPU处理， 提升这部分的绘制效率。

 代价：更多的消耗内存

                iii. render layer => 合并成 composition layer => 后端存储（GPU内存） => compositor 合并成最终片

          d. 由独立的GPU负责渲染，IPC手段共享内存传递参数到GPU进程，渲染完成比之后放在共享内存中。

          e. 问题：

                 i. 数据需要多个进程之间传递，需要多个组件（CPU=>GPU）传递， 图层越多，效率越低。

                ii. 巨大的内存消耗

 三、为什么GPU更擅长图形渲染？

                a. CPU需要很强的通过性来处理各种不同类型的数据，同时又要判断大量分支（if） 跳转和中断的处理，正是因为这样，CPU内部结构异常复杂

                b. GPU 采用了数量众多的计算但愿和超长的流水线，但只有非常简单的控制逻辑， 没有cache缓存。

                c. GPU 更适合做空间点和三角形计算。