Rendering Techniques for Browser Visualizations: DOM, SVG, Canvas, WebGL, and WebGPU

Preface DORAVIS visual screen editor is a browser‑based visual platform that supports multiple chart implementations, including ECharts (built on zrender), Mapbox/leaflet maps, and custom DOM, video, and image components. The article summarizes four rendering methods: DOM, SVG, Canvas2D, and WebGL.

DOM Method The DOM approach is essentially standard HTML+CSS rendering. While it allows easy event handling and rapid development of simple charts, it suffers from performance overhead due to HTML/CSS parsing, layout, and repaint, and becomes cumbersome for non‑rectangular shapes such as circles or polygons.

SVG Method SVG is an XML‑based vector format offering scalable, resolution‑independent graphics with built‑in shapes (lines, circles, polygons) and CSS styling. It simplifies drawing irregular shapes and integrates well with HTML event systems, but complex scenes can generate many DOM nodes, affecting performance. SVG can also be rendered onto a Canvas for better speed.

Canvas Method Canvas provides a low‑level 2D drawing context where developers issue drawing commands directly. It bypasses layout and style calculations, offering higher performance for dense graphics, though it lacks built‑in UI components and requires manual handling of interactions. Canvas size limits vary by browser (e.g., up to 16384 × 16384 in Chrome) and can be combined with libraries such as Fabric.js or PixiJS.

WebGL Method When Canvas2D performance is insufficient—e.g., for massive numbers of dynamic objects, pixel‑level effects, or 3D rendering—WebGL offers direct GPU access via a JavaScript API derived from OpenGL. It involves creating a WebGL context, compiling shaders (vertex and fragment), uploading buffers, and letting the GPU rasterize the scene. WebGL enables high‑performance 3D graphics but requires more complex setup; libraries like Three.js and Babylon.js can simplify development.

Other Technologies WebGPU, proposed since 2017, aims to replace WebGL with a more modern, compute‑friendly API, separating shader control from the Canvas and enabling GPGPU workloads in browsers (e.g., via Web Workers or WebAssembly). WebRTC is mentioned as a low‑latency pixel‑streaming solution for transmitting rendered frames between devices.

References https://time.geekbang.org/column/article/252076, https://blog.csdn.net/u013850277/article/details/103746615, https://juejin.cn/post/7090921455893872647