This article describes the method of js to prevent flashing when DIV layout scrolling, and is shared with you for your reference. The specific methods are as follows:
I have been exposed to page performance recently, and there are many subtle and original content, such as browser rendering. There is a lot of information, so I chose some for the translation and memorandum.
JavaScript writes and reads DOM multiple times and causes "layout bumps" to occur, causing document reflow the process of constructing a render tree
The code copy is as follows: from a DOM tree1).
// read
var h1 = element1.clientHeight;
// Write (the layout is invalid)
element1.style.height = (h1 * 2) + 'px';
// Read (touch release)
var h2 = element2.clientHeight;
// Write (the layout is invalid)
element2.style.height = (h2 * 2) + 'px';
// Read (touch release)
var h3 = element3.clientHeight;
// Write (the layout is 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 lazy, and it wants to wait until the current operation (or frame) is over before re-arrangement.
However, if we read geometric values from the DOM before the end of the current operation (or frame), then we force the browser to rearrange the layout in advance. This is called "forced synchonous layout", which will kill performance.
On modern desktop browsers, the side effects of bumpy layouts may not be obvious; but on low-end mobile devices, the problem is serious.
Quick solution
In an ideal world, we can read and write DOM in batches by simply rearranging the code execution order. This means that the document needs to be reordered in one go.
Copy the code as follows:/ Read
var h1 = element1.clientHeight;
var h2 = element2.clientHeight;
var h3 = element3.clientHeight;
// Write (the layout is invalid)
element1.style.height = (h1 * 2) + 'px';
element2.style.height = (h2 * 2) + 'px';
element3.style.height = (h3 * 2) + 'px';
// Documents are rearranged at the end of the frame
So what about the real world?
It's not that simple in reality. In large programs, codes are spread everywhere, and there are such dangerous DOMs. We can't easily (and obviously shouldn't) mix our beautiful, de-core code together just to control the execution order. So in order to optimize performance, how do we batch read and write?
Come to know the 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 will be executed synchronously in the current order.
Copy the 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 that the description in this article will be helpful to everyone's web programming based on javascript.