JQuery High-Performance Optimization

When using JQuery, you can use multiple selectors to select the same element. The performance of different methods is different. Sometimes the difference is very large. Commonly used selectors include the following:

ID selector $ ("# id ")

Tag selector $ ("td ")

Class selector $ (". target ")

Attribute selector $ ("td [target = 'target']")

Pseudo class selector $ ("td: hidden ")

Based on experience, we should know that the performance of these five selectors is declining in turn.

Test html snippets:

<Table width = "98%" cellspacing = "1" cellpadding = "0" border = "0"SolutionIE6IE7IE8IE9ChromeFirefoxOperaSafariA611056101344488103194108155B00000000

 

Conclusion

Avoid null objects;

Use a style sheet to avoid multiple style adjustments

Apply multiple styles to an object. It is best to use a style sheet to avoid multiple applications.

• A:

• B:

• C:

Test Results

• Test Description: 1 W execution time, unit ms/MS, statistics of three running average

 

Solution	IE6	IE7	IE8	IE9	Chrome	Firefox	Opera	Safari
A	2594	2486	1500	501	163	222	190	191
B	1000	953	547	190	79	28	15	86
C	843	672	407	111	21	17	16	31

 

Conclusion

 

 

Avoid using anonymous Functions

Using a large number of anonymous functions increases the difficulty of debugging, maintaining programs, and performing performance tests through third-party software. Therefore, you should avoid using a large number of anonymous functions as much as possible.

>>>

Large loops adopt a more efficient Traversal method

JQuery provides $. fn. each () and $. the each () method can be used to traverse the set. In addition, the JS native for loop and while can be used to implement iteration. you should understand the performance differences between them:

• A:

• B:

• C:

Test Results

• Test Description: 1 W execution time, unit ms/MS, statistics of three running average

 

Solution	IE6	IE7	IE8	IE9	Chrome	Firefox	Opera	Safari
A	172	219	157	30	3	5	4	6
B	219	234	203	41	4	6	5	8
C	219	234	187	52	3	4	5	7

 

Conclusion

Best practices

Use native attributes first

Many common attributes, such as id and name, are implemented by the browser. In JQuery, we sometimes use $ (this ). attr ("id") method to obtain the id, the efficiency of this method is very slow compared to the efficiency of native attribute acquisition.

Test Results

• Test Description: execution time, unit ms/MS, statistics of three running average

 

Solution	IE6	IE7	IE8	IE9	Chrome	Firefox	Opera	Safari
A	6880	7030	4220	1188	157	244	133	135
B	310	310	150	27	4	5	17	3

 

Conclusion

Best practices

Use event Delegate

You may often encounter a business scenario of adding click events to all elements in a list. The traditional approach is to get the JQuery object: $ ("li") in this list, and then add the click event:

This method may cause serious performance problems when the number of lists is large and deserves attention. JQuery has introduced the event delegation mechanism in earlier versions, which can greatly reduce the consumption of event listening and memory.

Test the list of 1 million records:

• A:

• B:

Test Results

• Test Description: To 1 W <li> label click Event added time, unit ms/MS, statistics three run average

 

Solution	IE6	IE7	IE8	IE9	Chrome	Firefox	Opera	Safari
A	2156	2172	1922	312	103	173	141	117
B	0	0	0	0	0	0	0	0

 

Conclusion

Best practices

 

Cache intermediate search results

=>

Reduce DOM operations and update them in batches as much as possible

Dom operations are one of the most time-consuming operations in browser operations. JQuery provides practical methods for dom operations such as append, appendTo, prepend, prependTo, after, before, insertAfter, and wrap, frequent use of these methods may cause performance problems. A practical principle for improving performance is to "use them as few as possible ". If necessary, merge and batch operations should be used as much as possible to reduce dom operation consumption.

Use $. data instead of $. fn. data

The latter is nearly 10 times faster than the former

If possible, use the latest version of JQuery

The new version will always improve the performance and provide some useful tools. If you can, try to use the latest version;

JQuery html performance difficulties

The function of jQuery's html method is to set innerHTML for dom elements and analyze the source code of html (1.8.3)

Before setting the dom innerHTML, jQuery. cleanData is executed. This method performs some clean operations on dom elements, such as removeEvent and cache deletion.

Take the list of two hundred rows as an example. In the ff browser, this method runs for about 5 ms to 8 ms. That is, when the dom element is empty and there are two hundred rows of data in the dom element, the html method is executed, and the latter runs 5 ms to 8 ms more than the former.

Pitfalls

The cleanData method is also defined in jQueryUI, and $. cleanData is overwritten. Some additional operations are added, and the performance is affected.

Take the list of two hundred rows as an example. In the ff browser, this method runs for about 60 ms to 70 ms. That is, when the dom element is empty and there are two hundred rows of data in the dom element, the html method is executed, and the latter runs 60 ms to 70 ms more than the former.

Solution

1. Use the native dom. innerHTML

2. Run the remove () method before executing the html () method.