Skip to main content

Bug Tracker

Side navigation

#9903 closed enhancement (worksforme)

Opened July 25, 2011 11:16AM UTC

Closed July 25, 2011 12:38PM UTC

Last modified July 25, 2011 12:58PM UTC

Slow DOM manipulation because .append() can't use documentFragments

Reported by: magentix@gmail.com Owned by:
Priority: low Milestone: None
Component: manipulation Version: 1.6.2
Keywords: Cc:
Blocked by: Blocking:
Description

Most of us know you should touch the DOM as little as possible, especially within loops. Now, suppose you have a data set that is used to build event handlers for, let's say, list items.

In 'regular JavaScript', you'd create a documentFragment and add your list items with their handlers to it within a loop. After the loop, you'd attach the fragment to the DOM.

Now in jQuery, you can only do this if you concatenate a HTML string within the loop and then add that string to the DOM with .append(). That's all dandy, until you need to add event handlers to the newly created HTML.

I've opened a ticket in the past about how .append() should be enhanced to accept documentFragments, but that was closed down due to bad use case.

Therefore I've created a jsFiddle with three cases in it:

  • current situation
  • preferred situation
  • current workaround

Please take a look at: http://jsfiddle.net/cbEEW/1/

Attachments (0)
Change History (2)

Changed July 25, 2011 12:38PM UTC by dmethvin comment:1

resolution: → worksforme
status: newclosed

There are several ways to do this that don't require a complete reengineering of jQuery core to make it documentFragment-friendly. I've updated that Fiddle to show two ways to do it.

http://jsfiddle.net/dmethvin/cbEEW/2/

Changed July 25, 2011 12:58PM UTC by rwaldron comment:2

component: unfiledmanipulation
priority: undecidedlow

In addition to Dave's comments above, jQuery.fn.append() already uses documentFragments internally and will cache copies of all elements that will allow it safely, to reuse later.