System and method for improving web page canvas rendering speed

Abstract

The invention relates to a system and a method for increasing canvas rendering speed of a webpage. The system comprises a drawing module, a buffer module and a refresh module. The drawing module records drawing commands in command packages by taking a canvas frame as a unit, and executes the drawing commands to draw a memory bit map by taking the command package as a unit, wherein each command package only contains all the drawing commands involved by one canvas frame. The buffer module stores the memory bit map drawn by the drawing module. The refresh module reads the memory bit map stored in the buffer module and refreshes the memory bit map on display screen. With the adoption of the system and the method for increasing the canvas rendering speed of the webpage, the performance bottleneck caused by frequent copy of a large block of memory in the prior art is avoided when a browser renders "canvas elements" of the webpage on a platform or device without GPU support or GPU rasterization characteristics, the operation is simple, and the application range is relatively wide.

Description

technical field [0001] The present invention relates to the field of computer technology, in particular to Internet application technology, in particular to a system and method for increasing the rendering speed of a web page canvas. Background technique [0002] When the browser renders the "canvas element" of the web page, there are mainly two mutually independent modules, the drawing module and the screen refreshing module. Drawing module: responsible for executing the scripting language and performing drawing operations on the "canvas element" of the web page. Screen refresh module: responsible for listening to refresh events, synthesizing the content of the current page in real time and refreshing it to the screen. [0003] At present, when browsers on the market render "canvas elements" on web pages, there are generally two ways, one is CPU rendering, and the other is GPU rendering. [0004] see Figure 1 to Figure 2 shown, where figure 1 It is a schematic structur...

AI Technical Summary

Problems solved by technology

But need GPU support (also support GPU rasterization feature)

If the platform or device does not provide GPU support or does not support GPU rasterization features, it will affect the performance of rendering

Images