Run jsperf tests in a bunch of WebPagetest browsers

February 11th, 2013. Tagged: JavaScript, performance

Motivation

1. You write a new test to confirm a JavaScript-related performance speculation
2. You click
3. Your test runs in a bunch of browsers

Glossary

JSperf.com is the site where all you JavaScript performance guesswork should go to die or be confirmed. You know how the old wise people say "JSperf URL or it didn't happen! Now off my lawn!". Yup, that jsperf.com

WebPagetest.org (WPT) is the site where you get answers to the ol' question: "Why do people say my oowsome site is slow? And what should I do about it?"

Bookmarklet is a little piece of JavaScript you conveniently access from your browser bookmarks and inject into other non-suspecting sites.

Github is where you host code.

Bookmaker tool makes a bookmarklet from a .js file URL (probably hosted on github)

Trouble in paradise

These days we're so happy and spoiled with all these amazing tools around us. And yet, when you create a JSPerf test, you have to open all these browsers and run the test everywhere. Even IE. And, when on Mac, IE is usually not readily available. Plus it comes in a bunch versions - from almost-but-not-quite-forgotten IE6, all the way to IE10 The Greatest - and they have different, sometimes contradicting, performance characterics.

To the rescue: WPT

WebPagetest has: a/ ability to run in a bunch of browsers and b/ an API

The bookmarklet

The bookmarklet. It's here, on github

