background

Canvas has some unique advantages in image processing and rendering. However, when the theme content of the current content is not changed much, there will be some small content changes. When the page is refreshed or scrolling, there will be a lot of drawing operations of complex content elements in a frame. Redrawing of page elements will lead to a spike in CPU utilization.

The process of redrawing is essentially a continuous scraping – redrawing process. But it takes a certain amount of time to complete this series of operations on the screen, and the more complex the graphics on the screen, the longer the time it takes, we can see the white-scraping and re-drawing operation, in the process of using the screen will directly feel the flicker.

The performance burden and flicker problems associated with repainting can lead to a poor user experience. In order to better optimize these two problems, the double cache canvas and oil painting layer drawing method appeared. In this section, we will reveal the specific application of double cache and optimization technology in the spreadsheet technology from the perspective of spreadsheet technology.

Double cache canvas

Now we have an image that needs to be placed on the Canvas, using the drawImage() method, there are three ways to write it:

Void CTX. DrawImage (image, dx, dy); Void CTX. DrawImage (image, dx, dy, dWidth, dHeight); Void CTX. DrawImage (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);Copy the code

The first method just puts the picture in the Canvas as it is, the second method specifies the width and height, which means that the picture is enlarged or reduced before being put in, and the third method is the picture is cut and then enlarged or reduced before being put in the Canvas. The operation complexity of these three methods increases in turn, and the performance cost increases as well.

With off-screen rendering (what we call a double cache Canvas), we can pre-crop the image to the size we want, save the content, and use the first script to put the image directly on the Canvas.

Var offscreencanvas = document.createElement('canvas'); var offscreencanvas = document.createElement('canvas'); // Set the width to the desired image size offscreencanvas.width = dWidth; offscreencanvas.height = dHeight; / / cutting offscreencanvas getContext (' 2 d '). DrawImage (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); // Draw viewContext. drawImage(Canvas, x, y);Copy the code

The core of the dual-cache canvas technology is that the system needs to create a “logical screen” in memory as large as the current screen. Our drawing and animation operations are first applied to this logical screen, and when an operation is completed on this logical screen, the entire logical screen is placed on our screen.

(Off-screen rendering principle schematic diagram)

In this process, we can not see the whole graphics on the screen redraw process, thus solving the flicker problem. Just like watching animation, without double cache technology, is to draw a frame to see a frame, will be stuck. With the dual-cache technique, each frame is drawn in advance and displayed over and over again.

Canvas provides the OffscreenCanvas method to build a Canvas that can be rendered off-screen, which works in both window and Web worker environments. For some renderings, if the Image is created and then rendered, it will consume a lot of CPU, but with the off-screen rendering, the CPU usage is actually reduced by as much as twice during high-frequency events.

Oil painting layering

The idea of using layered rendering to process picture animation is not new. It frequently appears in many fields, such as intangible cultural heritage shadow play, color printing technology, and now audio and video industry, and this idea is also the cornerstone of Canvas.

(Schematic diagram of layered rendering principle)

The idea of Canvas layering is that each element in the animation has different requirements for rendering and animation.

Take the picture below for example. In this picture, the background and the text below are static and repetitive, except for the cat itself.

(Schematic diagram of oil painting layering mechanism)

Following the logic of layering, the only thing we need to update the drawing frequently is the top cat. This method is similar to oil painting, so it is also called oil painting layering mechanism. Using this method combined with double buffering technology can effectively split the repeatedly drawn content to the off-screen canvas, and then render the off-screen image to the main canvas according to our needs, eliminating the steps of frequently generating repeated parts.

Technical application landing

In practical applications, when complex content needs to be rendered in the front end or a large amount of data needs to be processed, in order to better optimize the performance, many projects have actually adopted the double cache Canvas and oil painting layering technology of Canvas. We took these issues into account when we selected our spreadsheet technology. In our spreadsheet application project, we had to deal with millions of data content at a time, and the performance of the browser in rendering table content and processing data became extremely important.

The figure above shows 50000*20=100000 data in a pure front-end spreadsheet, which only takes 0.038s to process. In this pure front end spreadsheet, the whole drawing engine is divided into main layer and decorative layer according to the principle of oil painting. The theme layer will render persistent elements that cannot be easily changed, such as backgrounds, cells, table lines, etc. Decorative layers render mutable elements such as selection boxes, drag boxes, hover effects, etc. In the image below, layers 1 through 4 are the contents of the main layer, and layer 5 is the decorative layer.

In addition, the whole drawing process is not from the data layer (Model) to the View layer (View). Instead, according to the particularity of the table content, a ViewModel of the exclusive view layer is combined from the data layer according to the shape of the view layer. In combination with the double cache canvas drawing mechanism mentioned above, the whole table can be drawn on demand, and the drawing results can be cached to further improve the drawing performance.

Instead of drawing directly on the main canvas that the user can see, the main layer is drawn on an invisible cache canvas. When rendering is required, simply clone the contents of the cache canvas onto the main canvas and attach decorative layer elements

This way, when the table needs to be updated, such as when the cell background changes, you can simply redraw the cell content after cloning the cache canvas.

When the table scrolls down, the table scrolls down and needs to be redrawn, the main canvas will be emptied, and then the canvas will be offset from the cache canvas according to the behavior context. The offset layer will be drawn directly on the main canvas, and then the remaining part of the offset will be drawn on the main canvas, and finally the cache will be updated.

The use of cache canvas and oil painting layering mechanism greatly improves the drawing performance, making the whole scrolling process more smooth and smooth.

Give it a thumbs up if you think it’s good. We’ll have more technical Revelations and interesting content in the future.

The official website of Grape City, grape city for developers to provide professional development tools, solutions and services, enabling developers.

L MDN Web Docs:Canvas off-screen rendering

L Wiki: Canvas introduction

Open course on double cache Canvas and oil painting techniques from software Architecture

L Pure front-end online form control