filamentgroup/jQuery-Equal-Heights — Issue #2: Optimize via Caching
Author: ryanfitzer
Created: 2012-01-23 02:22:04+00:00
State: open

I found an extracted version of your `equalHeights` function on a recent project while doing a performance audit. When viewing the site's waterfall table via webpagetest.org, IE8's slow js engine showed a blocking gap [1] of 4.1 seconds (it was a js-intesive site) . Once the function was removed, the gap went down to 1.3 seconds. A MAJOR improvement.

The largest contributing factor turned out to be the multiple `height()` queries. We had 13 top-level menu items that each had a dropdown containing 1-5 columns of list items, totaling 60 columns in all. That meant the DOM had to be recalculated 120 times. Fortunately, we were able to substitute the function with a css fix. Barring a css fix, at least caching the `height()` query (among other things) would have cut the performance hit significantly.

My optimized suggestion: https://gist.github.com/1660062

[1]: A gap where all assets are blocked from downloading while javascript is executed.