[Summary] Various methods to optimize jQuery performance

How to optimize jQuery performance? The following article will introduce you to some optimization methods for jQuery performance. I hope it will be helpful to you!

I have been looking for tips on jQuery performance optimization that can make my bloated dynamic web application lighter. After searching many articles, I decided to list some of the best and most commonly used suggestions for optimizing performance. [Recommended learning: jQuery video tutorial]

1. Selector performance optimization suggestions

1. Always inherit from the

#id

selector. This is a golden rule for jQuery selectors. The fastest way to select an element in jQuery is to select it by ID.

2. Use tag in front of class

The second fastest selector in jQuery is the tag selector (such as $('head')), because it is similar to Directly from the native Javascript method getElementByTagName(). So it's best to always use tags to modify classes (and don't forget the nearest ID)

The class selector in jQuery is the slowest, because it will traverse all DOM nodes under IE browser. Try to avoid using class selectors. Don't use tags to modify IDs either.

3. Use subqueries

Cache the parent object for future use

4. Optimize the selector for Sizzle The "right-to-left" model

Since version 1.3, jQuery adopts the Sizzle library, which is very different from the previous version's representation on the selector engine. It replaces the "right to left" model with a "left to right" model.

5. Use find() instead of context search

The find() function is indeed faster. However, if a page has many DOM nodes, it may take more time to search back and forth:

6. Use powerful chain operations

Using jQuery Chained operations are more efficient than caching selectors

7. Write your own selector

If you often use selectors in your code, extend jQuery's $ .expr[':'] object and write your own selector.

2. Suggestions for optimizing DOM operations

8. Caching jQuery objects

will you often Cache the elements used

9. When DOM insertion is to be performed, encapsulate all elements into one element

The basic idea here is to create your exact want something and then update the DOM. This is not a jQuery best practice, but is required for valid JavaScript operations. Direct DOM operations are very slow. Direct DOM operations are very slow. Change the HTML structure as little as possible.

10. Although jQuery will not throw exceptions, developers should also check objects

Although jQuery will not throw a large number of exceptions to users, developers Don't rely on that either. jQuery usually executes a bunch of useless functions before determining whether an object exists. So before making a series of references to an object, you should first check whether the object exists.

11. Use direct functions instead of equivalent functions

For better performance, you should use direct functions such as. a j a x () , do not use .ajax(), do not use .ajax(), do not use .get(),.g e t J S O N ( ), .getJSON(),.getJSON(),.post(), because the following several will call $.ajax().

12. Cache jQuery results for later use

You will often get a javasript application object - you can use App. to save the objects you often select. , for future use

13. Use jQuery’s internal function data() to store status

Don’t forget to use the .data() function to store information

14. Use jQuery utility function

Don’t forget the simple and practical jQuery utility function. My favorites are $.isFunction(), i s A r r a y ( ) and isArray() and isArray() and .each().

15. Add the class "JS" to the HTML block

When jQuery is loaded, first add a class called "JS" to the HTML $('HTML ').addClass('JS');You can add CSS styles only when the user has JavaScript enabled.

3. Suggestions on optimizing event performance

16. Postpone until ( w i n d o w ) . l o a d

Sometimes (window).load is used. Sometimes (window).load is used. Sometimes (window).load() is faster than $(document).ready() because the latter does not wait for all DOM elements. Executed before all downloads are completed. You should test it before using it.

17. Use Event Delegation

When you have many nodes in a container and you want to bind an event to all nodes, delegation is very suitable for such application scenarios. Using Delegation, we only need to bind the event at the parent and then see which child node (target node) triggered the event. This becomes very convenient when you have a table with a lot of data and you want to set events on the td node.

18. Use the abbreviation of ready event

If you want to compress the js plug-in and save every byte, you should avoid using $(document).onready()

4. Test jQuery

19. jQuery unit test

The best way to test JavaScript code is The best way is to test it with people. But you can use some automated tools such as Selenium, Funcunit, QUit, QMock to test your code (especially plug-ins). I want to discuss this topic in another topic because there is so much to say.

20. Standardize your jQuery code

Standardize your code often to see which query is slower and replace it. You can use the Firebug console. You can also use jQuery's shortcut functions to make testing easier

5. Other common jQuery performance optimization suggestions

21. Use the latest version of jQuery

The latest version is often the best. After changing versions, don't forget to test your code. Sometimes it's not completely backwards compatible.

22. Use HMTL5

The new HTML5 standard brings a lighter DOM structure. A lighter structure means fewer traversals are required when using jQuery, and better loading performance. So please use HTML5 if possible.

23. If you want to add styles to more than 15 elements, add style tags directly to the DOM elements.

The best way to add styles to a few elements Just use jQuey's css() function. However, when adding styles to more than 15 elements, it is more effective to add style tags directly to the DOM. This method avoids using hard code in the code.

24. Avoid loading redundant code

It is a good idea to put Javascript code in different files and load them only when needed. This way you won't load unnecessary code and selectors. It is also easy to manage code.

25. Compress it into a main JS file and keep the number of downloads to a minimum

When you have determined which files should be loaded, then compress them Packaged into a file. Use some open source tools to do it for you automatically, such as using Minify (integrated with your back-end code) or using online tools such as JSCompressor, YUI Compressor or Dean Edwards JS packer to compress files for you. My favorite is JSCompressor.

26. Use native Javascript when needed

Using jQuery is a great thing, but don’t forget that it is also a framework for Javascript. So you can use native Javascript functions when necessary in jQuery code, which can achieve better performance.

27. Load jQuery framework from Google

When your application is officially launched, please load jQuery from Google CDN, because users can load it from the nearest place Get the code. This way you can reduce server requests, and if the user browses another website that also uses Google CDN's jQuery, the browser will immediately call out the jQuery code from the cache.

28, Slowly loading content can not only improve the loading speed, but also improve SEO optimization. Use Ajax to load your website, which can save server-side loading time. You can start with a common sidebar widget.

[Recommended learning: jQuery video, web front-end development]

The above is the detailed content of [Summary] Various methods to optimize jQuery performance. For more information, please follow other related articles on the PHP Chinese website!