Show/hide Performance test for jquery

This article is a performance test of the various show/hide methods of jquery. The author tests the sentence from Robert Duffy's jquery conference in SanFrancisco: ". Hide () and. Show () execute faster than the direct change of CSS." However, the author did the test on his own because he could not find robertduffy to ask why. The following translation is not a full-text translation, only a few highlights.

The test is an HTML page with 100 div with a class and some content. To get rid of the time spent searching for these Div, cache the selector $ (' div '). The jquery version used as a test is 1.4.2, so the test results are only for this version, which may not be the result in other versions.
The jquery methods tested were:

• . Toggle ()

• . Show () and. Hide ()

• . css ({' Display ': ' None '}) and. css ({' Display ': ' Block '})

• . addclass (' hide ') and. Removeclass (' hide ')

• Change a property of a <style> element

In all browsers, these two methods are relatively slow to hide DOM elements. The main reason is that the. Hide () method must first save the "display" property of the element so that. Show () can restore the element to its original state. This jquery method uses the. data () to keep the information on the DOM element. To achieve this,. Hide () loops two times on each element, one time to save the current "display" value, one time to update the style "display" to "none". Based on comments on the source code, this is done to prevent the browser from re-rendering on each loop (reflow). The Hide () method also checks to see if you are passing parameters that use an animated effect, even if passing in a "0" will result in a significant performance compromise. When you first call. Hide (), the performance is the slowest, and then the call becomes faster.  
In all browsers, these two methods are relatively slow to hide DOM elements. The main reason is that the. Hide () method must first save the "display" property of the element so that. Show () can restore the element to its original state. This jquery method uses the. data () to keep the information on the DOM element. To achieve this,. Hide () loops two times on each element, one time to save the current "display" value, one time to update the style "display" to "none". Based on comments on the source code, this is done to prevent the browser from re-rendering on each loop (reflow). The Hide () method also checks to see if you are passing parameters that use an animated effect, even if passing in a "0" will result in a significant performance compromise. When you first call. Hide (), the performance is the slowest, and then the call becomes faster.  
in all browsers, these two methods are relatively slow to hide DOM elements. The main reason is that the. Hide () method must first save the "display" property of the element so that. Show () can restore the element to its original state. This jquery method uses the. data () to keep the information on the DOM element. To achieve this,. Hide () loops two times on each element, one time to save the current "display" value, one time to update the style "display" to "none". Based on comments on the source code, this is done to prevent the browser from re-rendering on each loop (reflow). The Hide () method also checks to see if you are passing parameters that use an animated effect, even if passing in a "0" will result in a significant performance compromise. When you first call. Hide (), the performance is the slowest, and then the call becomes faster.

Browser	hide/show
FireFox 3.6	29ms/10ms
Sa Fari 4.05	6ms/1ms
Opera 10.10	9ms/1ms
Chrome 5.0.3	5ms/1ms
IE 6.0	31ms/16ms
IE 7.0	15ms/16ms

This method is the slowest. It checks whether each element returned by the selector is currently visible, and if it is visible, calls the. Hide () method, which is not visible. The. Show () method is called. Not only that, it will not only check whether you passed a Boolean value in order to block. Hide () or. Show () will also check to see if you have passed the function to switch (toggle) instead of the visibility. There seems to be a lot of room for improvement in this approach, for example, you can select the hidden elements one at a time and then call the. Show () method, and select the remaining elements to invoke the. Hide () method.  
This method is the slowest. It checks whether each element returned by the selector is currently visible, and if it is visible, calls the. Hide () method, which is not visible. The. Show () method is called. Not only that, it will not only check whether you passed a Boolean value in order to block. Hide () or. Show () will also check to see if you have passed the function to switch (toggle) instead of the visibility. There seems to be a lot of room for improvement in this approach, for example, you can select the hidden elements one at a time and then call the. Show () method, and select the remaining elements to invoke the. Hide () method.  
This method is the slowest. It checks whether each element returned by the selector is currently visible, and if it is visible, calls the. Hide () method, which is not visible. The. Show () method is called. Not only that, it will not only check whether you passed a Boolean value in order to block. Hide () or. Show () will also check to see if you have passed the function to switch (toggle) instead of the visibility. There seems to be a lot of room for improvement in this approach, for example, you can select the hidden elements one at a time and then call the. Show () method, and select the remaining elements to invoke the. Hide () method.

