Offline operationdomWhat is the

Offline manipulation of the DOM means that when major changes are made to a DOM node, we take the element out of the document flow, then manipulate it, and finally put the element back into the document flow.

Offline operationdomWhat are the practices of

  1. changedisplayProperty to temporarily remove an element from the document flow and then restore it.
dom.style.display = 'none'; Dom.style. display = 'block'Copy the code
  1. throughcreateDocumentFragment, create a document fragment, and add the document fragment to the document flow once after the operation.
Const fragments = document. CreateDocumentFragment () / / a series of operations on the fragments document.getElementById('list').appendChild(fragment)Copy the code
  1. By creating a copy on the node you want to operate on, then operating on the copy, and finally replacing it
Const ul = document.getelementById ('list') const Clone = ul.clonenode (true ul.parentNode.replaceChild(clone, ul)Copy the code

other

Q: Is the step of taking elements out of the document flow necessary? Wouldn’t it be more troublesome if elements left the flow caused extensive redrawing and rearranging of the page, or would it be better to wrap a fixed width and height div around elements that need to leave the flow during layout to avoid rearranging the entire page?

A: Each step of the document can result in a redraw or rearrangement without leaving the document flow, but using offline DOM manipulation allows for only one rearrangement after the operation is complete.