50 performance tricks to make your Metro style apps and sites using HTML5 faster

Great session!  I was curious as to the claim about JS perf being just a factor 5 behind C++, however, and I tried to reproduce the result the talk mentions, in which a simple JS loop takes 200ms compared to C++'s 40ms.

The proposed benchmark failed to actually use data from any of the loop iterations except the last; actually running that code took essentially no time in C++ due to optimization.  After converting the loop to a summation, C# and MSC took less than 10ms, and gcc less than a microsecond (!) as opposed to the claimed 40ms in the talk; this was due to the fact that gcc was probably able to factor out some of the arithmetic into fewer multiplications.  Using the following (similar function) proved too complex for gcc's optimizer:

long long DoMath(int val) {
    long long result=0;
    for(int i=0;i<100000;i++)
        for(int j=0;j<10000;j++)
           result += i+j*j+val;
    return result;
}

and the equivalent javascript:

 function DoMath(val) {
    var result=0;
    for(var i=0;i<100000;i++)
        for(var j=0;j<10000;j++)
           result += i+j*j+val;
    return result;
}

In this formulation (note that I increased the loop iteration count to be able to more accurately benchmark) I obtained the following measurements:

C# (.NET 4.0): 1.3s

Visual Studio 2010 MSC(C++): 1.01s

GCC 4.6 (C++): 0.85s

Chrome 15.0.874.24 beta-m (JS): 3.0s

IE9 (JS): 85s (approx)

Firefox (JS): 150s (approx)

The claim that modern JS engines are only 5 times slower than C++ seems fishy, certainly when supported by the example used in the talk.  I had to go through several iterations of the benchmark to confuse the C++ optimizers enough to get there; even then only chrome manages to get within a factor 5 whereas IE9 is a full factor 100 slower and Firefox almost twice that.  Furthermore, this is an optimistic benchmark that uses solely very basic types and arithmetic, and thus doesn't expose any of javascripts tricky dynamic name-resolution, so it's likely to be a best-case scenario.

The claim made in the session is unrealistic (which is a bit of a shame, since javascript is much faster, and the rest of the talk has lots of interesting pointers.)

download ppt url? 

Interesting comparison of some web sites performance discussed in the first 20 minutes. Diagrams show breakout time taken by each of the 11 web architectural subsystems. Approx time markups (in Minutes:Seconds format) of interesting points, follow:

[04:40] six travel sites compared

[05:30] statistic comparison results

[07:15] which site is the fastest?

[07:56] which site is the slowest?

[08:40] Web performance dimensions used: 1. network/bandwidth, 2. CPU load, 3. GPU load

[09:30] measurement done with Windows Performance Toolkit

[10:08] CPU activity chart for browsing a web page

[10:20] CPU activity trace of web activity

[11:45] web platform is mostly single CPU (something can be parallelised)

[13:10] "time to glass" browser activity (very critical)

[13:37] "lapse page load time", CPU time, CPU idle time

[14:26] where does CPU time go?

[14:45] architectural diagram (11 subsystems) of the browser (web platform)

[15:57] boundary between Javascript and browser (time spent in this communication tier)

[16:48] breakout times diagram of web architectural subsystems use in the 6 compared travel web sites

[17:57] bottleneck for each travel site is different

[18:30] pie diagram where time goes for compared sites

[18:54] GPU & display times are most critical for web performance

[19:03] profiling 25 heaviest interactive AJAX sites: gmail, facebook wall, etc. Formatting, layout and display takes longer, Javascript plays little

[20:05] start of the 50 web performance tricks presentation

"Generate your SVGs by hand"

You really expect web developers or web designers to spend time writing an SVG by hand in notepad? You really expect me to use border-radius when a very large portion of IE users don't have a browser that even supports it? You expect me to restructure my CSS into per page files? Create sprite sheets by hand?

When did it become my job to solve the problems that browser vendors are having?

I'm not sure what world this guy lives in, but as a web application developer, I can promise you I wont waste my time with 90% of the tips suggested. It's not worth my time, it's not worth the

Awesome session! Awesome!

This is the best Microsoft talk I have every seen on Channel 9. Thank you to Jason Weber.