I’ve been dealing with some unfortunate scroll performance issues at work lately, and to aid me in that task I started using a handy CSS stress test bookmarklet made by Andy Edinborough. It works by iterating through all your classes and measuring the performance improvement you get from dropping them – thus helping you find out which classes are making your page scroll speed slow. It’s handy but the use case too constrained for my needs.
Another approach for measuring page scroll performance
I wanted to be able to simply run a test anywhere on the page just for a single run, and I didn’t really care about the classes, since I was manually disabling styles and moving things around, unbinding event etc to find out where the biggest performance improvements could be had.
You can find the bookmarklet-ready gist here: https://gist.github.com/1459352
- The jQuery object ($) must be present on the page (I could make it non-jquery dependent, if anybody is interested enough)
How to use it
The hacked up code
This is what the code looks like, if you’re interested:
How does it work
It basically scrolls a few hundred down and up 100 pixels, measuring the total time it takes to do that.
I had to make a hack to get the thing to get triggered more often – I believe that it’s because the browser is optimizing scroll events somehow – making sure the scroll event isn’t triggered way too often. So I wrapped the thing that triggers the page to scroll in a timeout thing. It’s probably not super super reliable, but at least I had pretty much consistent results.
If you have any questions, suggestions, bug reports or whatever, feel free to let me know by commenting or pinging me on Twitter.
I don’t expect to be maintaining this much or putting any more effort in it, unless there’s somebody else out there that will find this useful.