Benchmark: document.write() VS createDocumentFragment

HTML Preparation code:

<iframe id="myIframe">
</iframe>

Script Preparation code:


        Benchmark.prototype.setup = function() {

          
  var _InsertionText = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.";
  
  var ifrm = document.getElementById('myIframe');
  var ifrmDoc = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;

        
  };
          



        Benchmark.prototype.teardown = function() {

          
  while (ifrm.firstchild) {
    ifrm.removeChild(ifrm.childNodes[0])
  }

        
  };

Tests:

document.write
ifrmDoc.document.open(); ifrmDoc.document.write("<p>"); ifrmDoc.document.write(_InsertionText); ifrmDoc.document.write("</p>"); ifrmDoc.document.close();
fragment + innerHTML
var df = document.createDocumentFragment(); ifrmDoc.document.appendChild(df); for (i = 0; i < 500; i++) { df.innerHTML += '<p>test' + i + '</p>'; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
document.write
fragment + innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of MeasureThat.net and explore what's being tested in this specific benchmark.

**Benchmark Description**

The goal of this benchmark is to compare the performance of two approaches for inserting large amounts of HTML content into an iframe: `document.write()` versus creating a `documentFragment`.

**Approaches Compared**

1. **`document.write()`**: This approach involves using the `write()` method on the iframe's document object to insert HTML content directly.
2. **`fragment + innerHTML`**: This approach creates a new `documentFragment`, appends it to the iframe's document, and then uses the `innerHTML` property to append more HTML content to the fragment.

**Pros and Cons of Each Approach**

1. **`document.write()`**:
	* Pros: Simple, straightforward, and widely supported.
	* Cons: Can be slower and less efficient due to the overhead of parsing and rendering the inserted HTML.
	* Potential issue: `document.write()` can cause issues with iframe content being lost or overwritten if not used carefully.
2. **`fragment + innerHTML`**:
	* Pros: More efficient, as only the new content is appended to the fragment, rather than re-parsing the entire document.
	* Cons: Requires creating a new `documentFragment`, which can introduce additional overhead.

**Library Used**

In this benchmark, the `createDocumentFragment()` method from the DOM API is used. This method creates a new `documentFragment` object that can be appended to other documents and then its `innerHTML` property can be used to append content.

**Special JS Feature or Syntax**

There are no specific JavaScript features or syntaxes being tested in this benchmark, aside from using `createDocumentFragment()` which is a standard DOM API method.

**Other Considerations**

When testing performance-critical code like this, other factors besides just the approach itself can impact results. For example:

* The browser's rendering engine and version may affect performance.
* The size of the iframe and the amount of content being inserted can also impact results.
* Other system resources, such as memory and CPU usage, may be affected by the benchmark.

**Alternatives**

If you were to create a similar benchmark, you might consider using different approaches or variations:

* Using `innerHTML` instead of `createDocumentFragment()` for the second approach.
* Inserting content directly into the iframe's document object instead of creating a fragment and appending it.
* Using a different method for inserting content, such as `appendChild()` with a temporary container element.

Keep in mind that the choice of approach will depend on your specific use case and requirements.

Related benchmarks:

document.write() VS createDocumentFragment (version: 0)

Comparing performance of: document.write vs fragment + innerHTML

Created: 6 years ago by: Guest

Jump to the latest result

document.write

fragment + innerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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