JQuery Tips(4) Some Tips on improving JQuery performance_jquery
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:
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
Of course, in Within jquery definition (or js function) events, you can use this to refer to the context:
Of course, the above example can also be written as the following two Ways:
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:
- 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:
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:
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:
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:
Of course, you can also use the concatenation method:
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

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

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

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

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

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

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

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.

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.

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.
