被解放的GPU

Transcript

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) ; - m oz- t r ansf or m : t r ansl at eZ( 0) ; - m s- 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; - m oz- backf ace- vi si bi l i t y: hi dden; - m s- 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; - m oz- per spect i ve: 1000; - m s- 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