

Rendering Backbone Collections with DocumentFragment - elving
http://elving.me/post/48040344160/rendering-backbone-collections-with-documentfragment

======
Aqueous
You could render off-screen in a fragment or couldn't you just make an element
using the view's "make" convenience function, append all objects to that, and
then append that to the view? Does this require the same reflows?

~~~
trebor
Technically, even if you render outside the visible area you still incur
reflows/repaints. A fragment isn't rendered at all, but lets you build the
entire collection as HTML once then do just one reflow/repaint to add the
whole fragment to the DOM.

~~~
wwarnerandrew
What about using something like jquery detach? Then you could, when rendering,
detach the element, render all the content, subviews, and re-append it. That
shouldn't trigger reflows, right?

~~~
trebor
Correct. So far as I know, the way jQuery detach works is to remove it from
the DOM and then return the individual element. The element could act as a
fragment, because it can contain children, and then be reappended to the DOM.

------
nathanstitt
If document reflow is an issue (which it certainly is for a large collection
like the example), why not just render all the subview's el all at once:
<http://jsfiddle.net/HbzbS/>

I'd be interested in how this method bencharks relative to the example, I
suspect it _should_ perform better though.

~~~
jabbernotty
I would like to point out that after visiting that link and allowing
jsfiddle.net's scripts, my browser locked. Eventually I had to do a hard
reset. This is on FF 20, Ubuntu 12.04.2 LTS.

Edit: This is reproducable, but this time I killed firefox pretty soon. How
can javascript hang a browser?

~~~
nathanstitt
Weird, I just tested it successfully under both FF 20 & Chrome 26.0.1410.43
(on os x). I've also used that technique in production code (but not with a
list that large) and haven't had any problems with it thus far.

~~~
jabbernotty
It works without problems in Chromium, on that same system.

