jquery Performance Optimization

One, selector performance optimization recommendations

1. Always inherit from #id selector

2, use tag

in front of class

jquery is the tag selector (such as $ (' head ')) because it is 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, using powerful chain-type operation

Second, optimize the DOM operation suggestions

1,   cache jquery Objects

2. Use direct functions rather than functions equivalent to them

For better performance, you should use direct functions such as $.ajax () instead of $.get (), $.getjson (), $.post (), since several of the following will call $.ajax ().

III. Recommendations for optimizing event performance

1, deferred to $ (window). Load

2. Use Event Delegation

When you have many nodes in a container and you want to bind an event to all of the nodes, delegation is a good fit for such an application scenario. With delegation, we only need to bind the event at the parent level and then 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 makes it very convenient. Get the table first and then set the delegation event for all TD nodes:

Iv. testing jquery

1. Standardize your jquery code

Always standardize your code to see which query is slow and then replace it. You can use the Firebug console. You can also use jquery's shortcut functions to make testing easier:

V. Other commonly used 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 is not completely backwards compatible.

2. Using HMTL5

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

3. Add style labels to DOM elements when adding styles to more than 15 elements

The best way to add styles to a small number of elements is to use the Jquey CSS () function. However, adding a style to the DOM is more effective when adding more than 15 more elements. This approach avoids hard coding in code.

4. Avoid loading redundant code

Putting JavaScript code in different files is a good way to load them only when you need them. This way you do not load unnecessary code and selectors. It is also easy to manage code.

5, compressed into a main JS file, the download times to keep to a minimum

When you have identified which files should be loaded, package them as a file. With some open source tools you can do it automatically, such as using minify (and your backend code integration) or using online tools such as Jscompressor,yui Compressor or Dean Edwards JS packer to compress files for you. What I like most is jscompressor.

6. Use native Javasript when needed

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

7. Load the jquery framework from Google

When your app is online, load jquery from Google CDN because users can get the code from the nearest place. This way you can reduce the server request, and the browser will immediately pull the jquery code out of the cache if the user browses to another site and it also uses jquery from Google Cdn.