Browser	Hide/show
FireFox 3.6	80ms/59ms
Safari 4.05	24ms/30ms
Opera 10.10	67ms/201ms
Chrome 5.0.3	55ms/20ms
IE 6.0	296ms/78ms
IE 7.0	328ms/47ms

Here are two very nice hide/show DOM element methods. It is twice times faster than. Show () and. Hide () on Firefox, and three times times on safari. But there is little difference between the two approaches in Ie6,ie7,chrome and opera. It is worth mentioning that, for 100 DOM nodes, the two methods in Firefox 18ms, the difference between Safari 4ms, speed differences will only be reflected in a large number of node selection. But adding and removing classes requires you to do more work, because you need to create a class to hide, and then keep an eye on the class's priority to ensure that the DOM can be hidden. JQuery Add and remove classes are manipulated by strings, so I think this method slows down as the number of classes on the element increases, but I haven't tested it yet.  
Here are two very nice hide/show DOM element methods. It is twice times faster than. Show () and. Hide () on Firefox, and three times times on safari. But there is little difference between the two approaches in Ie6,ie7,chrome and opera. It is worth mentioning that, for 100 DOM nodes, the two methods in Firefox 18ms, the difference between Safari 4ms, speed differences will only be reflected in a large number of node selection. But adding and removing classes requires you to do more work, because you need to create a class to hide, and then keep an eye on the class's priority to ensure that the DOM can be hidden. JQuery Add and remove classes are manipulated by strings, so I think this method slows down as the number of classes on the element increases, but I haven't tested it yet.  
This is two very nice hide/show DOM element methods. It is twice times faster than. Show () and. Hide () on Firefox, and three times times on safari. But there is little difference between the two approaches in Ie6,ie7,chrome and opera. It is worth mentioning that, for 100 DOM nodes, the two methods in Firefox 18ms, the difference between Safari 4ms, speed differences will only be reflected in a large number of node selection. But adding and removing classes requires you to do more work, because you need to create a class to hide, and then keep an eye on the class's priority to ensure that the DOM can be hidden. JQuery Add and remove classes are manipulated by strings, so I think this method slows down as the number of classes on the element increases, but I haven't tested it yet.

Browser	Hide/show
FireFox 3.6	11ms/11ms
Safari 4.05	2ms/2ms
Opera 10.10	6ms/3ms
Chrome 5.0.3	3ms/1ms
IE 6.0	47ms/32ms
IE 7.0	15ms/16ms

These two methods are also very beautiful. Compared to. addclass () and. Removeclass (), IE6/7 and opera have been upgraded, while other browsers maintain their level of performance. These two methods are useful when you know the current display style of the element you want to change, or if you don't change the display style of the element by inline. If you change the display style by inline, you need to make sure that the display value is set correctly when the element is re-visible. If you just use the default display value of the element or set the display value in the CSS, you only need to remove the style with a method similar to. css ({' Display ': '} ') and the element will revert to its CSS style or defaultThe display value is recognized. As a class library, jquery cannot assume that the display of an element is not set by inline, so it needs to be determined manually. But since you know you're not going to set up display on the inline, you can avoid the main factor that causes slowness.
These two methods are also very beautiful. Compared to. addclass () and. Removeclass (), IE6/7 and opera have been upgraded, while other browsers maintain their level of performance. These two methods are useful when you know the current display style of the element you want to change, or if you don't change the display style of the element by inline. If you change the display style by inline, you need to make sure that the display value is set correctly when the element is re-visible. If you just use the default display value of the element or set the display value in the CSS, you only need to remove the style with a method similar to. css ({' Display ': '} ') and the element reverts to its style on the CSS or the default display value. As a class library, jquery cannot assume that the display of an element is not set by inline, so it needs to be determined manually. But since you know you're not going to set up display on the inline, you can avoid the main factor that causes slowness.
These two methods are also very beautiful. Compared to. addclass () and. Removeclass (), IE6/7 and opera have been upgraded, while other browsers maintain their level of performance. These two methods are useful when you know the current display style of the element you want to change, or if you don't change the display style of the element by inline. If you change the display style by inline, you need to make sure that the display value is set correctly when the element is re-visible. If you just use the default display value of the element or set the display value in the CSS, you only need to remove the style with a method similar to. css ({' Display ': '} ') and the element reverts to its style on the CSS or the default display value. As a class library, jquery cannot assume that the display of an element is not set by inline, so it needs to be determined manually. But since you know you're not going to set up display on the inline, you can avoid the main factor that causes slowness.

