


Basic optimization ideas for window resize and scroll events_javascript skills
May 16, 2016 pm 04:50 PMA colleague used the scroll event to load data in the project, but the result was a tragedy in IE. A simple optimization method is given with obvious results.
As long as the user changes the window size, the size of some internal elements will be recalculated, which may cause the entire page to be re-rendered, ultimately consuming a lot of CPU. For example, when the resize method is called, it will be continuously triggered when the user changes the window size, and lower versions of IE may fall into a state of suspended animation. The same is true for the window's scroll event. When the mouse scrolls or drags the scroll bar, the scroll event will be triggered continuously. If there are too many things to process, lower versions of IE will also fall into suspended animation.
Basic optimization idea: only execute the resize event function once within a certain period of time.
var resizeTimer = null;
$(window) .on('resize', function () {
if (resizeTimer) {
clearTimeout(resizeTimer)
}
resizeTimer = setTimeout(function(){
console.log("window resize");
}, 400);
}
);
Scroll event optimization is the same.

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to compress and format images in Vue?

How to resize, crop, rotate, and flip images in Python

What does the keyboard scroll light mean?

How to use v-on:scroll to listen for scrolling events in Vue

What is Ethereum scroll? How to operate Ethereum scroll?
