Run results for: Render

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

Browser: Chrome 60

Operating system: Mac OS X 10.12.6

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
DOM	9.7 Ops/sec
Canvas	12.4 Ops/sec

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();

DOM

Canvas