The DocumentFragment interface represents a part (or paragraph) of a document. Rather, it represents one or more contiguous Document nodes and all their descendant nodes.
DocumentFragment nodes do not belong to the document tree, and the inherited parentNode property is always null.
But it has a special behavior that makes it very useful, that is, when a DocumentFragment node is requested to be inserted into the document tree, not the DocumentFragment itself, but all of its descendant nodes are inserted. This makes DocumentFragment a useful placeholder for temporarily holding nodes that are inserted into the document at a time. It also facilitates cutting, copying, and pasting of documents.
---- W3CSCHOLL
requestAniminationFrame
The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.
------JAVASCRIPT MDN
Last month, we received a request to sort and display the data in the list according to the current position on the front end. Before this requirement, the list display page used paging, and the user scrolled down to update the data, but it needed to use front-end sorting, obviously, paging could not be used. At that time, I directly obtained 110+ data and then stuffed it into the container. . . Positioning + calculating distance + sorting + rendering, the performance is that it takes about 3 seconds to display the page. Luckily---the test didn't reflect the problem.
I saw this article on the Nuggets today, and I was enlightened.
Leaving the article, dictation:
In order to solve a large number of circular DOM operations at one time, when rendering, first create a DocumentFragment, put the number of bars in the visible area, stuff it into the container, and render first; the rest of the data is scrolled down on the page---the page is reloaded When drawing, repeat the last operation until the data is rendered. requestAnimationFrame is a window's own function that is automatically triggered when the page is redrawn, whether it is initial rendering from zero, or scrolling the current screen data to redraw.
After reading it, it's not a black technology, but my foundation is still poor. I didn't expect this thing to be used like this.