Js solution to prevent the layout from flashing when the DIV layout is rolling, and the layout of jsdiv is flashing

Js solution to prevent the layout from flashing when the DIV layout is rolling, and the layout of jsdiv is flashing

This article provides examples to illustrate how js can prevent the layout from flashing when the DIV layout is rolling. We will share it with you for your reference. The specific method is as follows:

There are a lot of subtle and original content, such as browser rendering. There are a lot of materials, so I chose some for saving and forgetting.
When JavaScript is written and read to the DOM multiple times, "layout bumps" will occur, causing reflow-the process of constructing a render tree

Copy codeThe Code is 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 extinct and needs to be rearranged at a certain time point. However, the browser is very lazy. It wants to re-arrange it before the current operation (or frame) ends.
However, if we read the geometric values from the DOM before the end of the current operation (or frame), we force the browser to rearrange the layout in advance, this is the so-called forced synchronization layout (forced synchonous layout), which requires performance.
On Modern desktop browsers, the side effects of layout bumps may not be obvious, but on low-end mobile devices, the problem is very serious.

Quick Solution

In an ideal world, we can simply rearrange the code execution sequence to read and write DOM in batches. This means that the document only needs to be rearranged once.

Copy codeThe Code is 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 ';
// The document is rearranged at the end of the frame

What about the real world?

In reality, it is not that simple. In large programs, code is spread everywhere, and all of them have such dangerous DOM. We can't easily (and obviously shouldn't) Merge our beautiful and decoupled code to control the execution sequence. In order to optimize performance, how can we batch process reading and writing?

To get to know requestAnimationFrame

Window. requestAnimationFrame schedules a function to be executed in the next frame, similar to setTimout (fn, 0 ). This is very useful because we can use it to schedule all DOM write operations to be executed in the next frame, and the DOM read operations will be executed in the current sequence.

Copy codeThe Code is 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 javascript-based web programming.

How can I use JS to disable scroll bars of window objects?

The following code is passed in IE, FF, OPERA, and other browsers ...... Hope to help you ~~
<Div id = "objDiv" style = "width: 400px; height: 300px; background: red"> move the mouse up the scroll bar pulley to see it </div>
<Script type = "text/javascript">
Var scrollFunc = function (e ){
E = e | window. event;
If (e & e. preventDefault ){
E. preventDefault ();
E. stopPropagation ();
} Else {
E. returnvalue = false;
Return false;
}
}
Var obj = document. getElementById ("objDiv ");
If (obj. addEventListener &&! Window. opera)
Obj. addEventListener ('dommousescroll', scrollFunc, false );
Else
Obj. onmousewheel = scrollFunc;
</Script>
<Script>
// Create 500 line breaks <br> and test it!
For (var I = 0; I <500; I ++ ){
Document. write ("<br> ");
}
</Script>

The js effect of a text scroll to the left should be DIV layout, not table

No ..