js solution to prevent DIV layout from flashing when scrolling

js solution to prevent DIV layout from flashing when scrolling_javascript skills

WBOY

Release： 2016-05-16 16:32:36

Original

1286 people have browsed it

The example in this article describes the js method to prevent DIV layout from flickering when scrolling, and is shared with everyone for your reference. The specific method is as follows:

The things that I have been exposed to recently about page performance include a lot of subtle and original content, such as browser rendering. There is a lot of information, so I selected some for excerpts and memos.
When JavaScript writes and reads the DOM multiple times, "layout thrashing" will occur, causing document reflow (reflow – the process of constructing a render tree

Copy code The code is as follows:

from a DOM tree1). 

// Read

var h1 = element1.clientHeight;

// Write (layout invalid)

element1.style.height = (h1 * 2) 'px';

// Read (trigger layout)

var h2 = element2.clientHeight;

// Write (layout invalid)

element2.style.height = (h2 * 2) 'px';

// Read (trigger layout)

var h3 = element3.clientHeight;

// Write (layout invalid)

element3.style.height = (h3 * 2) 'px';

When the DOM is written, the layout is invalid and needs to be rearranged at a certain point in time. But the browser is very lazy, it wants to wait until the end of the current operation (or frame) before reflowing.
However, if we read the geometric value from the DOM before the end of the current operation (or frame), then we will force the browser to rearrange the layout in advance. This is the so-called "forced synchonous layout", which will It kills performance.
On a modern desktop browser, the side effects of layout thrashing may not be obvious, but on low-end mobile devices, the problem is serious.

Quick solution

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

Copy code The code is as follows:

// Read

var h1 = element1.clientHeight;

var h2 = element2.clientHeight;

var h3 = element3.clientHeight;

// Write (layout invalid)

element1.style.height = (h1 * 2) 'px';

element2.style.height = (h2 * 2) 'px';

element3.style.height = (h3 * 2) 'px';

// Document reflows at end of frame

What about the real world?

It’s not that simple in reality. In large programs, code is spread everywhere, and this dangerous DOM exists everywhere. We can't easily (and obviously shouldn't) knead our beautiful, decoupled code together just to control the order of execution. So in order to optimize performance, how do we batch reads and writes?

Meet 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 together in the next frame, and DOM read operations to be executed synchronously in the current order.

Copy code The 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 be helpful to everyone’s web programming based on JavaScript.