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... :)
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 its 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 it takes some time. Probably a few milliseconds. Doing this once wouldn't matter to anyone, but doing this many times, let's 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.
