Rendering Backbone Collections with DocumentFragment
1–10 of 11 posts
Re: Rendering Backbone Collections with DocumentFragment
#2You 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?
Re: Rendering Backbone Collections with DocumentFragment
#3You 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.
Re: Rendering Backbone Collections with DocumentFragment
#4If 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.
Re: Rendering Backbone Collections with DocumentFragment
#5You 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!
Re: Rendering Backbone Collections with DocumentFragment
#6You 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.
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?
Re: Rendering Backbone Collections with DocumentFragment
#7If 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?
Re: Rendering Backbone Collections with DocumentFragment
#8Earlier quoted context omitted.
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.
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.
Re: Rendering Backbone Collections with DocumentFragment
#9Earlier quoted context omitted.
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.
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?
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).
Re: Rendering Backbone Collections with DocumentFragment
#10If 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.