HTML5性能优化 - Canvas硬件加速

HTML5 Canvas是最广泛支持的2D即时模式图形WEB标准,是基于HTML5的多媒体、可视化、游戏等应用的基础。因此,Canvas的性能优化有助于几乎所有HTML5应用的性能提升,且能有效地节省CPU使用率,这一性能指标对于大屏幕的设备非常重要。

chrome for android在android4.0上已经实现了canvas硬件加速, 从samsung i9100测试成绩上看, 和iphone4差距仅有20%(还没有找到iphone5, 以后有钱了买个, 相信它的成绩会更好). 不过在原生browser的实现上, 并没有启用canvas硬件加速, FishTank的成绩只有可怜的5 fps, 在porting canvas硬件加速feature到native webkit后, 可以看到成绩可以达到了24fps, 提升效果还是不错的.

在这个优化中,通过在webkit中实现GPU的图像渲染和图层合成接口层,来替换原生Canvas基于skia的实现策略,有效减少图像内存拷贝,减少CPU使用率,大幅度提高了图像的渲染、合成和绘制的性能。通过微软官方提供的测试程序:FishIETank(http://ie.microsoft.com/testdrive/Performance/FishIETank/),可以看到优化过的HTML5性能至少提升了150%, 当然bug还是有的, 待解.

sw platform: Android 4.0.3

hardware platform: samsung i9100

screenshot when canvas-no-hardware-accelerated

clip_image002

 

screenshot when canvas-enable-hardware-accelerated

clip_image002[4]

posted @ 2013-03-03 19:18  webkit_android  阅读(7176)  评论(0编辑  收藏  举报