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
The reality of this is that sometimes it needs to do more complicated work in the background...
If you have an object which is defined as
. This is because a
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
(which is right in some sense).
How jquery solves the problem for you
When asking jquery what the height of a
element is (by calling
), it's more clever than that.
It can identify that the element is defined as
, 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.
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.