How to optimize the performance of the jquery each () function

It's really easy to use a problem if you just stay on the level of jquery and don't know exactly what it's going to do. That's why I haven't been advocating the use of jquery in the near future, and this framework's API setting has misled people astray.

$.fn.beautifytable = function (options) {Dafabet 888 Casino//define default configuration items, then overwrite return with options This.each (function () {var table = $ (this), tbody = Table.children (' tbody '), tr =           Tbody.children (' tr '), th = tbody.children (' th '), td = Tbody.children (' TD ');           Individual content of Class Table.addclass (Option.tableclass); Th.addclass (Options.headerclass); 1 Td.addclass (Options.cellclass); 2//odd-even Line of class Tbody.children (' Tr:even '). addclass (Options.evenrowclass); 3 Tbody.children (' tr:odd '). addclass (Options.oddrowclass); 4//Alignment Tr.children (' Th,td '). CSS (' text-align ', options.align); 5//Add mouse hover tr.bind (' mouseover ', addactiveclass); 6 Tr.bind (' mouseout ', removeactiveclass); 7//Click on the Color Tr.bind (' click ', Toggleclickclass);   8}); };

In general, this code is good, clear-minded, logical, and want to do what also through the comments are clear. However, according to the author, when there are 120 lines in the table, IE has already reflected that the script is running too long. Obviously from the performance point of view, the efficiency of this function is not high, even very low.

So, starting from the code level analysis, this is a standard jquery plug-in function, there is a typical return This.each (function () {...};), the form of code, if the author write down this code, not scripted without thinking, You should be aware of what a function of jquery has done.

Simply put, the Jquery.fn function, most of which is a call to each, the so-called each, is naturally the selected elements are traversed, and an element of the specified operation. So look at the above piece of code, how much of the traversal, here is the assumption that only 120 rows are selected, each row has 6 columns, plus 1 rows of the table header bar:

1. traversing th, adding headerclass, the number of elements is 6.
2. Traverse TD, add Cellclass, and the number of elements is 6*120=720.
3. To find the odd number from all TR, you need to traverse all the TR once and the element count is 120.
4. Iterate over the odd tr, add Evenrowclass, and the number of elements is 120/2=60.
5. To find even-numbered from all TR, all TR must be traversed once, and the number of elements is 120.
6. Traverse even-numbered TR, add Oddrowclass, and the number of elements is 120/2=60.
7. Traverse all th and TD, add Text-align, and the number of elements is 120*6+6=726.
8. Traverse all TR, add the MouseOver event, and the number of elements is 120.
9. Traverse all TR, add the Mouseout event, and the number of elements is 120.
10. Traverse all TR, add the Click event, and the number of elements is 120.

For convenience, we simply assume that it takes 10ms to access an element in a traversal, so how much time does this function take? This function met 2,172 elements, time consuming 21720ms, that is, 21 seconds, obviously IE should be reported script execution too long.

Know the reasons for inefficiency, to fundamentally solve, naturally to find ways to merge the cycle, at first glance, according to the above code in the comments in the number, at least the following points can be combined:

3 and 4 can be combined into a single cycle, from 120+60+120+60 to 120, reducing 240. 1, 2, and 5 can be combined into a single cycle, from 6+720+726 to 726, with a reduction of 726. 6, 7, 8 can be combined into a single cycle, from 120+120+120 to 120, reduced by 240. Further, 3, 4 and 6, 7, 8 can be combined into a single cycle, continuing to reduce the 120. Summing up, we have reduced the 240+726+240+120=1326 element operation altogether, total 13260ms. After optimization, our function time becomes 21720-13260=8460ms, that is, 8s.

There may be a question, from the structure of the table, all the th and TD elements must be within the TR, then why not the 1, 2, 5 This three-step cycle is also placed in the cycle of the TR, forming a nested loop, so not faster?

There are 2 main reasons why this is not done:

One, regardless of where the 1, 2, 5 are placed, will not reduce a single visit to all th and TD elements.

On the other hand, the $ (' th,td ') this selector, in sizzle, will be translated into 2 calls of the getElementsByTagName function, the first time to get all the th, the second time to get all the TD, and then to merge the collection. Since getElementsByTagName is a built-in function, it can be thought that the function is not loop, that is, the complexity is O (1), the same set of merge using the correlation function of the array, is the operation of memory, the complexity of the same is O (1).

Conversely, if in the cycle of the TR element to use the $ (' th, ' TD) This selector, it is on the TR element called 2 times getElementsByTagName, because no matter on which element called the function, the function execution time is the same, so in the cyclic TR use, On the contrary, more 119*2 function calls, the efficiency does not rise against the drop.

It can be seen that the basic knowledge of the sizzle selector is also an important aspect to help optimize the jquery code.

Don't let JavaScript do anything.

According to the previous basic optimization, the time has been reduced from 21 seconds to 8 seconds, but the number of 8 seconds is obviously unacceptable.

Further analysis of our code, in fact, the loop traversal is the language level of content, its speed should be quite fast. The operation for each element is the function provided by jquery, which is the master of most resources compared to traversal. If the access element in the traversal is 10ms, it is rude to say that executing a addclass is at least 100ms-level consumption.

Therefore, in order to further optimize the efficiency, we have to reduce the operation of elements to start. Re-examine the code carefully and find that the function has a lot of modifications to the style, including at least:

• Add class to all th.
• Add class to all TD.
• Add class to the TR sub-parity line.
• Add a text-align style to all th and TD.

In fact, we know that the CSS itself has a descendant selector, and the browser native to the CSS parsing, the efficiency is much higher than let JavaScript to the element one by one plus class.

So, if the CSS is controllable, then this function should not have Headerclass, cellclass these two configuration items, but as far as possible in the CSS configuration:

. beautiful-table th {/* headerclass contents */}   . beautiful-table td {/* CELLCLASS content */}  

Furthermore, for the odd-even line style of TR, it can be implemented in some browsers using the Nth-child pseudo-class, which can be used to add styles only in browsers that do not support this pseudo-class, using the AddClass feature probe. Of course, if you just want to optimize the IE series, this one can be ignored.

For: Nth-child pseudo-class detection, you can use the following ideas: Create a stylesheet, and then create a rule, such as #test span:nth-child (odd) {display:block;}. Create the appropriate HTML structure, a div with ID test, and 3 spans inside.

Add stylesheet and div together in the DOM tree. View the run-time display style for the 1th and 3rd spans and, if it is block, the pseudo-class is supported. Delete the created stylesheet and Div, and don't forget to cache the results of the probe. Finally, to add the text-align style to all th and TD elements, it is also possible to optimize by CSS. Since you don't know which align to add, write a few more styles:

/* CSS style */  . Beautiful-table-center th,.beautiful-table-center td {Text-align:center!important;}   . Beautiful-table-rightright th,.beautiful-table-rightright td {Text-align:rightright!important;}   . Beautiful-table-left Th,.beautiful-table-left td {Text-align:left!important;}   /* JavaScript *  /table.addclass (' beautiful-table-' + options.align);   

Of course, the above-mentioned optimization is based on the control of the CSS, if you do not have access to CSS style, such as this is a generic plug-in function, will be completely uncontrollable third-party use, then how to do? There is no way to do it at all:

Find all the CSS rules in the page, such as Document.stylesheets. Iterate through all the rules and take out the Headerclass, Cellclass, etc. in the configuration item. Extract all the styles from the required classes and assemble them into a new selector, such as beautiful-table th. Using the created selector, a new stylesheet is generated and added to the DOM tree. Then just add beautiful-table to the table and the class is done.

Of course, the above practice is quite time consuming, after all, but also to traverse the stylesheet, and create stylesheet. Specific is not to improve the efficiency of a lot of help, then depending on the size of the page will have different effects, whether the use of the function is to see the specific needs of designers, here is a strategy.

In general, by doing as little JavaScript as possible, the more styled tasks to CSS, the browser's rendering engine to complete, and can further optimize the function, assuming that the call to AddClass, CSS needs 100ms, this optimization directly eliminated the original 120 + 726=846 operation, saving 84600ms of time (of course, there are exaggerated ingredients, but for the whole function of consumption, this is really a big piece).

This article simply wants to optimize on the various implementations of jquery, involving only the analysis of the entire operation of jquery, details and direction of optimization, and does not mention basic basic optimization methods, such as removing the entire table from the DOM tree first. After doing all the operations, put back the DOM and reduce repaint. Change MouseOver and Mouseout to MouseEnter and mouseleave, reducing the execution of repetitive event functions due to the right event bubbling model. For the choice of simple elements such as th and TD, it is preferable to use native getElementsByTagName to eliminate the time of sizzle analysis selector.

Finally, this article just to show that, for front-end developers, although the browser may be a black box, but many of the framework, tools, libraries are open, if you can do a certain degree of understanding before use, it will certainly help the personal technology improvement and the final product quality optimization, "know it but do not know why?" is a very taboo situation.

How to optimize the performance of the jquery each () function