被解放的gpu 麦时
TRANSCRIPT
GPU
GPU
• 图形处理器（ Graphics Processing Unit ）• 专门用来处理在个人电脑、工作站或游戏机上图像运算工作• 显卡的“心脏”• 90%以上的新型台式电脑和笔记本型电脑拥有集成图形处理器，但是在性能
上往往低于那些独立显卡。
GPU 发展• 1999年NVIDIA发布GeForce256芯片时首先提出GPU的概念。
http://www.nvidia.cn/object/tesla-case-studies-cn.html
GPU-Z
CPU VS GPU
http://www.zhihu.com/question/19903344
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/
FPS
“每秒显示帧数”（Frame per Second，FPS，帧率）或“赫兹”
关闭/开启GPU
Y硬件加速的方面
• General layout compositing• CSS3 transitions• CSS3 3D transforms• Canvas Drawing• WebGL 3D Drawing
如何启用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) ;
}
防止页面闪烁
. box{- webki t - backf ace- vi s i bi l i t y : hi dden; - moz- backf ace- vi s i bi l i t y : hi dden;- ms- backf ace- vi s i bi l i t y : hi dden; backf ace- vi s i 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;
}
Demo
http://jsbin.com/imotos/1/watch
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
translate 3D加速对比
Before After
rotate()测试数据
元素个数 动画类型 占用CPU 占用GPU FPS
20rotate() 1%~2% 1%~2% 56~63
rotate()+3D加速 1%~2% 1%~2% 56~63
200rotate() 14%~15% 1%~2% 56~63
rotate()+3D加速 5%~7% 2%~4% 56~63
2000rotate() 25%~26% 0%~1% 10~12
rotate()+3D加速 21%~23% 1%~3% 56~77
scale()测试数据
元素个数 动画类型 占用CPU 占用GPU FPS
20scale() 4%~5% 2%~4% 56~63
scale()+3D加速 1%~2% 1%~2% 56~63
200scale() 14%~15% 1%~2% 56~63
scale()3D加速 5%~7% 2%~4% 56~63
2000scale() 25%~26% 0%~1% 10~12
scale()3D加速 21%~23% 1%~3% 56~77
关于测试
• 扩大测试数量级
• 多次采样取平均值
｛硬件加速｝？*
带来的问题
参考资料• 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