Basic optimization ideas for window resize and scroll events_javascript skills

A 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.

Copy code The code is as follows:

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.