Is the DOM GUARANTEED function provided to lock when executing a single (synchronous) function?

Question

DOM locking is something that many people unfamiliar with the strictly strict single-threaded JavaScript synchronous execution model will find out about the hard way, and this is usually what we want to work somehow (using timeouts, web workers, etc.) .d.). All is well and good.

However, I would like to know if blocking the actual user-visible rendering, which you really can rely on. I am 90% sure that this is de facto in most browsers, but I hope this is not just a happily sequential crash. I cannot find any final statements from the DOM specifications or even vendor documentation such as MDM.

I am a little worried that although changes to the DOM are not really visible on the page, the internal DOM geometry (including CSS transforms and filters) does update during synchronous execution. For example:

console.log(element.getBoundingRect().width); element.classList.add("scale-and-rotate"); console.log(element.getBoundingRect().width); element.classList.remove("scale-and-rotate"); 

... will indeed report two different widths, although the page does not seem to blink. Synchronized waiting after adding a class (using the while loop) also does not make temporary changes visible. Running a timeline graph in Chrome shows that the inner paint and re-coloring are the same, which makes sense ...

I am worried that, without a specific reason, some browsers, such as those dealing with low-power mobile processors, may actually reflect these internal calculations in a user-visible layout during the execution of this function and, therefore, in an ugly "flash" during such temporary operations. So, more specifically, I ask: do they have a specific reason not to do this?

(If you're wondering why I care about this at all, I sometimes need to measure calculated measurements with getBoundingRect for elements in a certain state in order to plan intervals or animations or other similar things, without inserting them into it first point out or animate them ... )

Answer 1

In concurrency related Javascript, there is nothing but de facto. JS just does not define a concurrency model. All happy incident or years of consensus.

However, if your function does not make any calls in such strange things like XMLHttpRequest or "alert" or something like that, you can consider it as single-threaded without interruptions.

Answer 2

According to various sources, getting the position or size of a DOM element will redraw the output if necessary, so the return values ​​are correct. Essentially, reading the element's offsetHeight element has become a forced redraw method, as reported by Alexander Skutin and Daniel Norton .

Paul Irish provides a list of several actions that cause redrawing or re-melting. Among them are these methods and properties of the element metric:

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight,
• elem.offsetParent elem.clientLeft, elem.clientTop, elem.clientWidth,
• elem.clientHeight elem.getClientRects (), elem.getBoundingClientRect ()

Stoyan Stefanov describes the strategies used by browsers to optimize reviewing (for example, alternating DOM changes and their implementation in batches), and adds the following remark

But sometimes a script can prevent the browser from optimizing overpayments and cause it to drop the queue and execute all change packets. This happens when you request style information, such as

• offsetTop, offsetLeft, offsetWidth, offsetHeight
• scrollTop / Left / Width / Height
• clientTop / left / width / height
• getComputedStyle () or currentStyle in IE

All of the above, in fact, request information about the style of a node, and at any time when you do this, the browser should provide you with the most relevant value. To do this, he needs to apply all the planned changes, clear the queue, bite the bullet and complete the payment.