I am testing out a test case a friend of mine noticed. He was using window.innerheight in a loop, and there was a very significant drop in the fps.

Here is the link to the jsperf I created to test it

The only explanation I can e up with is that this is a getter, and calculates the actual height, on every call. Is that right? Any documentation where I can verify this?

I am testing out a test case a friend of mine noticed. He was using window.innerheight in a loop, and there was a very significant drop in the fps.

Here is the link to the jsperf I created to test it http://jsperf./innerheight

The only explanation I can e up with is that this is a getter, and calculates the actual height, on every call. Is that right? Any documentation where I can verify this?

• javascript
• performance
• jsperf

• 1 window.innerheight is a getter, then have a function behind the .innerheight, when you save on a variable, you just save the result – GTSouza Commented Jul 14, 2012 at 19:54

2 Answers 2

This question was posted a few years back, but just in case someone else finds their way here experiencing similar results.

From this blog:

The problem is WebKit likes to recalculate the layout of the dom pretty much every single time you use something similar to getBoundingClientRect. (Even getting the window.innerHeight/innerWidth will force a recalculation) ... All calls to get any calculated dimension from the DOM should be cached or avoided.

Caching window dimensions once on initialization and on each resize improved performance for me significantly.

In your first loop (innerheight), you are accessing an objects property and assigning it to h. In the second loop (cached), you just have h. Of course the cached one will be faster.