Saturday, December 11, 2010

The Slowest JavaScript Application on Earth

While writing an article about profiling browser-based JavaScript applications I thought it might be fun to have the worst possible example to make it better step-by-step.

Thus I created this VaporJS based Github repo which will accept only the worst offenders in JavaScript performance best practices. Pull requests that make it slower or add cool new bad performing features are very much appreciated.
Ideas
  • Do some blocking Ajax calls.
  • I think we need jQuery selectors that won't make it through querySelectorAll.
  • Some legacy Prototype.js code to slow down Array operations can't be bad.
  • Add some CSS that will make rendering really hard (The * selector can help).
  • Hint: Writing to localStorage blocks the UI thread in Chrome and Firefox.
  • When you load ressources, make sure you always bust the cache so it doesn't get in your way.
  • A little flash movie with the right wmode can have devastating effects.
If you are scared to contribute because future employers might find the code and not hire you, we provide a wikileaks-style-highly-anonymous way to send in patches: @-messages a link to @cramforce.

Important: Thanks for all the awesome contributions. Please make sure the changes are realistic (as in: some people would actually put them in because they don't know better) and add features.

4 comments:

Malte said...

The first pull request is in. Lovely rainbow animation. https://github.com/cramforce/The-Slowest-JavaScript-Application-on-Earth/commit/cd73a7f8cccef81157187e7fe012b00ffa6d6beb

Malte said...

Woot, we now have support for jQuery and VaporJS!

Also when you move the mouse the app saves of its state to localStorage.

Malte said...

Thanks for all the contributions. Please make sure that every de-optimization also adds a feature.

Richard Bradshaw said...

It would be cool to have the same app but as fast as possible to compare...