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:

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