Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Render
(version: 0)
Benchmark.js
Comparing performance of:
DOM vs Canvas
Created:
9 years ago
by:
Guest
Go to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
DOM
Canvas
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year 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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=617591" width="100%" height="500px"></iframe>
Canvas
337/s
DOM
65/s
View exact numbers
Test name
Executions per second
✓
Canvas
337 Ops/sec
DOM
65 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
querySelector vs querySelectorAll vs getElementsByClassName vs querySelector (ID) vs getElementsByID 20x
queryall vs classname
Comments
Confirm delete:
Do you really want to delete benchmark?