fragment vs. appendChild vs. innerHTML (v2)

Revision 2 of this benchmark created on

Description

Test which method is fastest to append multiple elements to DOM

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="content">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

<div id="target"></div>

Setup

content = $('#content')[0];
    target  = $('#target')[0];

Teardown


    $('#target').empty();

Test runner

Ready to run.

Testing in
TestOps/sec
documentFragment
df       = document.createDocumentFragment();
df_nodes = content.cloneNode(true);

while (n = df_nodes.firstChild) {
  df.appendChild(n);
}

target.appendChild(df);
ready
appendChild
appendChild = content.cloneNode(true);

while (n = appendChild.firstChild) {
  target.appendChild(n);
}
ready
innerHTML
target.innerHTML = content.innerHTML;
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.