Basic optimization ideas for window resize and scroll events

My colleague used the scroll event to load data in the project. As a result, IE is a tragedy. A simple optimization method is provided, with obvious results.

As long as the user changes the window size, the size of some internal elements will be re-calculated, which may cause the whole page to be re-rendered, resulting in a large amount of CPU consumption. For example, if you call the resize method, the user changes the window size and is triggered continuously. Earlier versions of IE may be suspended. The same is true for Windows scroll events. If you scroll the mouse or drag the scroll bar, scroll events will be triggered continuously. If there are many items to be processed, the earlier version of IE will also be suspended.

Basic optimization: within a certain period of time, only the resize event function is executed.
Copy codeThe Code is as follows:
Var resizeTimer = null;
$ (Window). on ('resize', function (){
If (resizeTimer ){
ClearTimeout (resizeTimer)
}
ResizeTimer = setTimeout (function (){
Console. log ("window resize ");
},400 );
}
);

The same is true for scroll event optimization.