我理解的GPU加速

1. 什么是GUP加速?

GPU是显示卡的“大脑”，它决定了该显卡的档次和大部分性能，同时也是2D显示卡和3D显示卡的区别依据。2D显示芯片在处理3D图像和特效时主要依赖CPU的处理能力，称为“软加速”。3D显示芯片是将三维图像和特效处理功能集中在显示芯片内，也即所谓的“硬件加速”功能。显示芯片通常是显示卡上最大的芯片(也是引脚最多的)。现在市场上的显卡大多采用NVIDIA和 AMD-ATI两家公司的图形处理芯片。

针对于渲染引擎是慢的, 现在主流浏览器都支持了GPU加速, 可以通过代码手动开启

•   通过指定transform: translateZ(0);
    .cube {
       -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
       -ms-transform: translateZ(0);
       -o-transform: translateZ(0);
       transform: translateZ(0);
       /* Other transform properties here */
    }
    
    
  

•   谷歌浏览器跟safari浏览器在用 transform 或 animation动画时会闪烁, 可以通过以下方法解决
    .cube {
       -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
       -ms-backface-visibility: hidden;
       backface-visibility: hidden;
    
       -webkit-perspective: 1000;
       -moz-perspective: 1000;
       -ms-perspective: 1000;
       perspective: 1000;
       /* Other transform properties here */
    }
  

•   在webkit支持的桌面和移动浏览器中运行良好的方法是translate3d
    .cube {
       -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
      /* Other transform properties here */
    }
  

2. 如何判断浏览器是否开启了硬件加速

浏览器搜索chrome://gpu/

如果开启了: 

• WebGL: Hardware accelerated
• WebGL2: Hardware accelerated

否则: 

• WebGL: disabled

• WebGL2: disabled

3. 你知道will-change吗?

will-change CSS属性向浏览器提示元素将如何更改。浏览器可以在元素实际更改之前设置优化。这些类型的优化可以在实际需要之前执行可能代价高昂的工作，从而提高页面的响应性。

警告: will-change将被用作最后的手段，以便尝试处理现有的性能问题。它不应该用于预测性能问题。

有很多属性可以点 3点 查看详情

GPU: blog.teamtreehouse.com/increase-yo…

will-change: developer.mozilla.org/en-US/docs/…