Benchmark: Render - MeasureThat.net

HTML Preparation code:

<div id="test"></div>

Tests:

DOM
class Line { constructor(parent) { const line = parent.appendChild(document.createElement("pre")); line.style.display = "inline-block"; line.style.margin = "0"; this.element = line; } get width() { return this.element.offsetWidth; } get height() { return this.element.offsetHeight; } get text() { return this.element.textContent; } set text(value) { this.element.textContent = value; } } class Box { constructor(container, characters) { this.container = container; this.container.style.height = "10rem"; this.characters = characters; // TODO: Update only needed parts of box, rather than replacing the entire shape. window.addEventListener("resize", () => this.render()); } render() { this.container.innerHTML = ""; let currentLine = new Line(this.container); // Top line of the box. currentLine.text += this.characters.corner; while(currentLine.width < this.container.scrollWidth) { currentLine.text += this.characters.horizontal; } currentLine.text = currentLine.text.slice(0, -1) + this.characters.corner; // Middle portion of the box. while(this.container.offsetHeight === this.container.scrollHeight) { currentLine = new Line(this.container); currentLine.text = this.characters.vertical; while(currentLine.width < this.container.scrollWidth) { currentLine.text += " "; } currentLine.text = currentLine.text.slice(0, -1) + this.characters.vertical; } this.container.removeChild(this.container.lastChild); // Bottom line of the box. currentLine = new Line(this.container); currentLine.textContent = this.characters.corner; while(currentLine.width < this.container.scrollWidth) { currentLine.text += this.characters.horizontal; } currentLine.text = currentLine.text.slice(0, -1) + this.characters.corner; } } const test = new Box(document.getElementById("test"), { vertical: "|", horizontal: "-", corner: "+" }); test.render();
Canvas
const Ruler = { measureText(text, font) { const canvas = Ruler.canvas || (Ruler.canvas = document.createElement("canvas")); const context = canvas.getContext("2d"); context.font = font; return Math.ceil(context.measureText(text).width); } } class Box { constructor(container, characters) { this.container = container; this.container.style.height = "10rem"; this.characters = characters; this.container.style.whiteSpace = "pre"; // TODO: Update only needed parts of box, rather than replacing the entire shape. window.addEventListener("resize", () => this.render()); } get width() { return this.container.scrollWidth; } get height() { return this.container.scrollHeight; } get text() { return this.container.textContent; } set text(value) { this.container.textContent = value; } get font() { const containerStyle = window.getComputedStyle(this.container); return `${containerStyle.fontWeight} ${containerStyle.fontSize} ${containerStyle.fontFamily}`; } render() { this.text = ""; const lines = []; let currentLine = this.characters.corner; // First line. while(Ruler.measureText(currentLine + this.characters.corner + "\r\n", this.font) < this.width) { currentLine += this.characters.horizontal; } lines.push(currentLine + this.characters.corner + "\r\n"); // Middle portion. while(parseInt(window.getComputedStyle(this.container).fontSize) * (lines.length + 2) < this.height) { currentLine = this.characters.vertical; while(Math.ceil(Ruler.measureText(currentLine + this.characters.vertical + "\r\n", this.font)) < this.width) { currentLine += " "; } lines.push(currentLine + this.characters.vertical + "\r\n"); } // Last line. currentLine = this.characters.corner; while(Ruler.measureText(currentLine + this.characters.corner + "\r\n", this.font) < this.width) { currentLine += this.characters.horizontal; } lines.push(currentLine + this.characters.corner); this.text = lines.join(""); } } const test = new Box(document.getElementById("test"), { vertical: "|", horizontal: "-", corner: "+" }); test.render();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DOM
Canvas

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Browser/OS: Chrome 140 on Windows

View result in a separate tab

Test name	Executions per second
DOM	64.9 Ops/sec
Canvas	337.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its components.

**Benchmark Overview**

The benchmark is designed to measure the performance of two rendering engines: DOM (Document Object Model) and Canvas. The test cases are written in JavaScript and use various libraries and syntax features to render text-based content on a canvas element or within an HTML document.

**Test Cases**

There are only two test cases:

1. **DOM**: This test case uses the DOM API to render text content within an HTML document. It creates a `Box` class that renders text lines with a specific width and height constraint.
2. **Canvas**: This test case uses the Canvas API to render text content on a canvas element. It also defines a `Box` class, but this time it uses the Canvas API to measure text width and adjust rendering accordingly.

**Options Compared**

The benchmark compares the performance of two different approaches:

1. **DOM Rendering**: This approach renders text content using the DOM API, which is suitable for rendering complex HTML documents.
2. **Canvas Rendering**: This approach uses the Canvas API to render text content, which is optimized for high-performance rendering on modern devices.

**Latest Benchmark Result**

The latest benchmark result shows that:

* The Canvas engine outperforms the DOM engine by a margin of 30% in terms of executions per second (12.44 vs. 9.75).

**Key Insights**

1. **DOM Rendering is Slower**: The DOM API may be slower than the Canvas API due to its overhead and complexity.
2. **Canvas Rendering is More Efficient**: The Canvas API is optimized for high-performance rendering, which results in better performance compared to DOM rendering.
3. **Platform-Specific Results**: The benchmark result is specific to a particular platform (Mac OS X 10.12.6) and device (Chrome 60). The performance difference between the two engines may vary across different platforms and devices.

Overall, this benchmark highlights the importance of choosing the right rendering engine for your application based on its requirements and constraints.

Related benchmarks:

Render (version: 0)

Comparing performance of: DOM vs Canvas

Created: 8 years ago by: Guest

Jump to the latest result

DOM

Canvas

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):