Some Suggestions for optimizing JQuery performance

The topic of jquery performance optimization is one that you probably know a bit about. Below is my collection of a little bit of information about jquery performance optimization, you can refer to the reference.

Suggestions for performance optimization of selectors

  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 use an ID.

  2. Use tag before 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 a tag for class(and don't forget the nearest ID);

  3. Use child query: cache the parent object for future use;

  4. Use find() instead of context search;

  5. Make use of powerful chain operation: chain operation using jQuery is more effective than cache selector;

2. Suggestions for optimizing DOM operation

  1. Cache jQuery objects: cache the elements you often use;

  2. When DOM insertion is performed, all elements are encapsulated into one element:
The basic idea here is to create in memory what you really want and then update the DOM. This is not a jQuery best practice, but effective JavaScript manipulation is required. Direct DOM manipulation is slow
Direct DOM manipulation is slow. Change the HTML structure as little as possible.

  3. Use direct functions, not their equivalents: for better performance, you should use direct functions like $.ajax() instead of $.get(),$.getjson (), and $.post(), because the next few will call $.ajax().

  4. Cache jQuery results for later use:
You will often get a javasript application object - you can use the App. To save the object you often choose for future use;

Recommendations for optimizing event performance

  1. Defer to $(window). Load:
Sometimes $(window).load() is faster than $(document).ready() because it doesn't wait to execute before all the DOM elements have been downloaded. You should test it before you use it.

  2. Use Event Delegation:
Delegation is good for application scenarios where you have many nodes in a container and you want to bind an event to all nodes. With Delegation, we just need to bind the event at the parent level and see which child node (the target node) triggered the event. This is handy when you have a table with a lot of data and you want to set events on the td node. Get the table first, then set the delegation event for all td nodes

Four, other commonly used jQuery performance optimization recommendations

1. Use the latest version of jQuery
The latest version is often the best. Don't forget to test your code after you change the version. Sometimes it's not completely backwards compatible.

2. The use of p
The new HTML5 standard brings a lighter DOM structure. The lighter structure means less traversal and better loading performance with jQuery. So use HTML5 if possible.

3. If you style more than 15 elements, directly add style tags to DOM elements
The best way to style a few elements is to 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 your code.

      Avoid loading extra code
It's a good idea to put Javascript code in different files and load it only when needed. This way you don't load unnecessary code and selectors. It's also easy to manage code.

5. Compress it into a main JS file and keep the number of downloads to a minimum
When you have identified which files should be loaded, package them into a file. Open source tools such as Minify(which integrates with your back-end code) or online tools such as JSCompressor, YUI Compressor, or Dean Edwards JS packer can automatically do this for you. My favorite is JSCompressor.

6. Use native javascript when needed
JQuery is a great thing to use, but don't forget that it's also a framework for Javascript. So you can use native Javascript functions when your jQuery code is needed for better performance.

Load the jQuery framework from Google
When your application goes live, load jQuery from the Google CDN, because the user can get the code from the nearest place. This way you can reduce the number of server requests, and the browser will immediately pull the jQuery code out of the cache if the user visits another site that also USES Google CDN's jQuery.