background
Canvas has some unique advantages in image processing and rendering. But when the content of our current display does not change much in the case of the theme content, there will be some small changes in the content. When the page is refreshed or scrolled, there will be many complex content elements in one frame. The drawing of page elements will cause the CPU usage to soar.
The process of repainting is essentially a process of continuous scraping and repainting. However, 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 it will take. The white-scratching-redrawing operation that we can see with the naked eye will cause trouble during use. You will directly feel the flickering of the screen.
The performance burden and flicker problems caused by redrawing will bring a poor user experience to the user. In order to better optimize these two problems, a double-buffered canvas and layered painting method of oil painting appeared. In this section, we will also start from the spreadsheet technology to reveal the specific application of double buffering and optimization technology in the spreadsheet technology.
Double-buffered canvas
Now we have a picture that needs to be placed in Canvas, using the drawImage() method, there are three ways to write:
// 将image放到目标canvas指定位置
void ctx.drawImage(image, dx, dy);
// 将image放到目标canvas指定位置，指定宽高渲染
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
// 将image裁剪之后放到目标canvas指定位置，指定宽高渲染
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
The first method is to just put the picture as it is in the Canvas. The second method is to specify the width and height to enlarge or reduce the picture and then put it in. The third method is to crop the picture and then enlarge or reduce it to the canvas. This The operation complexity of the three writing methods increases sequentially, and the performance overhead also increases.
And if you use off-screen rendering (that is, what we call double-buffered canvas), we can crop the picture to the desired size in advance, then save the content, and use the first writing method to put the picture directly when drawing Canvas.
// 在离屏 canvas 上绘制
var offscreencanvas = document.createElement('canvas');
// 宽高赋值为想要的图片尺寸
offscreencanvas.width = dWidth;
offscreencanvas.height = dHeight;
// 裁剪
offscreencanvas.getContext('2d').drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
// 在视图canvas中绘制
viewcontext.drawImage(canvas, x, y);The core of the double-buffer canvas technology is that the system needs to open up a "logical screen" as large as the current screen in the memory. Our drawing and animation operations will first act on this "logical screen". After an operation is completed on this "logical screen", then the entire "logical screen" will be put on our screen.
(Schematic diagram of off-screen rendering principle)
Under such a process, we cannot see the redrawing process of the entire graph on the screen, thus solving the flicker problem. Just like watching anime, without double-buffer technology, just draw one frame and watch one frame, it will definitely freeze. With double-buffer technology, each frame is drawn in advance, and it is constantly flipped to show it.
(Frame by frame animation)
Canvas provides the OffscreenCanvas method for this purpose, which is used to construct a canvas object that can be rendered off-screen. It is effective in both the window environment and the web worker environment. For some renderings, if you create an Image and then render it, it will consume a lot of CPU, but with off-screen rendering, the measured CPU usage in high-frequency events has doubled.
Oil painting layered drawing
The idea of layered rendering to process screen animation is not new. From intangible cultural heritage shadow puppetry, color printing technology, to the current audio and video industry, and many other fields have frequently appeared, and this idea is also found in Canvas. Position in the cornerstone.
(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 following picture as an example. In this picture, except for the cat itself in motion, the background and the text below are static and repeated.
(Schematic diagram of oil painting layering mechanism)
According to the hierarchical logic, we need to update the drawing frequently only the cat at the top. This method is similar to the painting of oil paintings, so it is also called the layering mechanism of oil paintings. Using this method combined with double buffering technology can effectively shunt the repetitively drawn content to the off-screen canvas, and then render the off-screen image to the main canvas according to our needs, eliminating the need to frequently generate repeated parts.
Technology application landing
In actual applications, when it is necessary to render complex content or process large amounts of data at the front end, in order to better optimize performance, many projects have actually adopted Canvas' double-buffered canvas and oil painting layering technology. We also considered these issues when we made the selection of spreadsheet technology. In spreadsheet application projects, we often need to process millions of orders of data content. In this case, the browser's performance in rendering and data processing of the table content appears extremely high. important.
The above picture shows 50000*20=100000 data in a pure front-end spreadsheet, and the processing only takes 0.038s. In this pure front-end spreadsheet, the entire drawing engine is divided into a main layer and a decorative layer according to the principle of oil painting. The theme layer will render persistent elements that will not change easily, such as backgrounds, cells, and table lines. Wait. The decorative layer will render frequently changing elements, such as selection boxes, dragging boxes, and floating effects. In the following figure, the first to fourth layers are the contents of the main layer, and the fifth layer is the decoration layer.
In addition, the entire drawing process does not go directly from the data layer (Model) to the view layer (View). Instead, according to the particularity of the table content, a layer of exclusive view layer view data (ViewModel) is combined from the data layer according to the shape of the view layer, and then combined with the double-buffer canvas drawing mechanism mentioned above to complete the entire table on demand The drawing needs, and the drawing results are cached to further improve the drawing performance.
The main layer is not drawn directly on the main canvas that the user can see, but on an invisible cache canvas. When you need to render, you only need to clone the contents of the cache canvas to the main canvas, and then attach the decoration layer elements
In this way, when the table needs to be updated, such as a cell background change, you only need to redraw the corresponding cell content after cloning the cache canvas.
When the table scrolls down, the scrolling of the table ends and the main canvas 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, and the offset layer will be directly drawn on the main canvas, and then Draw the remaining part after the offset on the main canvas, and finally update the cache.
The use of cached canvas and oil painting layering mechanism greatly improves the drawing performance and makes the whole scrolling process smoother and smoother.
Think it’s good, give me a thumbs up~ The follow-up will bring you more technical secrets and interesting content.
Please indicate the source for reprinting: Grape City official website , Grape City provides developers with professional development tools, solutions and services, and empowers developers.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。