DOM vs innerHTML Performance Test

This web page tests the performance of adding content via JavaScript using standard Document Object Model (DOM) API methods, and the innerHTML property.

Click the Run Test button to execute the performance test. Note: This will take anywhere between 10 - 30 seconds depending on your browser and the speed of your computer. The following performance tests will be run:

  1. innerHTML: The innerHTML of a node is copied into a string, then set on a second node.
  2. innerHTML: The innerHTML of a node is directly set to the innerHTML of a second node.
  3. DOM: The child nodes of a parent node are individually cloned and appended to a second node.
  4. DOM: The parent node used by the previous example is cloned, along with its children, and appended to a second node.
  5. innerHTML: A large string of HTML is generated and set as the innerHTML of a node.
  6. DOM: Content is generated using DOM API invocations.
  7. DOM: Same as above, but slightly more efficient.
  8. DOM: Same as above, but more efficient.
  9. DOM: Content is generated using DOM API invocations and appended to a fragment, which is then appended to a node.

[ parent node #1: you can ignore this ]
[ parent node #2: you can ignore this ]