When does DOM overflow occur?

Question

What types of actions will cause payment for a web page using the DOM?

There seem to be different points of view. According to http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/ , this happens

• When you add or remove a DOM node.
• When applying style dynamically (for example, element.style.width = "10px").
• When you retrieve a dimension that needs to be calculated, such as referring to offsetWidth, clientHeight, or any computed CSS value (via getComputedStyle () in DOM-compatible browsers or currentStyle in IE).

However, according to http://dev.opera.com/articles/view/efficient-javascript/?page=3 , triggering of triggers occurs only when the reflow action has already been executed in the queue.

Does anyone have any ideas?

Answer 1

Both articles are correct. It is safe to assume that whenever you do something that may reasonably require that the sizes of the elements in the DOM are calculated, you will activate the payment.

In addition, as far as I can tell, both articles say the same thing.

The first article says that reflow occurs when:

When you retrieve a dimension that needs to be calculated , for example access to offsetWidth , clientHeight, or any computed CSS value (via getComputedStyle () in DOM-compatible browsers or currentStyle in IE), while DOM changes are queued so that they were made.

The second article says:

As mentioned earlier, the browser can cache several changes for you and swim only once when all these changes have been made. However, note that measuring the dimensions of an element will force it to pay so that the measurements are correct. Changes may or may not be explicitly repainted, but the reflex itself must still happen behind the scenes.

This effect is created when measurements are taken using properties such as offsetWidth , or using methods such as getComputedStyle . Even if the numbers are not used, just using any of them, while the browser is still caching the changes, will be enough to trigger a hidden recount. If these measurements are repeated repeatedly, you should consider them only once and save the result, which can then be used later.

I believe this means the same thing they said earlier. Opera will try its best to cache values ​​and not overpay for you, but you should not rely on its ability to do this.

In all senses and purposes, simply believe what they both say when they say that all three types of interactions can cause payment.

Greetings.

Answer 2

Take a look at the section “Processing rendering initiated by accessing properties” “Understanding the rendering behavior of Internet Explorer” , where the following code in IE will cause the rendering.

function askforHeight () { $("#lower").height(); } 

Answer 3

 document.body.style.display = 'none'; document.body.style.display = 'block'; 

This often solves these obscure layout errors.