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