Benchmark: div vs svg - MeasureThat.net

Script Preparation code:

var div = document.createElement("div");
const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");

// set width and height
svg1.setAttribute("width", "100");
svg1.setAttribute("height", "100");

var svgText = document.createElementNS("http://www.w3.org/2000/svg", "text");

Tests:

div set text
div.innerText = "Testing, 1 2 3"
svg text
svgText.innerText = "Testing, 1 2 3"

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
div set text
svg text

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:146.0) Gecko/20100101 Firefox/146.0

Browser/OS: Firefox 146 on Linux

View result in a separate tab

Test name	Executions per second
div set text	2729846.5 Ops/sec
svg text	1452913664.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark and explain what's being tested, compared, and the pros/cons of each approach.

**Benchmark Overview**

The benchmark compares two approaches to update the text content of an HTML element: using a `<div>` element versus using an SVG `<text>` element. The tests are designed to measure the performance difference between these two approaches in different JavaScript engines.

**Script Preparation Code**

The script preparation code creates two elements:

1. `var div = document.createElement("div");`: Creates a new `<div>` element.
2. `const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");`: Creates a new SVG `<svg>` element using the `createElementNS` method, which allows us to specify the namespace for the element.

The code then sets the width and height attributes of the SVG element to 100x100 pixels. A new text node is created inside the SVG element: `var svgText = document.createElementNS("http://www.w3.org/2000/svg", "text");`.

**Html Preparation Code**

There is no HTML preparation code provided, which means that the benchmark assumes that the HTML structure is already set up and ready for testing.

**Individual Test Cases**

The benchmark has two test cases:

1. **"div set text"`**: Updates the text content of the `<div>` element using `div.innerText = "Testing, 1 2 3";`.
2. **"svg text"`**: Updates the text content of the SVG `<text>` element using `svgText.innerText = "Testing, 1 2 3";`.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **`<div>` elements:**
	+ Pros:
		- Widely supported by most browsers.
		- Simple to use.
	+ Cons:
		- May have performance issues with large amounts of text content.
		- Limited styling options compared to SVG.
* **SVG `<text>` elements:**
	+ Pros:
		- Offers more advanced styling options and support for multiple fonts and sizes.
		- Can improve performance by reducing the number of DOM mutations.
	+ Cons:
		- Requires additional namespace setup (`createElementNS`).
		- May not be supported by older browsers.

**Library Used**

In this benchmark, the `createElementNS` method is used to create SVG elements. This method is part of the W3C's DOM API and allows developers to create elements in a specific namespace (in this case, the SVG namespace).

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax being tested in this benchmark. The tests focus on comparing two different approaches to update text content.

**Alternatives**

If you're interested in exploring alternative approaches to updating text content, consider the following:

* Using a library like React or Angular, which provide their own DOM management systems and offer improved performance for large-scale applications.
* Leveraging the `textContent` property of DOM elements, which can be more efficient than setting `innerText` directly.

Keep in mind that these alternatives may require additional setup and learning curve, but they can provide significant benefits for complex web applications.

Related benchmarks:

div vs svg (version: 0)

Comparing performance of: div set text vs svg text

Created: 5 years ago by: Guest

Jump to the latest result

div set text

svg text

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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