Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Some jQuery getters are setters as well

, 12 Nov 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
CodeProjectA couple of days ago I ran into an interesting characteristic of jQuery -Some methods which are 'getters' are also 'setters' behind the scenes.I know this sounds weird, and you might even be wondering why the hell this matters... Just keep reading and I hope you'll understand... :)If you

A couple of days ago I ran into an interesting characteristic of jQuery -
Some methods which are 'getters' are also 'setters' behind the scenes.

I know this sounds weird, and you might even be wondering why the hell this matters... Just keep reading and I hope you'll understand... Smile | :)

If you call the element dimension methods in jquery (which are height(), innerHeight(), outerHeight(), width(), innerWidth() & outerWidth() ) you'll probably be expecting it to just check the javascript object properties using simple javascript and return the result.
The reality of this is that sometimes it needs to do more complicated work in the background...

The problem

If you have an object which is defined as 'display:none', calling 'element.clientHeight' in javascript, which should return the object's height will return '0'. This is because a 'hidden' object using 'display:none' isn't rendered on the screen and therefore the client never knows how much space it visually actually takes, leading it to think it's dimensions are 0x0 (which is right in some sense).

How jquery solves the problem for you

When asking jquery what the height of a 'display:none' element is (by calling $(element).height() ), it's more clever than that.
It can identify that the element is defined as 'display:none', and takes some steps to get the actual height of the element :
  • It copies all the element's styles to a temporary object
  • Defines the object as position:absolute
  • Defines the object as visibility:hidden
  • Removes 'display:none' from the element. After this, the browser is forced to 'render' the object, although it doesn't actually display it on the screen because it is still defined as 'visibility:hidden'.
  • Now the jquery knows what the actual height of your element is
  • Swaps back the original styles and returns the value.

Okay, so now that you know this, why should you even care ?

The step that jquery changes the styles of your element without you knowing, which forces the browser to 'render' the element in the background can take time. Not a lot of time, but still take some time. Probably a few milliseconds. Doing this once wouldn't matter to anyone, but doing this many times, lets say in a loop, might cause performance issues.

Real life!

I recently found a performance issue on our site that was caused by this exact reason. The 'outerHeight()' method was being called in a loop many times, and fixing this caused an improvement of ~200ms. (I hope that by now I don't have to explain the importance of 200ms and the effect it can have on your ecommerce site!)

I will soon write a fully detailed post about how I discovered this performance issue, how I tracked it down, and how I fixed it.

Always a good tip!

Learn how your libraries are working under the hood. This will give you great power and a great understanding of how to efficiently use them.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Gilly Barr
Web Developer
Israel Israel
Started programming e-commerce sites with PHP & MySQL at the age of 14. Worked for me well for about 5 years.
 
Transfered to C# & asp.net, while serving in the IDF.
 
Currently working as a web developer for Sears Israel (SHC).
 
Check out my blog!

Comments and Discussions

 
QuestionWonderful tip! Pinmember Forogar 24-Nov-13 6:10 
AnswerRe: Wonderful tip! PinmemberGilly Barr2-Dec-13 22:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141216.1 | Last Updated 12 Nov 2013
Article Copyright 2013 by Gilly Barr
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid