Post on 24-Feb-2016
description
transcript
Internet Explorer 9: Faster Websites with IE9Aditee ReleArchitect Evangelist
Agenda
• IE9 – a quick look• Performance
Improvement • Network
optimization• JavaScript engine• Layout &
Rendering
PAGE 3
The capabilities of the web are increasing every day, but the way we experience the web isn’t keeping up.
PAGE 4
Some Markup Has Been Retrieved5
Content Starts To Render6
Some Images Start To Appear7
Mast Head Appears8
Right Column Starts To Render9
Personalized Content Starts To Appear10
Advertisements Load11
Done!12
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
14
TotalSize
NumberElements CSS Rules Image
FilesScript Files
ScriptLines
ScriptLibs
News Site #1 3280kb 8662 1293 137 21 14,216
News Site #2 961kb 820 2964 44 16 3,812
News Site #3 300kb 1187 1366 26 4 9,481
News Site #4 1462kb 4257 893 76 21 11,988
News Site #5 2981kb 3578 1917 88 19 20,722
Five Popular News Sites
JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI
PAGE 15
Variation in Total Size
Five Popular News Sites
TotalSize
NumberElements CSS Rules Image
FilesScript Files
ScriptLines
ScriptLibs
News Site #1 3280kb 8662 1293 137 21 14,216
News Site #2 961kb 820 2964 44 16 3,812
News Site #3 300kb 1187 1366 26 4 9,481
News Site #4 1462kb 4257 893 76 21 11,988
News Site #5 2981kb 3578 1917 88 19 20,722
JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI
PAGE 16
Amount of JavaScript
Five Popular News Sites
TotalSize
NumberElements CSS Rules Image
FilesScript Files
ScriptLines
ScriptLibs
News Site #1 3280kb 8662 1293 137 21 14,216
News Site #2 961kb 820 2964 44 16 3,812
News Site #3 300kb 1187 1366 26 4 9,481
News Site #4 1462kb 4257 893 76 21 11,988
News Site #5 2981kb 3578 1917 88 19 20,722
JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI
PAGE 17
Amount of JavaScript
Five Popular News Sites
TotalSize
NumberElements CSS Rules Image
FilesScript Files
ScriptLines
ScriptLibs
News Site #1 3280kb 8662 1293 137 21 14,216
News Site #2 961kb 820 2964 44 16 3,812
News Site #3 300kb 1187 1366 26 4 9,481
News Site #4 1462kb 4257 893 76 21 11,988
News Site #5 2981kb 3578 1917 88 19 20,722
JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI
18
Which sites loads the fastest?
TotalSize
NumberElements CSS Rules Image
FilesScript Files
ScriptLines
ScriptLibs
News Site #1 3280kb 8662 1293 137 21 14,216
News Site #2 961kb 820 2964 44 16 3,812
News Site #3 300kb 1187 1366 26 4 9,481
News Site #4 1462kb 4257 893 76 21 11,988
News Site #5 2981kb 3578 1917 88 19 20,722
JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI
19
Which sites loads the slowest?
TotalSize
NumberElements CSS Rules Image
FilesScript Files
ScriptLines
ScriptLibs
News Site #1 3280kb 8662 1293 137 21 14,216
News Site #2 961kb 820 2964 44 16 3,812
News Site #3 300kb 1187 1366 26 4 9,481
News Site #4 1462kb 4257 893 76 21 11,988
News Site #5 2981kb 3578 1917 88 19 20,722
JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI
PAGE 20
Multi-System Performance
21
HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering
Average Distribution Across 5 News Sites
22
Average Distribution Across Top AJAX Sites
HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
Quick Caching Overview
25
First Request
GET /images/banner.jpg HTTP/1.1Host: www.microsoft.com
Second Request
GET /images/banner.jpg HTTP/1.1Host: www.microsoft.com
First Response
HTTP/1.1 200 OKContent-Type: image/jpegExpires: Fri, 30 Sep 2011 00:00:00 GMT
No Response Required
Better performance, with the same markup!Caching Improvements
26
HTTP Caching Improvements• Improve heuristic expiration• Support: crazy-far-futures Expires headers• Support: Vary: Accept-Encoding• Support Vary: Host• Improved scavenger• Redirect caching• Back/forward optimization• Cross-domain HTTPS revalidation
mitigation
Parallel Connection Improvements• Increase connections-per-proxy to 12• Speculatively pre-open additional
connection• Improved LCIE connection limiting
DNS Improvements• Pre-fetch based on Link Rel=Prefetch• Pre-fetch based on likely matches in ULV
flyout• Pre-fetch addresses based on previous use• Fast-path for IP literals
General Improvements• Shorter User Agent String• Gracefully handle codepage restarts• Autoproxy in the frame• Img src=”” shouldn’t send a request• Issue requests on the wire earlier• Only download requires files (fonts)
JavaScript
Best Practices
28
function CreateBoard() { images = []; board.innerHTML = ''; var c = 1; var i = count / 2 - .5; for (var x = -i; x <= i; x++) { for (var z = -i; z <= i; z++) { var img = document.createElement('img'); img.setAttribute("name", "rotatingimage"); img.style.left = '5000px'; img.x3d = x; img.z3d = z; if (useBrowserLogos == true) { switch (c) { case 1: img.src = IEIMAGE; c ++; break; case 2: img.src = LOGO2; c ++; break; case 3: img.src = LOGO1; c ++; break; case 4: img.src = LOGO4; c ++; break; case 5: img.src = LOGO3; c = 1; break; } } else { img.src = IMAGE; } board.appendChild(img); images.push(img); } } countimages.innerHTML = images.length; }
Minify Your JavaScript
e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('y v(){a=[];b.e=\'\';9 c=1;9 i=D/2-.5;d(9 x=-i;x<=i;x++){d(9 z=-i;z<=i;z++){9 0=l.H(\'0\');0.o("n","p");0.q.s=\'r\';0.m=x;0.f=z;g(h==k){j(c){8 1:0.6=t;c++;7;8 2:0.6=F;c++;7;8 3:0.6=G;c++;7;8 4:0.6=J;c++;7;8 5:0.6=w;c=1;7}}C{0.6=I}b.B(0);a.A(0)}}E.e=a.u}')
Minified JavaScript
29
<html><head>
<title>Test</title></head><body>
…<img src="a.gif" /> Item 1<img src="b.gif" /> Item 2<img src=“c.gif" /> Item 3<img src=“d.gif" /> Item 4<img src=“e.gif" /> Item 5<img src=“f.gif" /> Item 6…
</body></html>
Reduce Network Connections
<img src="a.gif" /> Item 1
<img src="b.gif" /> Item 2
<img src=“c.gif" /> Item 3
<img src=“d.gif" /> Item 4
<img src=“e.gif" /> Item 5
<img src=“f.gif" /> Item 6
Reduce Network ConnectionsUse Image Sprites
30
31
<head> <title>Test</title> <style type="text/css"> .a, .b { width: 10; height: 10 } .a, .b { background-image: "abc.gif" } .a { background-position: 0 0 } .b { background-position: 0 -10 } </style></head><body> … <div class="a"></div> Item 1 <div class="b"></div> Item 2 …</body>
Reduce Network Connections
<div class="a"></div><div class="b"></div>
.a, .b { width: 10; height: 10 }
.a, .b { background-image: "abc.gif" }.a { background-position: 0 0 }.b { background-position: 0 -10 }
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
PAGE 33
The JavaScript Engine
Source Code Parser AST InterpreterByteCod
e
Foreground
PAGE 34
Source Code Parser AST InterpreterByteCode
Foreground
New JavaScript Engine – “Chakra”
BackgroundBackground Compiler
Native Code
Compiled JavaScript In The Background Using Multiple Cores
Chakra – The New JavaScript engine
• JavaScript Background Compilation• Compiles JavaScript source code into native machine code• A new interpreter for executing script on traditional web pages
• Type optimizations• Type Representations• Polymorphic inline caching
• Fast interpreter – • Register based layout,• Efficient opcode
• Library optimizations• Tons of improvements to the JavaScript runtime and libraries
PAGE 36
WebKit SunSpider JavaScript Benchmark Results
JavaScript
Best Practices
Minimize Symbol Resolution
38
var foo obj.foo
Global
Intermediate Scopes
Local
DOM
Prototype Chain
InstanceCost
39
function WorkOnLocalVariable(){
localVariable = 5;return ( localVariable + 1 );
}
Minimize Symbol Resolution
localVariablelocalVariable
40
function WorkOnLocalVariable2(){
var localVariable = 5;return ( localVariable + 1 );
}
Minimize Symbol Resolution
var localVariablelocalVariabl
e
41
function IterateWorkOverCollection2(){
var funcWork = Work;var length = myCollection.length;
for(var i = 0; i < length; i++){
funcWork(myCollection[i]);}
}
Minimize Symbol Resolution
var funcWork = Work;
funcWork
42
<html><head>
<title>Test</title></head><body>
……<script src=“jquery.js” … ></script><script src=“prototype.js” … ></script><script src=“dojo.js” … ></script><script src=“animater.js” … ></script><script src=“extjs.js” … ></script><script src=“yahooui.js” … ></script><script src=“mochikit.js” … ></script><script src=“lightbox.js” … ></script><script src=“jslibs.js” … ></script><script src=“yahooui.js” … ></script>
Reduce and Remove Duplicate Scripts
<script src=“yahooui.js” … ></script>
<script src=“yahooui.js” … ></script>
PAGE 43
Flying Images – One Animation
IE8
IE9
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
PAGE 45
Using The Full Power of Your PC
Understanding GPU Acceleration
46
Images & video are downloaded, decoded & transferred into intermediate GPU buffers
1
Complex page elements (incl. canvas & SVG) are drawn into intermediate GPU buffers
2
Simple page elements are drawn directly to Web page buffer
3
Intermediate GPU buffers are composited with directly-drawn content to form the visible Web page
4Windows Desktop Windows Manager composes the final screen
5
Content Rendering Page Composition Desktop Composition
Full vs. Partial AccelerationInternet Explorer 9 provides full hardware acceleration
47
Building Better Experiences With The GPU
48
Don’t be afraid of high resolution images
Use the GPU to scale and resize images
Use lots of alpha to create beautiful compositions
Layout & Rendering
Best Practices
Encoding Video
50
Content Type Recommended BitrateSD Content 350 kbps to 2000 kbps
HD Content 350 kbps to 3500 kbps
51
Using Script To Determine If A Video Code Is Supportedtry { var v = document.createElement("video"); if (v && v.canPlayType && v.canPlayType("video/mp4").match(/^(probably|maybe)$/i)) { // Browser can likely play MPEG-4 video } else { // Browser cannot play MPEG-4 video }}catch (e) { // Exception when testing for MPEG-4 Playback}
Providing Multiple Video Sources To Support Multiple Browsers <video id="myVideo"> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'> <!-- Insert Silverlight or Flash Video Fallback Here --> </video>
Providing Video
52
function BuildUI(){
var elm = document.getElementById('ui');
// Clear existing contentselm.innerHTML = '';
// Generate UIelm.innerHTML += BuildTitle();elm.innerHTML += BuildBody();elm.innerHTML += BuildFooter();
}
Batch Visual Changes
+=+=+=
=
7 innerHTMLReference
s
3 Visual Changes
53
function BuildUI2(){
var elm = document.getElementById('ui');
// Generate UIvar contents = BuildTitle() + BuildBody() + BuildFooter();
// Replace existing contents with UIelm.innerHTML = contents;
}
Batch Visual Changes
=
1 innerHTMLReference
1 VisualUpdate
PAGE 54
window.msPerformance
<script type="text/javascript"> var w = window; var navStart = w.msPerformance.timing.navigationStart + "ms"; var navStartTime = Date(w.msPerformance.timing.navigationStart);</script>
A new set of Performance Metrics integrated at the DOMBrowser interoperable way to measure performance
55
Internet Explorer 9
Network and Caching Chakra, the new JavaScript Engine
Hardware Accelerated Graphics
Networking and caching improvements
mean Internet Explorer 9 performs
far fewer HTTP requests when
navigating.
Chakra interprets, compiles, and executes code in
parallel, taking advantage of multi-CPU cores
through Windows and the computer’s hardware.
For Internet Explorer 9, rendering of
graphics, text, and video has been moved
from the CPU to the graphics card.
aditeer@microsoft.com
Questions