Rendering Backbone Collections with DocumentFragment | Hacker News Reader

Rendering Backbone Collections with DocumentFragment

elving.me

26 pointselving10 comments

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?

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.

This --^

Great answer!

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?

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.

Right, and even better than a document fragment since fragments have both unusual semantics and API limitations that normal elements do not (e.g., no getElementsByTagName or getElementById).

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.

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?

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.

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

Reply on news.ycombinator.com