Some Suggestions for optimizing JQuery performance
- 2020-03-30 02:57:35
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.
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:
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
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.
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.