GPUs are specialized processors designed to handle graphics and image processing. They were first introduced in 1999 by NVIDIA to accelerate 3D graphics. While most modern computers have integrated GPUs for basic rendering, discrete GPUs offer significantly higher performance for gaming and other graphics intensive tasks. Hardware acceleration of CSS properties like transforms, transitions and animations can utilize the GPU to improve rendering performance and frame rates.

1. GPU

2. GPU
• 图形处理器（ Graphics Processing Unit ）
• 专门用来处理在个人电脑、工作站或游戏机上图像运算工作
• 显卡的“心脏”
• 90%以上的新型台式电脑和笔记本型电脑拥有集成图形处理器，但是在性能
上往往低于那些独立显卡。

3. GPU 发展
• 1999年NVIDIA发布GeForce256芯片时首先提出GPU的概念。
http://www.nvidia.cn/object/tesla-case-studies-cn.html

4. GPU-Z

5. CPU VS GPU

6. http://www.zhihu.com/question/19903344

7. native applications can access the device’s graphical
processing unit (GPU) to make pixels fly. Web
applications, on the other hand, run in the context of
the browser, which lets the software do most (if not
all) of the rendering, resulting in less horsepower for
transitions. But the Web has been catching up, and
most browser vendors now provide graphical
hardware acceleration by means of particular CSS
rules.
http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

8. FPS
“每秒显示帧数”（Frame per Second，FPS，帧率）或“赫兹”

9. 关闭/开启GPU

10. Y硬件加速的方面
• General layout compositing
• CSS3 transitions
• CSS3 3D transforms
• Canvas Drawing
• WebGL 3D Drawing

11. 如何启用GPU加速
. box{
- webki t - t r ansf or m: t r ansl at eZ( 0) ;
- moz- t r ansf or m: t r ansl at eZ( 0) ;
- ms- t r ansf or m: t r ansl at eZ( 0) ;
- o- t r ansf or m: t r ansl at eZ( 0) ;
t r ansf or m: t r ansl at eZ( 0) ;
}

12. 防止页面闪烁
. box{
- webki t - backf ace- vi si bi l i t y: hi dden;
- moz- backf ace- vi si bi l i t y: hi dden;
- ms- backf ace- vi si bi l i t y: hi dden;
backf ace- vi si bi l i t y: hi dden;
- webki t - per spect i ve: 1000;
- moz- per spect i ve: 1000;
- ms- per spect i ve: 1000;
per spect i ve: 1000;
}

14. Demo
http://jsbin.com/imotos/1/watch

15. translate与absolute测试对比
元素个数 动画类型 占用CPU 占用GPU FPS
20
translate
5%~6% 0%~1% 59~63
translate+3D加速 2%~4% 0%~1% 59~63
absolute 4%~6% 0%~1% 59~63
absolute+3D加速 5%~6% 0%~1% 59~63
200
translate 14%~16% 0%~1% 59~63
translate+3D加速 5%~7% 0%~1% 59~63
absolute 10%~12% 0%~1% 59~63
absolute+3D加速 15%~19% 0%~1% 59~63
2000
translate 25%~26% 0%~1% 10~12
translate+3D加速 21%~23% 1%~2% 56~77
absolute 24%~25% 0%~1% 15~20
absolute+3D加速 24%~26% 0%~1% 6~12

16. translate 3D加速对比
Before After

17. rotate()测试数据
元素个数 动画类型 占用CPU 占用GPU FPS
20
rotate()
1%~2% 1%~2% 56~63
rotate()+3D加速 1%~2% 1%~2% 56~63
200
rotate() 14%~15% 1%~2% 56~63
rotate()+3D加速 5%~7% 2%~4% 56~63
2000
rotate() 25%~26% 0%~1% 10~12
rotate()+3D加速 21%~23% 1%~3% 56~77

18. scale()测试数据
元素个数 动画类型 占用CPU 占用GPU FPS
20
scale()
4%~5% 2%~4% 56~63
scale()+3D加速 1%~2% 1%~2% 56~63
200
scale() 14%~15% 1%~2% 56~63
scale()3D加速 5%~7% 2%~4% 56~63
2000
scale() 25%~26% 0%~1% 10~12
scale()3D加速 21%~23% 1%~3% 56~77

21. 关于测试
• 扩大测试数量级
• 多次采样取平均值

22. ｛硬件加速｝？*

23. 带来的问题

25. 参考资料
• http://css-tricks.com/tale-of-animation-performance/
• http://docs.nvidia.com/cuda/cuda-c-programming-guide/
• http://wenku.baidu.com/view/75102b4133687e21af45a963.html
• http://www.html5rocks.com/en/tutorials/speed/html5/
• http://zh.wikipedia.org/wiki/OpenGL
• http://zh.wikipedia.org/wiki/Direct3D
• http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/
• http://stackoverflow.com/questions/10014461/why-does-enabling-hardware-acceleration-in-css3-slow-down-
performance
• https://developer.nvidia.com/gpu-accelerated-path-rendering
• http://www.gwxdn.com/html/hardware/video/2011/0329/16905.html
• http://zh.wikipedia.org/wiki/%E7%A1%AC%E4%BB%B6%E5%8A%A0%E9%80%9F