Browser	Hide/show
FireFox 3.6	14ms/12ms
Safari 4.05	2ms/1ms
Opera 10.10	2ms/2ms
Chrome 5.0.3	2ms/1ms
IE 6.0	16ms/16ms
IE 7.0	0MS/0MS//Less than 15ms will become 0ms

purely for fun, I think: what happens if we do not spend time on each DOM node, but instead work on the style sheet? Does this increase speed? In fact, in terms of daily use, the above test method is fast enough, but if there are 10,000 nodes on the page to be hidden and display it? It's slow enough to choose all of them. If I can control the stylesheet, I can completely avoid the time spent. But I have to tell you, there is a lot of risk in this approach.
the risk is the cross-browser issue when controlling the style sheet. First, I tried to insert a "style" tag with a class from jquery, but there was a cross-browser problem. Then I tried to use JavaScript to create the Stylesheet node and class, but there were too many APIs, and it took a lot of time to figure it out. Finally, giving up programming, I wrote a style tag with a class in the head area. It is too slow to create a stylesheet programmatically, but if it is created, it is easy to give it an ID and use its "disabled" property.
purely for fun, I think: what happens if we do not spend time on each DOM node, but instead work on the style sheet? Does this increase speed? In fact, in terms of daily use, the above test method is fast enough, but if there are 10,000 nodes on the page to be hidden and display it? It's slow enough to choose all of them. If I can control the stylesheet, I can completely avoid the time spent. But I have to tell you, there is a lot of risk in this approach.
the risk is the cross-browser issue when controlling the style sheet. First, I tried to insert a "style" tag with a class from jquery, but there was a cross-browser problem. Then I tried to use JavaScript to create the Stylesheet node and class, but there were too many APIs, and it took a lot of time to figure it out. Finally, giving up programming, I wrote a style tag with a class in the head area. It is too slow to create a stylesheet programmatically, but if it is created, it is easy to give it an ID and use its "disabled" property.
purely for fun, I think: what happens if we do not spend time on each DOM node, but instead work on the style sheet? Does this increase speed? In fact, in terms of daily use, the above test method is fast enough, but if there are 10,000 nodes on the page to be hidden and display it? It's slow enough to choose all of them. If I can control the stylesheet, I can completely avoid the time spent. But I have to tell you, there is a lot of risk in this approach.
the risk is the cross-browser issue when controlling the style sheet. First, I tried to insert a "style" tag with a class from jquery, but there was a cross-browser problem. Then I tried to use JavaScript to create the Stylesheet node and class, but there were too many APIs, and it took a lot of time to figure it out. Finally, giving up programming, I wrote a style tag with a class in the head area. It is too slow to create a stylesheet programmatically, but if it is created, it is easy to give it an ID and use its "disabled" property.

1 2 3

<style id= "Special_hide" >.special_hide {display:none;} </style> <!--...--> <div class= "special_hide" >special Hide div</div>

1	$ (' #special_hide '). attr (' disabled, ' true ');

1	$ (' #special_hide '). attr (' disabled ', ' false ');

Briefly, here's how to change the display state of an element, in the fastest to slowest order:

• Disable/Enable style sheets

• . CSS (' Display ', '),. css (' Display ', ' none ')

• . addclass (),. Removeclass ()

• . Show (),. Hide ()

• . Toggle ()

. Show () and. Hide ()

. Toggle ()

. addclass () and. Removeclass ()

. css ({' Display ': ' None '}) and. css ({' Display ': ' Block '})

Prohibit style sheets

Then in javascript:

Get! All elements with the class "Special_hide" are displayed. To hide them, you just need to ...

Now all of them are hidden. The total JavaScript time is 0-1ms on all browsers. Your javascript is just used to change a property. Of course, the browser will still take the time to re-render the page, but in fact you have avoided JavaScript processing time. If you call a. Toggle (),. Hide () or. css () methods, then this method will fail. Because those methods set CSS styles inline, these styles have higher precedence. To bring this method into effect again, simply call the. css (' Display ', ') to remove the inline style. This method also takes more effort, because it requires defining class and assigning these classes to the elements that need to be displayed/hidden on the page, but it might be worthwhile if you are dealing with an extremely large number of elements.

It is important to note that in most cases, these methods are fast enough. When you're working on a large set of jquery, the. Show () and. Hide () methods become very slow under IE, which you might want to use with the addclass () or. Removeclass () method. The method of disabling/enabling style sheets is only necessary in extreme cases to use the