5

I need to get the size of many small <div>-Elements, before inserting them into the DOM.

Currently, I'm adding them temporarily, getting their offsetWidth and offsetHeight, then I remove them again:

document.body.appendChild(child);
size = [child.offsetWidth, child.offsetHeight]
document.body.removeChild(child);

The problem is, that this is super-slow, because it triggers a reflow for every <div> being measured.

Do you have any idea how to speed this up?

user2033412
  • 1,950
  • 2
  • 27
  • 47
  • 1
    could you use a dummy div in memory to contain the new element? also, [related](http://stackoverflow.com/questions/39393141/is-it-possible-to-access-the-current-scaling-factor-of-a-width-element-by-java) Q/A – rlemon Oct 13 '16 at 12:11
  • Could you please elaborate? I don't understand. – user2033412 Oct 13 '16 at 12:15
  • Can you explain a little more about why you feel the need to do this? You say "many small divs" so I assume they're all different sizes. What is the size based on? – Bill Criswell Oct 13 '16 at 12:17
  • The size is based on the content (text). All texts are different. – user2033412 Oct 13 '16 at 12:17
  • 2
    keep one `
    ` far off-screen, populate that element with the content, retrieve its dimensions, clear it out for the next content and continue until all sizes are retrieved? I suspect that this will still trigger a reflow, however, but it might not be quite so slow - or CPU intensive - since you're not creating and recreating new `
    ` elements time after time.
     – David Thomas Oct 13 '16 at 12:19
  • hrm, seems my assumptions were wrong -- but it might be worth checking if display: none; will cause a reflow -- it isn't in the render tree. https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Render_tree_construction – rlemon Oct 13 '16 at 12:25
  • Changing the `display`-property to `none` will collapse the element, hence `offsetWidth` and `offsetHeight` will be 0. – user2033412 Oct 13 '16 at 12:30
  • I like the suggestion from the Wendy's guy in that case. You saying "div" lead me to believe they'd be block elements. – Bill Criswell Oct 13 '16 at 12:40
  • You can't prevent a reflow. The reflow Do exactly what you want : measure stuff in your page. If you have lots of elements, it's probably better to add all your divs to the page, then measure them. The browser will make one big reflow for the first div. But the performance gain may depend on the number of divs. – pleup Oct 13 '16 at 19:48

1 Answers1

1

In case of someone is still looking for the answer (as I was) of how to get the bounds of the with no reflow, use IntersectionObserver and its boundingClientRect interface.

You can read more here https://toruskit.com/blog/how-to-get-element-bounds-without-reflow

Andrew
  • 11
  • 1
  • 2
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. [link-only-answers](https://meta.stackoverflow.com/tags/link-only-answers/info) – Sfili_81 Jun 28 '21 at 13:29