Some suggestions for JQuery performance optimization_jquery

Everyone must know something about the topic of jquery performance optimization. Below is some information I collected about jquery performance optimization. You can refer to it.

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 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);

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

4. Use find() instead of context search;

5. Utilize powerful chain operations: Using jQuery’s chain operations is more effective than caching selectors;

2. Suggestions for optimizing DOM operations

1. Cache jQuery objects: cache elements you frequently use;

2. When doing DOM insertion, encapsulate all elements into one element:
The basic idea here is to build what you really want in memory, 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.

3. Use direct functions instead of equivalent functions: For better performance, you should use direct functions such as $.ajax() instead of $.get(), $.getJSON (),$.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 App. to save the objects you often select for future use;

3. Suggestions on optimizing event performance

1. Defer to $(window).load:
Sometimes it is faster to use $(window).load() than $(document).ready() because the latter does not wait for all DOM elements to be loaded. Executed before downloading is complete. You should test it before using it.

2. 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. First get the table, and then set delegation events for all td nodes

4. Other common jQuery performance optimization suggestions

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

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

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

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

5. Compress it into one main JS file and keep the number of downloads to a minimum
When you have determined which files should be loaded, package them into one file. Use some open source tools to automatically do it for you, 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.

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

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