Analysis And Optimization Of HTML5 Canvas Hardware Acceleration Technology In Android Systems

With the rapid development of SoC technology and wireless communication technology, the whole society has entered the era of mobile Internet. Along with the development of mobile Internet, Android has become the most popular mobile operating system for its open source characteristic and good ecological environment. Nowadays, people raise more concern on the Web browsing experience. Meanwhile, the content of Web pages is becoming richer and more complex than before. These aforementioned factors require browser to be more efficient in Web page rendering.Canvas tag is added for graphics rendering in HTML5. With help of JavaScript, Canvas tag can support renderings of bitmap, text, geometric figure, etc. The results of experiments on Loongson2H and OK210 platforms show that GPU is better than CPU in bitmap rendering, while CPU is better in geometric figure rendering. Howerver, the original graphics in Android renders Canvas either by CPU or by GPU individually. Based on the analysis of Android graphics system and working principle of WebKit, this thesis proposes and implements a novel method that CPU and GPU both take part in graphics rendering of one canvas. In this thesis, bitmaps are rendered by GPU while the rest is rendered by CPU in HTML5 Canvas. The processed data from CPU and GPU will be composited by SurfaceFinger.The optimization method is verified on the Loongson2H and OK210 evaluation platforms. Compared to the only CPU mode, the speed of bitmap rendering is increased by more than 20% in CanvasPerf. Compared to the only GPU mode, the speed of geometric figure rendering is increased by more than 10% in CanvasPerf. Compared to Android original method, the FPS of CanvasMark is increased by more than 10% on average and the average time of Web page loading in BBench has been redued by more than 10%.