The performance test of jquery various show/hide ways

This article is a performance test of jquery's various show/hide methods. The authors tested the phrase from Robert Duffy's jquery conference at San Francisco: ". Hide () and. Show () are slower to execute than direct changes to CSS." But the author did the test by failing to find Robert Duffy to ask why. The following translation is not a full text translation, only a few points.

Used as a test is an HTML page with 100 Div, with class and some content. To eliminate the time it took to find these Div, the selector $ (' div ') was cached. 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 ') changes an attribute of the <style> element . Show () and. Hide ()

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 element's "display" property so that the. Show () can restore the element to its original state. Here we use the. Data () jquery method to store the information on the DOM element. For this purpose,. Hide () loops two times on each element, once to save the current "display" value, once to update the style "display" to "none". Based on the comments on the source code, this is done to prevent the browser from rendering on each loop (reflow). The Hide () method also checks whether you pass parameters that use animation effects, even if passing in a "0" can also give you a significant performance discount. The slowest performance occurs the first time the. Hide () is invoked, and then the call becomes faster.

Browser	Hide/show
FireFox 3.6	29ms/10ms
Safari 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

. Toggle ()

This method is the slowest. it checks whether each element returned by the selector is currently visible, calls the. Hide () method if it is visible, and calls the. Show () method. Not only that, it will check whether you pass a Boolean value in to block. Hide () or. Show (), and check to see if you passed in a function to switch (toggle) instead of the visibility. There seems to be a lot of room for improvement, 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

. addclass () and. Removeclass ()

Here are two very nice hidden/displayed DOM element methods. The speed of Firefox is twice times that of. Show () and. Hide (), compared to three times times in Safari. But in Ie6,ie7,chrome and opera, there is little difference between the two approaches. It is worth mentioning that, for 100 DOM nodes, the two methods in Firefox on the difference between 18ms, in Safari 4ms, the difference in speed will only be reflected in a large number of node selection. However, adding and removing class requires you to spend more work, because you need to create a class for the hidden, and then keep an eye on the class priority to ensure that the DOM is hidden. The jquery addition and removal class is 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

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

These two methods are also very beautiful. compared to. addclass () and. Removeclass (), IE6/7 and opera have been upgraded and maintained in other browsers. 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 in a inline way. If you change the display style in a inline way, you need to make sure that the display value is set correctly when the element is re visible. If you just use the element's default display value or set the display value in CSS, you only need to remove the style with a method similar to CSS ({' Display ': '} '), and the element will revert 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 by the hands. But now that you know you're not going to inline the setup display, you can avoid the main factor that causes the slowdown.

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, specifically look here

Prohibit style sheets

For fun's sake, I thought: What if we don't spend time on every DOM node, but on the style sheet? Is this going to improve speed? In fact, in terms of daily use, the test used in the above method is fast enough, but if there are 10,000 nodes on the page need to hide and display it. It's slow enough just to choose all of them. If I can control the stylesheet, then 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 in the cross-browser problem when controlling the style sheet. First, I tried to insert a "style" tag with class in jquery, but there was a cross-browser problem. Then I try to use JavaScript to create stylesheet nodes and classes, but there are so many APIs that it takes a lot of time to figure it out. Finally, I gave up the way of programming, and I wrote a style tag with class in the head area. It is too slow to create stylesheet programmatically, but if it is created, it is easy to give it an ID and use its "disabled" attribute.

<!--...-->

And then in javascript:

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

Now they're all hidden. The total JavaScript time consuming is 0-1ms in all browsers. your javascript is just used to change an attribute. Of course, browsers still take time to recreate the page, but you've actually avoided JavaScript processing time. If you call the. Toggle (),. Hide () or. css (), the method will fail. Because those methods set CSS styles inline, these styles have higher precedence. To make this method work again, simply invoke the. css (' Display ', ') to remove the inline style. This approach also takes a lot more effort because it requires defining class and assigning these classes to the elements on the page that need to be shown/hidden, but if the number of elements you are dealing with is extremely large, then it may be worthwhile.

Briefly, here is a way to change the display state of the elements, in the quickest to slowest order: Disable/Enable style sheets. CSS (' Display ', '),. css (' Display ', ' none '). addclass (),. Removeclass () . Show (),. Hide (). Toggle ()

It should be noted that in most cases these methods are fast enough. When you want to manipulate a large set of jquery, the show () and the. Hide () method becomes very slow under IE, which you may want to use addclass () or. Removeclass () method. disabling/enabling style sheets is only necessary in extreme cases.

Translated by Icyfire @ Company on June 26, 2010