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

 

screenshot when canvas-enable-hardware-accelerated