Some suggestions on the optimization of jquery performance _jquery

For the theme of jquery performance optimization, we must all know something. Here is my collection of information about jquery performance optimization, we can refer to reference.

First, selector performance optimization recommendations

1. Always inherit from the #id selector: This is a golden rule of the jquery selector. The quickest way for jquery to select an element is to select it by ID;

2. Using the second-fastest selector in Tag:jquery in front of class is the tag selector (such as $ (' head '), as it and directly from the native JavaScript method Getelementbytagname (). So it's always best to use tag to decorate class (and don't forget the nearest ID);

3. Use subqueries: Cache the parent object for future use;

4. Use Find (), and do not use context lookup;

5. Using a powerful chain operation: The chain operation using jquery is more efficient than the caching selector;

II. Optimizing DOM Operation recommendations

1. Caching jquery objects: Caching The elements you use frequently;

2. When you want to make a DOM insert, encapsulate all the 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 a jquery best practice, but it must be a valid JavaScript operation. Direct DOM is slow to operate
The direct DOM operation is slow. Change the HTML structure as little as possible.

3. Use the direct function instead of the equivalent function: In order to achieve better performance, you should use direct functions such as $.ajax () instead of using $.get (), $.getjson (), $.post (), since the following few will invoke $.ajax ().

4. Cache jquery Results for later use:
You often get a javasript app-you can use app to save objects you often choose for future use.

III. Recommendations for optimizing event performance

1. Postpone to $ (window). Load:
There are sometimes $ (window). Load () ratio $ (document). Ready () faster, because the latter does not wait for all DOM elements to be executed before the download 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 a good fit for this scenario. With delegation, we only need to bind the event at the parent level, and then see which child node (the target node) triggers the event. When you have a table with a lot of data, you want to set up events for the TD node, which makes it very convenient. Get the table first, then set the delegation event for all TD nodes

Four, other common jquery performance optimization recommendations

1. Use the latest version of jquery
The latest version is often the best. After replacing the version, don't forget to test your code. Sometimes it's not completely backwards compatible.

2. Use of HMTL5
The new HTML5 Standard brings a more lightweight DOM structure. A lighter structure means that using jquery requires less traversal and better load performance. So please use HTML5 if possible.

3. Add a style label directly to the DOM element if you add more than 15 elements
The best way to add styles to a few elements is to use the Jquey CSS () function. However more than 15 more elements add styles, it is more efficient to add style labels directly to the DOM. This approach avoids the use of hard-coded (hard code) in your coding.

    4. Avoid loading unwanted code
It is a good way to put JavaScript code in separate files, loading them only when needed. This way you don't load unnecessary code and selectors. It also makes it easier to manage code.

5. Compress to a master js file, keep download times to a minimum
when you have determined which files should be loaded, package them into a single file. Use some open source tools to automate your work, such as using minify (integrated with your back-end code) or using online tools like Jscompressor,yui compressor or Dean Edwards JS packer to compress your files. My favorite is jscompressor.

6. Using native Javasript when needed
using jquery is a great thing to do, but don't forget it's also a framework for JavaScript. So you can use native JavaScript functions when the jquery code is necessary to get better performance.

7. Download the jquery framework from Google
when your application is officially online, download jquery from Google CDN because the user can get the code from the nearest place. This allows you to reduce server requests, and if the user browses to other sites, and it also uses Google CDN's jquery, the browser will immediately pull out the jquery code from the cache.