Home Web Front-end JS Tutorial Basic optimization ideas for window resize and scroll events_javascript skills

Basic optimization ideas for window resize and scroll events_javascript skills

May 16, 2016 pm 04:50 PM
resize scroll

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.
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is scroll button? What is scroll button? Feb 22, 2023 pm 02:29 PM

What is scroll button?

How to compress and format images in Vue? How to compress and format images in Vue? Aug 25, 2023 pm 11:06 PM

How to compress and format images in Vue?

How to resize, crop, rotate, and flip images in Python How to resize, crop, rotate, and flip images in Python May 10, 2023 am 10:43 AM

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

What does the keyboard scroll light mean? What does the keyboard scroll light mean? Feb 20, 2023 pm 01:42 PM

What does the keyboard scroll light mean?

How to use v-on:scroll to listen for scrolling events in Vue How to use v-on:scroll to listen for scrolling events in Vue Jun 11, 2023 pm 12:14 PM

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

How to hide scroll in css How to hide scroll in css Jan 28, 2023 pm 02:02 PM

How to hide scroll in css

How to understand scroll How to understand scroll May 23, 2023 pm 01:40 PM

How to understand scroll

What is Ethereum scroll? How to operate Ethereum scroll? What is Ethereum scroll? How to operate Ethereum scroll? Feb 15, 2025 pm 10:33 PM

What is Ethereum scroll? How to operate Ethereum scroll?

See all articles