How to write high-performance code (1): Draw spreadsheets with Canvas

1. What is Canvas

Canvas is an HTML5 tag, a new feature of HTML5, also known as a drawing board. As the name suggests, we can understand it as a canvas that supports drawing rectangles, circles and other graphics or logos on it.
It should be noted that, unlike other tags, Canvas is just an empty canvas, which itself cannot draw graphics and must be drawn through JavaScript scripts.

Most modern browsers support Canvas technology, such as Chrome, Firefox and the latest IE9 and above.
IE8 and below do not support H5, so Canvas is not supported, but we can write content between Canvas tags to prompt users to upgrade or open with a supported browser.

Second, the difference between Canvas and DOM

If you want to draw a graph, how many ideas do you have?

Before the advent of HTML5, people usually use SVG (essentially DOM) to draw, and use XML language to describe the specific information of the graphics to further render the graphics.

There are also students who will use the DOM to draw directly, such as drawing a rectangle with the help of a div tag, and combining CSS for style rendering.

What are the differences between Canvas and DOM?

1. The pictures are drawn in different formats

The DOM uses vector graphics for page rendering, and each element is an independent DOM element. As an independent DOM element, both CSS and JavaScript can directly manipulate the DOM and monitor it.
The canvas is essentially a bitmap, the smallest unit of which is a pixel, and the graphics in it will not create DOM elements alone.

2. Different working mechanisms

As mentioned earlier, the DOM is rendered as a vector diagram. If the content of the page is complex, the system will create a lot of DOM elements. The browser needs to parse and calculate all DOM elements when rendering, and the huge amount of calculation can easily cause the page to freeze or over-render.

When rendering Canvas, each redraw of the browser is based on code. It only needs to build the canvas in memory, execute the drawing logic in the JS engine, and then traverse the color of the pixels in the entire canvas and output it directly to the screen. .
That is to say, no matter how many elements there are in the canvas, the browser only needs to process one canvas during the rendering phase, instead of calculating all DOM elements like vector graphics. This is the biggest advantage of Canvas: rendering performance.

In addition, because the drawing of Canvas is controlled by code at the JS layer, it also has a great advantage over DOM in terms of flexibility.

3. Overcome the performance difficulties of spreadsheet technology

Since the development of electronic form, its convenience and immediacy have deeply affected people's life. Microsoft believes that 1 in 5 adults in the world uses Excel (from "Recent Developments in Microsoft Excel", September 2017). With the development of Internet technology, spreadsheets combined with online systems have also become the preferred solution for most companies to present and analyze data, and play a huge role.

In actual business scenarios, web forms not only display data, but also have complex and exquisite styles and cumbersome and flexible operations to help developers obtain and integrate data more quickly.

Combined with the Canvas and DOM working mechanisms analyzed above, if the amount of data is not large, the performance difference between the two will not be obvious when the browser draws the spreadsheet.
However, if in industries such as industrial manufacturing, financial accounting, etc., the spreadsheets used are often millions of rows, the browser not only needs to render the cell content, but also needs to involve rich data processing, which will affect the front-end performance. Great challenge.

When the traditional DOM is rendered, if you perform operations such as updating and scrolling, you need to constantly destroy and create the DOM, which invisibly increases a lot of invalid calculations, which can easily cause rendering problems such as page freezes.
With canvas drawing, there will be no repeated creation and destruction of DOM operations, breaking many restrictions on UI by DOM elements, and at the same time, it can also draw more types of UI elements, such as linear and special graphics.

At present, front-end form controls that use Canvas technology to draw canvas have appeared in the industry.
In the process of drawing with canvas, the mechanism of double-cache canvas is also introduced, and the theme layer that is not easy to change is drawn in the cache canvas. When rendering occurs, only the subject layer in the cache canvas needs to be cloned. Drawing on the main canvas and attaching decorative layer elements, this "two swords" form greatly optimizes the drawing performance of the spreadsheet.

Online demo experience pure front-end form control: https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html