Home Web Front-end JS Tutorial JQuery Tips(4) Some Tips on improving JQuery performance_jquery

JQuery Tips(4) Some Tips on improving JQuery performance_jquery

May 16, 2016 pm 06:38 PM
jquery performance

When selecting, it is best to start with the ID selector

I think this is easy to understand, because JQuery internally uses the document.getElementByID method for ID selection, which is faster than all other DOM selection methods. , so it is best to start with $("#"), for example:

Copy code The code is as follows:










Provide the context of $()
When using $() to select page elements, providing the selection range can reduce the selection time. In other words, let the selector only filter within a small range of the page instead of The entire page will of course reduce filtering time, this can be achieved by providing the second parameter as context within the $() function
Copy code The code is as follows:


hi




Of course, in Within jquery definition (or js function) events, you can use this to refer to the context:
Copy code The code is as follows:


hi




Of course, the above example can also be written as the following two Ways:
Copy code The code is as follows:

hi




Using the find method is the most efficient of all methods

Of course, if you use the id selector, that is $(" #..") to select, there is no need to provide context parameters. This has no impact on speed

Save frequently used JQuery wrapped elements
As the title says, this is more important because $( )Selecting page elements takes time. This waste can be avoided when saving it as a variable for use, such as:
Copy code The code is as follows:


  • one

  • two


  • four

  • five




As you can see from the code, avoiding multiple repeated selections can improve performance:-)



Use selectors as little as possible
JQuery’s selectors are array-oriented, so use selectors as little as possible when conditions permit, such as:
Copy code The code is as follows:






As you can see, using a selector to separate the selected elements with commas, and selecting multiple elements not only makes the code more concise, but And by reducing the number of JQuery instances created, it is slightly better in performance!



Avoid using $().each when there are many loops, and use for loops
Use $ The ().each method makes programming easier when performing loops. The impact on performance of a small number of loops when using $().each is negligible, but when the number is large, the impact on performance is significant. It’s starting to look impressive.

I checked the information. It is said that if the number is below 1000, the $().each method can be used. If the number continues to increase, the for loop statement should be used.



Minimize operations on the DOM as much as possible
Operations on the DOM on the page are relatively expensive (such as inserting or deleting a piece of text on the page), so minimizing this change is the most important thing to do. Best practices for performance! For example:
Copy code The code is as follows:





It can be seen that the first example does not affect the DOM Modified 100 times, while the second one only modified the DOM once. The performance gap is obvious.



You can block the JQuery animation effect
In some cases, if you can turn off the JQuery animation, it can improve the performance. The blocking method is:
Copy code The code is as follows:



If the parameter can be a JS object, try to use the object
which is very suitable for JQuery plug-in, or JQuery's css and attr methods. Accepts key/value or js key/value object pairs as parameters. Passing key-value objects can reduce the creation of JQuery objects, such as:
Copy code The code is as follows:




Of course, you can also use the concatenation method:
Copy the code The code is as follows:




But the performance of this method is not as good as the above one. Two methods need to be used, And you need to generate more temporary objects.

The above are some tips to improve the performance of JQuery
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 AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

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

Hot Tools

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)

Windows 10 vs. Windows 11 performance comparison: Which one is better? Windows 10 vs. Windows 11 performance comparison: Which one is better? Mar 28, 2024 am 09:00 AM

Windows 10 vs. Windows 11 performance comparison: Which one is better? With the continuous development and advancement of technology, operating systems are constantly updated and upgraded. As one of the world's largest operating system developers, Microsoft's Windows series of operating systems have always attracted much attention from users. In 2021, Microsoft released the Windows 11 operating system, which triggered widespread discussion and attention. So, what is the difference in performance between Windows 10 and Windows 11? Which

Comparing the performance of Win11 and Win10 systems, which one is better? Comparing the performance of Win11 and Win10 systems, which one is better? Mar 27, 2024 pm 05:09 PM

The Windows operating system has always been one of the most widely used operating systems on personal computers, and Windows 10 has long been Microsoft's flagship operating system until recently when Microsoft launched the new Windows 11 system. With the launch of Windows 11 system, people have become interested in the performance differences between Windows 10 and Windows 11 systems. Which one is better between the two? First, let’s take a look at W

Kirin 8000 processor competes with Snapdragon series: Who can be king? Kirin 8000 processor competes with Snapdragon series: Who can be king? Mar 25, 2024 am 09:03 AM

In the era of mobile Internet, smartphones have become an indispensable part of people's daily lives. The performance of smartphones often directly determines the quality of user experience. As the "brain" of a smartphone, the performance of the processor is particularly important. In the market, the Qualcomm Snapdragon series has always been a representative of strong performance, stability and reliability, and recently Huawei has also launched its own Kirin 8000 processor, which is said to have excellent performance. For ordinary users, how to choose a mobile phone with strong performance has become a key issue. Today we will

The local running performance of the Embedding service exceeds that of OpenAI Text-Embedding-Ada-002, which is so convenient! The local running performance of the Embedding service exceeds that of OpenAI Text-Embedding-Ada-002, which is so convenient! Apr 15, 2024 am 09:01 AM

Ollama is a super practical tool that allows you to easily run open source models such as Llama2, Mistral, and Gemma locally. In this article, I will introduce how to use Ollama to vectorize text. If you have not installed Ollama locally, you can read this article. In this article we will use the nomic-embed-text[2] model. It is a text encoder that outperforms OpenAI text-embedding-ada-002 and text-embedding-3-small on short context and long context tasks. Start the nomic-embed-text service when you have successfully installed o

Performance comparison of different Java frameworks Performance comparison of different Java frameworks Jun 05, 2024 pm 07:14 PM

Performance comparison of different Java frameworks: REST API request processing: Vert.x is the best, with a request rate of 2 times SpringBoot and 3 times Dropwizard. Database query: SpringBoot's HibernateORM is better than Vert.x and Dropwizard's ORM. Caching operations: Vert.x's Hazelcast client is superior to SpringBoot and Dropwizard's caching mechanisms. Suitable framework: Choose according to application requirements. Vert.x is suitable for high-performance web services, SpringBoot is suitable for data-intensive applications, and Dropwizard is suitable for microservice architecture.

Comparison of PHP and Go languages: big performance difference Comparison of PHP and Go languages: big performance difference Mar 26, 2024 am 10:48 AM

PHP and Go are two commonly used programming languages, and they have different characteristics and advantages. Among them, performance difference is an issue that everyone is generally concerned about. This article will compare PHP and Go languages ​​from a performance perspective, and demonstrate their performance differences through specific code examples. First, let us briefly introduce the basic features of PHP and Go language. PHP is a scripting language originally designed for web development. It is easy to learn and use and is widely used in the field of web development. The Go language is a compiled language developed by Google.

PHP array key value flipping: Comparative performance analysis of different methods PHP array key value flipping: Comparative performance analysis of different methods May 03, 2024 pm 09:03 PM

The performance comparison of PHP array key value flipping methods shows that the array_flip() function performs better than the for loop in large arrays (more than 1 million elements) and takes less time. The for loop method of manually flipping key values ​​takes a relatively long time.

What impact do C++ functions have on program performance? What impact do C++ functions have on program performance? Apr 12, 2024 am 09:39 AM

The impact of functions on C++ program performance includes function call overhead, local variable and object allocation overhead: Function call overhead: including stack frame allocation, parameter transfer and control transfer, which has a significant impact on small functions. Local variable and object allocation overhead: A large number of local variable or object creation and destruction can cause stack overflow and performance degradation.

See all articles