createDocumentFragment() used in a for loop

Question

Is createDocumentFragment() doing anything in the code below?

I\'m trying to adapt this code. I\'m not sure how it works and the for loo

Answer 1

It looks to me like the fragment is being used as a way to store the original dom of results_table. The for loop then makes changes to the results_table. Once that is done, the fragment (containing the original table) is appended to the end of results_table.

It's basically putting the new search results at the top of the table and moving the the old results to the bottom, so both the fragment and the for loop do something.

Answer 2

The purpose of the document fragment in this code is to temporarily remove the table from the DOM.

1. move table from DOM to fragment
2. perform operations on table
3. move the table from fragment back to DOM

This approach uses only two DOM manipulations for the fragment (steps 1 and 3). It lets us skip all the re-flows that would have been required for Step 2.

Each DOM manipulation operation (e.g. adding a row to an in-DOM table) causes a page re-flow (the web-browser re-calculates, and re-draws the page). When performing multiple DOM manipulation operations sequentially (e.g. adding multiple rows), it is unnecessary to have a re-flow after each operation. Only after the entire process, the page should re-flow. In order to achieve this, we have to temporarily detach the table from the DOM, by moving it into a fragment. Elements that are off-DOM don't cause re-flows.

Answer 3

Yes, it's doing something: a performance optimization.

The elements in the HTML document are kept in a tree data structure, which you can access via the DOM interface (ie methods like document.getElementById(id) or document.getElementsByClassName(). Each time this tree is manipulated, ie when you insert, remove or modify nodes via Javascript code, the browser's rendering engine must relayout boxes (this is also called a reflow) depending on the rules defined with CSS, and repaint the visible portion of the tree on the browser's window.

In your case, you have to add a fixed number of rows to a table. When the loop starts, you already know that you have to add N rows to the table. If you simply add rows to the DOM element, every time you call table.appendChild(row) the browser will measure, layout and paint the page, and this happens at most N times (actually browsers throttles these costly operations, however this is not required by any spec, so we can assume for learning purposes that every time you append, the browser invalidates the tree and repaints).

All of this processing is unneeded: we don't want the browser to visibly grow the table one row at a time, we simply want to put N rows in the table, in one single shot, kind of a transaction. DocumentFragment exists for this exact purpose: when you manipulate a fragment's children, the browser doesn't measure and layout anything. This only happens when you finally append the fragment to the main DOM. In our imaginary and simplified browser, the paint routines are called exactly once, instead of N times.

So what your script does is creating a fragment, removing the table from the main DOM, adding the node to the fragment, manipulating the table while it's attached to the fragment, and finally adding the whole fragment back to the main DOM, when children are finally measured, laid out and painted. Note that the code doesn't explicitely removes the table from the DOM, but this is what the Node.appendChild(node) method does when the child node already belongs to some hierarchy:

Adds a node to the end of the list of children of a specified parent node. If the node already exists it is removed from current parent node, then added to new parent node.

You can read more about DocumentFragment on MDN.