It starts by inquiring about your WPT API key. I know, you have to get one. You can read the API docs on how to get one, but let me save you the trip: you just need to ask pmeenan@[the tool's domain].org for a key. Politely. Tell him I sent you. Promise not to abuse.

  var key = localStorage.wpt_key;
  if (!key) {
    var prompt = window.__proto__.prompt;
    key = prompt('Your WebPageTest API key, please?');
    if (!key) {
      return gameOver();
    }
    localStorage.wpt_key = key;
  }

The key is stored in your localStorage so you don't have to paste it all the time.

Oh, you may wonder what's up with that:

var prompt = window.__proto__.prompt;
prompt('Message...');

Looks like something somewhere on jsperf is doing window.prompt = function(){}, same for window.open and probably others. Makes sense, you don't want popup-y stuff (by the thousands) while running a test a gazilion times. So the bookmarklet has to go the window.__proto__ for the original prompt

Moving on.

Setting up the constant params of the API call. The variable param will be the location which will tell what browser to use. We also give the (undocumented) time a value of 60s, so that the test has time to run. We also want only one run and just the first run (no full cache run).

The URL to test will be the current page loaded in jsperf.com which is where you run the bookmarklet. And we'll append #run for autorun.

  // base params
  var wpt = 'http://www.webpagetest.org/runtest.php?';
  var params = {
    k: key,
    time: 60,
    runs: 1,
    fvonly: 1,
    url: 'http://jsperf.com' + location.pathname + '#run'
  };
  Object
    .keys(params)
    .forEach(function(key) {
      wpt += key + '=' + encodeURIComponent(params[key]) + '&';
    });

Finally, setup the locations with browsers IE6,7,8,9,10 and open all these browser windows:

  var locations = localStorage.wpt_locations;
  if (!locations) {
    locations = ['Dulles_IE6', 'Dulles_IE7', 'Dulles_IE8', 'Dulles_IE9', 'Dulles_IE10'];
  }
  
  // pop some windows up
  var open = window.__proto__.open;
  locations.forEach(function(loco){
    open(wpt + 'location=' + encodeURIComponent(loco));
  });

Again, the full source is here on github

Github has a "raw" version, e.g. this so we take this url, paste it in the bookmaker tool and we get a nice installable bookmarklet link.

Install

Drag this link to you bookmarks:

jsperf -> wpt

Run

1. Go to any jsperf test, e.g. http://jsperf.com/array-proto-vs/3
2. Click the bookmarklet
3. Observe 5 new tabs with 5 IE versions running your test!

jsperf

More browsers

In addition to the browsers (locations) I've defined you can always add more, like Chrome and Firefox. However you probably have these already handy so no need to kill WPT's servers. But the option is there, just edit your localStorage.wpt_locations

Thanks for reading! Comments welcome!

Tell your friends about this post: Facebook, Twitter, Google+

36 Responses

  1. I really like this idea. It would be cool if jsperf had the ability to internally spin up a browser and measure the performance, but this is a great self-sufficient workaround.

    Stoyan, why not set each test with multiple (3) runs? Wouldn’t it be more accurate, in theory? Then again it would be taxing on the WPT machines.

  2. Good Job Stoyan! Once I had the idea of a jsperf-swarm where a swarm of different browsers are always up checking for new/untested jsperf tests then testing accordingly, therefore achieving several browsers test coverage for all jsperf tests ;-)

  3. Hello There. I discovered your weblog using msn. This is an extremely smartly written article.

    I’ll be sure to bookmark it and come back to read extra of your helpful information. Thanks for the post. I’ll definitely return.

    Here is my page: ceny stron internetowych

  4. Nice idea, careful thought because WPT machines are low on performance.

    Little CPU, little RAM, old computer. IE7 Paris is a Dell which is 7 years old.

    Basically you could get an IE6 in Dulles that outperforms my IE7.

    So be carefull :-)

  5. Saw that you are only using Dulles locations, as long as they use similar hardware, you’re good

  6. Hello! I just would like to give a huge thumbs up for the amazing info you’ve here on this post. I might be coming back to your blog for more soon.

    [url=http://cheapsredsoleshoesa.fast-page.org]red bottom sandals[/url]

    http://outletschristianlouboutinsa.0fees.net

  7. “Dulles_Chrome”(localStorage.wpt_locations) became “Invalid Location” when I set locations as :
    locations = ['Dulles_Chrome', 'Dulles_Firefox', 'Dulles_Safari', 'Dulles_iPhone4 iOS 5.1', 'Dulles_NexusS Android 2.3'];

  8. Hi to every one, it’s genuinely a pleasant for me to go to see this web page, it consists of important Information.

  9. Quite a great post it made me smile. I pay a visit to this web site
    on a daily basis since it’s definitely enormously funny.

  10. Having read this I believed it was extremely informative.

    I appreciate you taking the time and energy to put this informative article together.
    I once again find myself personally spending way too much time both reading and commenting.

    But so what, it was still worthwhile!

  11. Hey there! I know this is kind of off-topic but I had to
    ask. Does managing a well-established blog such as yours require
    a large amount of work? I’m completely new to blogging but I do write in my journal every day. I’d like to start a blog so
    I will be able to share my own experience and thoughts online.

    Please let me know if you have any suggestions or tips
    for brand new aspiring bloggers. Thankyou!

  12. My brother recommended I may like this blog. He was
    totally right. This post truly made my day. You cann’t consider simply how much time I had spent for this information! Thanks!

  13. Thanks for some other great post. The place else may just anyone get
    that type of info in such an ideal manner of writing?
    I’ve a presentation subsequent week, and I’m on the look
    for such info.

  14. He padecido psoriasis por 5 aƱos y experimentado con toda clase de tratamientos con limitado exito

  15. It’s an remarkable paragraph designed for all the online users; they will take benefit from it I am sure.

  16. I just could not leave your site before suggesting that
    I really loved the standard information a person supply in your guests?
    Is gonna be back steadily in order to investigate cross-check
    new posts

  17. My programmer is trying to convince me to move to .
    net from PHP. I have always disliked the idea because of the expenses.
    But he’s tryiong none the less. I’ve been using WordPress on a
    variety of websites for about a year and am worried about switching
    to another platform. I have heard very good things about blogengine.
    net. Is there a way I can import all my wordpress posts
    into it? Any help would be really appreciated!

  18. Hi there, just became alert to your blog through Google, and found that it’s really informative. I’m going to watch out for brussels.
    I will be grateful if you continue this in future. A lot of people will be benefited from
    your writing. Cheers!

  19. Howdy, There’s no doubt that your website could possibly be having internet browser compatibility issues. When I take a look at your site in Safari, it looks fine however, if opening in Internet Explorer, it’s got some overlapping issues.
    I just wanted to provide you with a quick heads up!
    Aside from that, wonderful blog!

  20. Nice post. I learn something new and challenging on websites I stumbleupon everyday.
    It will always be interesting to read through articles from other writers and
    use a little something from other web sites.

  21. It’s hard to come by educated people for this subject, however, you seem like you know what you’re talking about!

    Thanks

  22. Hey! This is my first visit to your blog! We are a team of volunteers and
    starting a new project in a community in the same niche.
    Your blog provided us useful information to work on. You have done a outstanding job!

  23. What i do not realize is in truth how you are not actually a
    lot more neatly-liked than you may be now. You are so
    intelligent. You already know thus significantly on the
    subject of this topic, produced me in my opinion believe it from so many numerous
    angles. Its like men and women don’t seem to be fascinated until it is something to accomplish with Girl gaga! Your own stuffs outstanding. Always maintain it up!

  24. I am sure this piece of writing has touched all the internet users, its really really good
    post on building up new blog.

  25. Hello! I’m at work surfing around your blog from my new apple iphone! Just wanted to say I love reading through your blog and look forward to all your posts! Carry on the outstanding work!

    Have a look at my blog post maid of honor speeches *hotelrainbowsunnybeach.com*

  26. We are a gaggle of volunteers and opening a brand new
    scheme in our community. Your site provided us with helpful info to work on.
    You have done a formidable job and our entire group will probably
    be thankful to you.

  27. continuously i used to read smaller areticles or reviews
    which also clear their motive, and that is alsso happening with
    this article which I am reaxing at this time.

  28. Nice respond in return of this issue with genuine arguments and describing everything regarding that.

  29. Hey! This is my 1st comment here so I just wanted to give a quick shout out and tell you I really enjoy reading through your articles.
    Can you recommend any other blogs/websites/forums that go over
    the same subjects? Thanks for your time!

  30. Please gold spot goby contact us if you have a few questions about the
    gold such as gold bars. We calculate the formal charges here,
    minus 1 plus 0 is minus 1. This step is vital if you don’t want to
    make the full payment within 48 hours of purchase of gold gold
    spot goby commodity.

  31. Careful back-link building is the specific cornerstone of effective
    off site SEO

  32. Fascinating blog! Is your theme custom made or did
    you download it from somewhere? A design like yours with a few simple adjustements would really
    make my blog shine. Please let me know where you got
    your theme. Many thanks

  33. Amazing blog!! Did you made or download this theme custom?
    a anything worked.I will too know where you got your theme.Thx

  34. It is our point of reference in our life frequently changes how we see things. Sometimes this change is good and sometimes this change is bad but it is our paradigm that exerts the most control how we act.

  35. Paragraph writing is also a fun, if you be familiar with hen you can write or
    else it is complex to write.

  36. these words are magic for me…really nice ..thx

Leave a Reply