question about css display and Jquery Hide function

does Display:none or jquery Hide functi开发者_如何学运维on speed up my website, i mean i'm developing a website where i have a DIV but it's not always needed so if a give him CSS property Display:none or using jquery .Hide will that speed up my website ? if not how to do that?

Thanks

If a div is hidden using display:none in css, it will not participate in the render tree, and therefore will technically make it faster from that perspective. Using jQuery to hide it may actually be slower, because the browser may have already started computing the layout when that piece of javascript gets run, thus causing it to recompute.

However, it is unlikely to make a perceived difference unless it is complex enough to take a significant amount of time to render.

It should be easy enough to test the difference, no?

Hiding a <div> element will usually not have a noticeable impact on performance.

Is your website running too slowly?
If so, how? Javascript execution? Initial page load? Resource loading?

Unless its one uber complex div its not going to speed anything up. The actual rendering time of the browser is miniscule compare to the transfer time of the data from the server. And the div is still apart of that data.

jquery will always be slower than css, but neither will speed up your website speed because it doesnt matter if an element is visible is has to be loaded anyway.

There will be a negligible difference if an element is set to display:none. Although if you have a lot of images in the section then some browsers will not download them until the section becomes visible, so it could make a fair difference.

Using jQuery will almost certainly be slower as others have reasoned.

However, this is very unlikely to be your performance bottleneck. You should look at using gzip/deflate compression and reducing HTTP requests. Check out Google's Page Speed and Yahoo's YSlow plugins for Firefox, they will give you some decent advice (but don't follow them religiously)