From ab85026b1235975f4d38eba7b77e485efbb52e51 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Sat, 15 Oct 2011 18:57:12 -0400 Subject: [PATCH 1/2] Fix issue #22, as well fixing the title and beefing up the description to the solutions --- content/performance/append-outside-loop.md | 37 +++++++++++++++------- 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/content/performance/append-outside-loop.md b/content/performance/append-outside-loop.md index c59c992f..b33fef4d 100644 --- a/content/performance/append-outside-loop.md +++ b/content/performance/append-outside-loop.md @@ -1,34 +1,47 @@ --- chapter : performance section: 0 -title: Cache Length During Loops +title: Append Outside of Loops attribution: jQuery Fundamentals tags: performance --- -Touching the DOM comes at a cost; if you're adding a lot of elements to the -DOM, do it all at once, not one at a time. +Touching the DOM comes at a cost; if you're appending a lot of elements to the +DOM, you will want to append them all at once, rather then one at a time. This is common problem when appending elements within a loop. - // this is bad +
$.each(myArray, function(i, item) { - var newListItem = '
  • ' + item + '
    • '; - $('#ballers').append(newListItem); + var newListItem = '
  • ' + item + '
    • '; + $('#ballers').append(newListItem); }); +
    - // better: do this +One common technique is to leverage a document fragment. During each iteration of the loop, you append the element to the fragment rather than the DOM element. After the loop, just append the fragment to the DOM element. + +
    var frag = document.createDocumentFragment(); - $.each(myArray, function(i, item) { - var newListItem = '
  • ' + item + '
    • '; - frag.appendChild(newListItem); + $.each(myArray, function (i, item) { + var newListItem = document.createElement("li"); + var itemText = document.createTextNode(item); + newListItem.appendChild(itemText); + frag.appendChild(newListItem); }); + $('#ballers')[0].appendChild(frag); +
    - // or do this +Another technique, which is quite simple, is to build up a string during each iteration of the loop. After the loop, just set the html of the DOM element to that string. + +
    var myHtml = ''; $.each(myArray, function(i, item) { - html += '
  • ' + item + '
    • '; + myHtml += '
  • ' + item + '
    • '; }); + $('#ballers').html(myHtml); +
    + +There are of course other techniques you could certainly test out; a great way to test the performance of these is through a site called [jsperf](http://jsperf.com). This site allows you to benchmark each technique and visually see how it performs across all the browsers. From b78c984dcf48853127eb6d4d95b7d33414047e10 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Sat, 15 Oct 2011 18:57:12 -0400 Subject: [PATCH 2/2] Fix issue #23, as well fixing the title and beefing up the description to the solutions --- content/performance/append-outside-loop.md | 37 +++++++++++++++------- 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/content/performance/append-outside-loop.md b/content/performance/append-outside-loop.md index c59c992f..b33fef4d 100644 --- a/content/performance/append-outside-loop.md +++ b/content/performance/append-outside-loop.md @@ -1,34 +1,47 @@ --- chapter : performance section: 0 -title: Cache Length During Loops +title: Append Outside of Loops attribution: jQuery Fundamentals tags: performance --- -Touching the DOM comes at a cost; if you're adding a lot of elements to the -DOM, do it all at once, not one at a time. +Touching the DOM comes at a cost; if you're appending a lot of elements to the +DOM, you will want to append them all at once, rather then one at a time. This is common problem when appending elements within a loop. - // this is bad +
    $.each(myArray, function(i, item) { - var newListItem = '
  • ' + item + '
    • '; - $('#ballers').append(newListItem); + var newListItem = '
  • ' + item + '
    • '; + $('#ballers').append(newListItem); }); +
    - // better: do this +One common technique is to leverage a document fragment. During each iteration of the loop, you append the element to the fragment rather than the DOM element. After the loop, just append the fragment to the DOM element. + +
    var frag = document.createDocumentFragment(); - $.each(myArray, function(i, item) { - var newListItem = '
  • ' + item + '
    • '; - frag.appendChild(newListItem); + $.each(myArray, function (i, item) { + var newListItem = document.createElement("li"); + var itemText = document.createTextNode(item); + newListItem.appendChild(itemText); + frag.appendChild(newListItem); }); + $('#ballers')[0].appendChild(frag); +
    - // or do this +Another technique, which is quite simple, is to build up a string during each iteration of the loop. After the loop, just set the html of the DOM element to that string. + +
    var myHtml = ''; $.each(myArray, function(i, item) { - html += '
  • ' + item + '
    • '; + myHtml += '
  • ' + item + '
    • '; }); + $('#ballers').html(myHtml); +
    + +There are of course other techniques you could certainly test out; a great way to test the performance of these is through a site called [jsperf](http://jsperf.com). This site allows you to benchmark each technique and visually see how it performs across all the browsers.