JS Prevent div layout Scrolling when flashing solution _javascript tips

The example of this article describes the JS Prevent div layout Scrolling flashing method, share for everyone to reference. The specific methods are as follows:

Recent touches to page performance, there are a lot of subtle and original content, such as browser rendering. The information is very much, so choose some to do the festival translation, the memo.
"Layout Bump" occurs when JavaScript writes and reads the DOM multiple times, causing document rearrangement (reflow–the process of constructing a render tree

Copy Code code as follows:

From a DOM tree1).
Read
var H1 = Element1.clientheight;
Write (layout void)
Element1.style.height = (H1 * 2) + ' px ';
Read (trigger layout)
var h2 = Element2.clientheight;
Write (layout void)
Element2.style.height = (H2 * 2) + ' px ';
Read (trigger layout)
var h3 = Element3.clientheight;
Write (layout void)
Element3.style.height = (H3 * 2) + ' px ';

When the DOM is written, the layout is voided and needs to be rearrange at some point in time. But the browser is lazy, it wants to wait until the current operation (or frame) before the end of the rearrangement.
However, if we read the geometric values from the DOM before the end of the current operation (or the frame), we force the browser to rearrange the layout in advance, which is called "Forced sync Layout" (forced synchonous layout), which can kill the performance.
In modern desktop browsers, the side effects of layout bumps may not be obvious, but on low-end mobile devices, the problem is serious.

Quick fixes

In an ideal world, if we simply rearrange the order of code execution, we can read the DOM in batches and write the DOM in bulk. This means that the document needs to be rearrange once.

Copy Code code as follows:

Read
var H1 = Element1.clientheight;
var h2 = Element2.clientheight;
var h3 = Element3.clientheight;
Write (layout void)
Element1.style.height = (H1 * 2) + ' px ';
Element2.style.height = (H2 * 2) + ' px ';
Element3.style.height = (H3 * 2) + ' px ';
Document rearrangement at end of frame

What about the real world?

It's not that simple in reality. In large programs, where code is spread everywhere, there is such a dangerous dom. We can't easily (and obviously shouldn't) rub our beautiful, decoupled code into pieces, just to control the order of execution. So in order to optimize performance, how do we read and write to do batch processing?

To meet Requestanimationframe.

Window.requestanimationframe arranges a function to execute in the next frame, similar to Settimout (FN, 0). This is useful because we can use it to schedule all of the DOM writes to be executed together in the next frame, and the DOM reads are executed synchronously in the current order.

Copy Code code as follows:

Read
var H1 = Element1.clientheight;
Write
Requestanimationframe (function () {
Element1.style.height = (H1 * 2) + ' px ';
});
Read
var h2 = Element2.clientheight;
Write
Requestanimationframe (function () {
Element2.style.height = (H2 * 2) + ' px ';
});
......

I hope this article will help you with your JavaScript based Web programming.