Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

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

Download

Right click “Save as…”

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:

Follow the Discussion

  • 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

  • ermerm

    "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

  • ScriptBunnyScriptBunny

    Awesome session! Awesome!

  • Carlos RegataCarlos Regata

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

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.