Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to optimize jQuery performance". In daily operation, I believe many people have doubts about how to optimize jQuery performance. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts of "how to optimize jQuery performance"! Next, please follow the editor to study!

I. suggestions for optimizing the performance of selectors

1. Always inherit from # id selector

This is a golden rule of jQuery selectors. The quickest way for jQuery to select an element is to use ID to select it.

2. Use tag in front of class

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

The class selector is the slowest in jQuery because it traverses all DOM nodes in an IE browser. Avoid using class selectors as much as possible. Don't use tag to modify ID either.

3. Use subqueries

Cache the parent object for future use

4. Optimize the selector to fit the "right to left" model of Sizzle

Since version 1.3, jQuery has adopted the Sizzle library, which is quite different from the previous version on the selector engine. It replaces the right-to-left model with a "left-to-right" model.

5. Use find () instead of context lookup

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

6. Take advantage of powerful chain operation

Chained operation with jQuery is more efficient than cache selector

7. Write your own selector

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

II. Suggestions for optimizing DOM operation

8. Cache jQuery objects

Cache the elements you use frequently

9. When you want to DOM insert, encapsulate all elements into one element

The basic idea here is to create what you really want in memory, and then update the DOM. This is not an jQuery best practice, but effective JavaScript operations are required. Direct DOM operations are slow. Direct DOM operations are slow. Change the HTML structure as little as possible.

10. Although jQuery will not throw an exception, developers should also check the object

Although jQuery does not throw a large number of exceptions to users, developers should not rely on it either. JQuery usually executes a lot of useless functions before determining whether an object exists. So you should check whether the object exists before making a series of references to it.

11. Use direct functions instead of equivalent functions

In order to achieve better performance, you should use direct functions such as. Ajax (), instead of using .ajax () instead of .ajax (), instead of using .get (),. GetJSON (), .JSON (), because the next few will call $.ajax ().

12. Cache jQuery results for later use

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

13. Use the internal function data () of jQuery to store the state

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

14. Use jQuery utility function

Don't forget the simple and practical utility function of jQuery. My favorites are $.isFunction (), isArray () and .each ().

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

When jQuery is loaded, first add a class$ ('HTML'). AddClass (' JS') called "JS" to HTML; you can add CSS styles only if the user enables JavaScript.

Suggestions on optimizing the performance of events

16. Postpone to (window). L o a d

Sometimes (window). Load sometimes uses (window). Load sometimes uses (window). Load () is faster than $(document). Ready (), because the latter is not executed before all DOM elements are downloaded. 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 suitable for such application scenarios. With Delegation, we just need to bind the event at the parent and see which child node (the target node) triggered the event. When you have a table with a lot of data, you want to set events on the td node, which becomes very convenient.

18. Use the abbreviation for ready events

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 JavaSript code is to test it by 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.

Standardize your jQuery code

Often standardize your code to see which query is slower, and then replace it. You can use the Firebug console. You can also use the shortcut function of jQuery to make testing easier.

Other commonly used jQuery performance optimization suggestions

21. Use the latest version of jQuery

The latest version is often the best. After changing the version, don't forget to test your code. Sometimes it is not fully backward compatible.

22. Use HMTL5

The new HTML5 standard brings a lighter DOM structure. A lighter structure means that using jQuery requires less traversal and better loading performance. So use HTML5 if possible.

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

The best way to style a few elements is to use the css () function of jQuey. However, when more than 15 elements are styled, it is more effective to add style tags directly to DOM. This approach avoids using hard coding (hard code) in your code.

24. Avoid loading redundant code

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

25. Compress it into a main JS file to keep downloads to a minimum.

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

26. Use native Javasript when needed

Using jQuery is a great thing, but don't forget that it is also a framework for Javascript. So you can also use the native Javascript function when the jQuery code needs to, so you can get better performance.

27. Load the jQuery framework from Google

When your application is officially launched, please load jQuery from Google CDN, because users can get the code from the nearest place. In this way, you can reduce server requests, and if a user visits another site and it also uses Google CDN's jQuery, the browser will immediately call the jQuery code out of the cache.

28. Slow loading of content can not only improve 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.

At this point, the study on "how to optimize jQuery performance" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.