Geek Answers Handbook

"Offsite" copy of the DOM for manipulation

Recently I watched a video by Nicholas Zakas about high-performance scenarios. This is a question about re-melting and repainting. he says that it’s bad to constantly re-melt, which moves and changes the layout, changes the size, etc.

I answered the question about switching from one div to another - what I did to “spill” overflowing content to another div:

  • measure the height of the inner and outer container (I am currently using jQuery.height ())
  • check that the internal value is greater than the external
  • if less (no spill), end script
  • if larger (spill), enter the last character in the inner container and add the following div
  • return the text to the inner container (calling for payment - recalculating the height)
  • return to step 1

The problem is that I delete and add characters and measure the height of the spilled container for the “symbol popped out” of the container. this is re-rendering and iteration, which makes it very slow at times.

Is there a way to use the JS copy of the DOM for control, height checking, etc.? what I'm looking for is like cloning a page. I heard about DOM fragments, but this is just a container for nodes before putting them in the DOM.

+2
source share
1 answer

When you are thinking of making a copy of the DOM, the following methods may be helpful:

These methods are very useful for DOM structures, but unfortunately they do not return useful values ​​for measurements.

Elements must be visualized. This can be done by creating an <iframe> element and inserting a document (nodes) into it. For this purpose, you can use the previously mentioned methods: Create an effective copy (part) of the document and paste the document in the iframe.

It may also be useful to insert the <base> element in the <head> so that the URLs and images are correctly resolved.

+1
source

More articles:


All Articles