Several suggestions for JQuery performance optimization _ jquery

For the question of jquery performance optimization, I am sure you will understand it. The following is a reference for jquery performance optimization. For the question of jquery performance optimization, I am sure you will understand it. The following is a reference for jquery performance optimization.

I. selector performance optimization suggestions

1. always inherit from the # id selector: This is a golden rule of jQuery selector. The fastest way for jQuery to select an element is to use ID;

2. Use the tag before the class: In jQuery, the second fast selector is the tag selector (for example, $ ('head'), because it and the native Javascript method getElementByTagName (). So it is best to always use tags to modify the class (and do not forget the nearest ID );

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

4. Use find () instead of context search;

5. Use powerful chain operations: Using jQuery chain operations is more effective than caching selector;

Ii. DOM optimization suggestions

1. cache jQuery objects: cache frequently used elements;

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

3. use direct functions, instead of using the same 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 future use:
You will often get an javasript Application Object-you can use the App to save the objects you choose frequently for future use;

Iii. Suggestions on optimizing event Performance

1. delay until $ (window). load:
Sometimes $ (window). load () is faster than $ (document). ready (), because the latter does not run until all DOM elements are downloaded. You should test it before using it.

2. Use Event Delegation:
When you have many nodes in a container and want to bind an event to all nodes, delegation is suitable for such application scenarios. When using Delegation, we only need to bind events at the parent level, and then check which child node (target node) triggers the event. When you have a table with a lot of data, you want to set events for the td node, which is very convenient. First obtain the table, and then set the delegation event for all td nodes.

IV. Other common jQuery performance optimization suggestions

1. Use the latest version of jQuery
The latest version is often the best. After changing the version, do not forget to test your code. Sometimes it is not completely backward compatible.

2. Use HMTL5
The new HTML5 standard provides a lightweight DOM structure. A lighter structure means that jQuery requires less traversal and better loading performance. So use HTML5 if possible.

3. if you add a style to more than 15 elements, add the style label to the DOM element directly.
The best way to add styles to a few elements is to use the jQuey css () function. However, it is more effective to directly add the style label to the DOM when more than 15 elements add styles. This method avoids hard code ).

4. Avoid loading unnecessary code.
It is a good way to put Javascript code in different files. Load them only when necessary. In this way, you will not load unnecessary code and selectors. It also facilitates code management.

5. compress the file into a main JS file and keep the download count to a minimum.
When you have determined which files should be loaded, package them into a file. You can use some open-source tools to automatically compress your files, such as Minify (integrated with your back-end Code) or JSCompressor, YUI Compressor or Dean Edwards JS packer. My favorite is JSCompressor.

6. Use the native Javasript when necessary
Using jQuery is a great thing, but don't forget that it is also a Javascript framework. Therefore, you can use native Javascript Functions when jQuery code is necessary to achieve better performance.

7. Load the jQuery framework from Google
When your application is officially launched, load jQuery from Google CDN because you can get code from the nearest place. In this way, you can reduce server requests. If a user browses other websites and uses Google CDN's jQuery, the browser immediately calls out the jQuery code from the cache.