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

Sign in to queue

Description

Creating high performance web apps is crucial for every web developer. Learn directly from the Internet Explorer Performance Team about what actually drives performance across the web and how you can make your sites faster. This is the same team that brought you GPU accelerated graphics and compiled JavaScript, and they will share their favorite 50 best practices for web developers.
For more information, check out these courses on Microsoft Virtual Academy:

Day:

4

Code:

PLAT-386T

Room:

Thunder

Embed

Download

Download this episode

For more information, check out these courses on Microsoft Virtual Academy:

The Discussion

  • User profile image
    emn13

    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.)

  • User profile image
    YJingLee

    download ppt url? 

  • User profile image
    George_​Curelet_​Balan

    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

  • User profile image
    erm

    "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

  • User profile image
    ScriptBunny

    Awesome session! Awesome!

  • User profile image
    Carlos Regata

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

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you canĀ Contact Us.