High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft
High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft.
Dec 22, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
High-Performance Best Practices for Web SitesJason Weber, Internet Explorer Team, Microsoft
Session Objectives
1) Best Practices to Improve Performance• Inside look at browser performance• Specific things that you can do today• Principles behind the optimizations
2) Preview Internet Explorer 9 Performance• Hardware Accelerated HTML5• GPU Powered Graphics• Compiled JavaScript
I have a lot of content…
Section #1: Best Practices for Improving Performance
Example Scenario – Wall Street Journal
Starting with Bing
Example Scenario – Wall Street Journal
Blank Background
Example Scenario – Wall Street Journal
Initial HTML
Example Scenario – Wall Street Journal
Heading Appears
Example Scenario – Wall Street Journal
Initial Content
Example Scenario – Wall Street Journal
Right Column Lays Out
Example Scenario – Wall Street Journal
Media Appears
Example Scenario – Wall Street Journal
Customized Content
Example Scenario – Wall Street Journal
Advertisements
Example Scenario – Wall Street Journal
Interacting with Website
15
Picking Five Popular News Sites
Wall Street Journal
Chicago Tribune
USA Today
New York Times
Washington Post
CNN News
Seattle Times
MSN News
Financial Times
Boston Globe
News Site #1
News Site #2
News Site #3
News Site #4
News Site #5
16
Five Popular News Sites
TotalSize
NumberElement
s
CSS Rules
ImageFiles
Script 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
17
Five Popular News SitesVariation in Total Size
TotalSize
NumberElement
s
CSS Rules
ImageFiles
Script 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
Five Popular News SitesNumber Elements to Number of CSS Rules
TotalSize
NumberElement
s
CSS Rules
ImageFiles
Script 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
Five Popular News SitesNumber of Images
TotalSize
NumberElement
s
CSS Rules
ImageFiles
Script 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
20
Five Popular News SitesAmount of JavaScript
TotalSize
NumberElement
s
CSS Rules
ImageFiles
Script 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
21
Five Popular News SitesAmount of JavaScript
TotalSize
NumberElement
s
CSS Rules
ImageFiles
Script 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
22
Which sites loads the fastest?
TotalSize
NumberElement
s
CSS Rules
ImageFiles
Script 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
23
Which sites loads the slowest?
TotalSize
NumberElement
s
CSS Rules
ImageFiles
Script 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
24
Internet Explorer 8 Subsystem Distribution
News Site #1
News Site #2
News Site #3
News Site #4
News Site #5
0
500,000
1,000,000
1,500,000
2,000,000
2,500,000
3,000,000
3,500,000
4,000,000
HTML parsing CSS parser Collections JavaScript Marshalling Native OM
Formatting BlockBuild Layout Rendering
Millisecon
ds
25
Average Distribution Across 5 News Sites
HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering
26
Average Distribution Across Top AJAX Sites
HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering
27
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
28
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
Networking OptimizationsCompress Network Traffic
RequestGET / HTTP/1.1
Accept: */*
Accept-Language: en-us
UA-CPU: x86
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible…)
Host: www.live.com
Response
ResponseHTTP/1.1 200 OK
Content-Length: 3479
Expires: -1
Date: Sun, 14 Mar 2010 21:30:46 GMT
Content-Type: text/html; charset=utf-8
Pragma: no-cache
Content-Encoding: gzip
Accept-Encoding: gzip, deflate
Content-Encoding: gzip
Networking Optimizations Provide Cacheable Content
First RequestGET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com
First ResponseHTTP/1.1 200 OK
Content-Type: image/jpeg
Expires: Fri, 19 Mar 2010 00:00:00 GMTExpires: Fri, 19 Mar 2010 00:00:00 GMT
Second RequestGET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com
No Response Required
Networking Optimizations Conditional Requests
RequestGET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com
If-Modified-Since:
Sun, 14 Mar 2010 21:30:46 GMT
Response
ResponseHTTP/1.1 304 Not Modified
Content-Type: image/jpeg
Last-Modified:
Sun, 14 Mar 2010 21:30:46 GMT
If-Modified-Since: Sun, 14 Mar 2010 21:30:46 GMT
Last-Modified: Sun, 14 Mar 2010 21:30:46 GMT
Networking Optimizations Minify Your JavaScript
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; }
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}')
Original JavaScript Minified JavaScript
Networking Optimizations Don’t Scale Images
<html><head>
<title>Test</title></head><body>
…<!-- logo.gif dimensions: 500 x 400 --><img src=“logo.gif" width="50" height="40" />…
</body>
</html>
width="50" height="40"500 x 400
Networking Optimizations Don’t Scale Images
<html><head>
<title>Test</title></head><body>
…<!-- logo.gif dimensions: 50 x 40 --><img src=“logo.gif" width="50" height="40" />…
</body>
</html>
width="50" height="40"
50 x 40
Networking Optimizations Use Image Sprites
<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>
<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
Networking Optimizations Use Image Sprites
Networking Optimizations Use Image Sprites
<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>
<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 }
Internet Explorer 9 Network ToolsUnderstand and Improve Your Networking Performance
39
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
HTML OptimizationsAvoid Inline JavaScript
<html><head>
<title>Test</title><script type="text/javascript"> <!-- function helloWorld() { alert('Hello World!') ; } // -->
</script></head><body>
…</body>
</html>
<script type="text/javascript"> <!-- function helloWorld() { alert('Hello World!') ; } // --></script>
HTML Parsing OptimizationsAvoid Linking JavaScript in Head
<html><head>
<title>Test</title><script src=“myscript.js” … ></script>
</head><body>
…</body>
</html>
<script src=“myscript.js” … ></script>
<html><head>
<title>Test</title></head><body>
………
</body>
</html>
<script src=“myscript.js” … ></script>
HTML Parsing OptimizationsLink JavaScript at End of File
HTML Parsing OptimizationsBut if you must, use the defer tag.
<html><head>
<title>Test</title><script src=“myscript.js” … ></script>
</head><body>
…</body>
</html>
defer="defer">
44
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
CSS Parsing Optimizations Avoid Embedded Styles
<html><head>
<title>Test</title></head><body>
<style> <!--
.green { color:#009900;}
.red { color:#660000;} --></style>
… … …
</body>
</html>
<style> <!-- .green { color:#009900;} .red { color:#660000;} --></style>
CSS Parsing Optimizations Avoid Linking Stylesheets at Bottom of Page
<html><head>
<title>Test</title></head><body>
……
…</body>
</html>
<link rel="stylesheet" type="text/css" href=“mystyles.css" />
CSS Parsing Optimizations Link Stylesheets at Top of Page
<html><head>
<title>Test</title>
</head><body>
………
</body>
</html>
<link rel="stylesheet" type="text/css"href="class.css" />
CSS Parsing Optimizations Avoid Using @Import for Hierarchical Styles
@import url(/stylesheets/one.css);
@import url(/stylesheets/two.css);
.MyHeading
{
color: red;
font-family: 'New Century Schoolbook', serif;
background: white;
}
@import url(/stylesheets/one.css); @import url(/stylesheets/two.css);
CSS Parsing Optimizations Use Multiple Stylesheets for Hierarchical Styles
<html><head>
<title>Test</title>
</head><body>
………
</body>
</html>
<link rel="stylesheet" type="text/css" href=“one.css" /><link rel="stylesheet" type="text/css" href=“two.css" /><link rel="stylesheet" type="text/css" href=“three.css" />
50
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
51
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
JavaScript OptimizationsMinimize Symbol Resolution
Global
Local
Intermediate
Scopes
DOM
Instance
PrototypeChainCost
var foo obj.foo
JavaScript Optimizations Minimize Symbol Resolution
function WorkOnLocalVariable(){
localVariable = 5;return ( localVariable + 1 );
}
localVariablelocalVariable
JavaScript Optimizations Minimize Symbol Resolution
function WorkOnLocalVariable2(){
var localVariable = 5;return ( localVariable + 1 );
}
var localVariablelocalVariabl
e
JavaScript Optimizations Minimize Symbol Resolution: Functions
function IterateWorkOverCollection(){
var length = myCollection.length;
for(var i = 0; i < length; i++){
Work(myCollection[i]);}
}
Work
JavaScript Optimizations Minimize Symbol Resolution: Functions
function IterateWorkOverCollection2(){
var funcWork = Work;var length = myCollection.length;
for(var i = 0; i < length; i++){
funcWork(myCollection[i]);}
}
var funcWork = Work;
funcWork
JavaScript Optimizations Use Native JSON Methods
var jsObjStringParsed = JSON.parse(jsObjString);
var jsObjStringBack = JSON.stringify(jsObjStringParsed);
JSON.parse
JSON.stringify
<html><head>
<title>Test</title></head><body>
………<script src=“myscript.js” … ></script> <script src=“navigation.js” … ></script><script src=“jquery.js” … ></script><script src=“jquery.js” … ></script>
</body>
</html>
JavaScript OptimizationsRemove Duplicate Script Files
<script src=“jquery.js” … ></script><script src=“jquery.js” … ></script>
<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=“qooxdoo.js” … ></script>
JavaScript OptimizationsRemove Duplicate Script Files
<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=“qooxdoo.js” … ></script>
60
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
Trident (MSHTML)
JScript Engine
Marshalling OptimizationsMinimize DOM Interaction
DOM
Marshalling OptimizationsMinimize DOM Interaction
function CalculateSum(){
// Retrieve Valuesvar lSide = document.body.all.lSide.value;
var rSide = document.body.all.rSide.value;
// Generate Resultdocument.body.all.result.value = lSide + rSide;
}
document.body.alldocument.body.all
document.body.all 9 DOM Lookups
Optimizing Symbol ResolutionMinimize DOM Interaction
function CalculateSum2(){
// Cache Element Collectionvar elms = document.body.all;
// Retrieve Valuesvar lSide = elms.lSide.value;var rSide = elms.rSide.value;
// Generate Resultelms.result.value = lSide + rSide;
}
var elms = document.body.all;
elmselms
elms
3 DOM Lookups
64
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
DOM Optimizations Built In Methods Always More Efficient
function LoopChildren(elm)
{ var nodes = elm.childNodes;var length = nodes.length;
for(var i = 0; i < length; i++){
var node = nodes[i];…
} }
nodes[i];
JavaScript Coding Inefficiencies Built In Methods Always More Efficient
function LoopChildren2(elm)
{ var node = elm.firstChild;
while(node != null){
…node = node.nextSibling;
}}
node.nextSibling;
JavaScript Coding InefficienciesUse Selector API for Efficent Access of Collections
function doValidation2()
{ // Retrieve the required elements by using Selectors // Selects all form fields with 'required' classes var reqs = document.querySelectorAll(".required"); // Set the flag to false by default var missingRequiredField = false;
// Validate that the form data is not empty for (var i = 0; i < reqs.length; i++) {
if (reqs[i].value == "")missingRequiredField = true;
}
}
document.querySelectorAll
68
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
Formatting OptimizationsOnly Send Required Styles
/* These styles are for the home page. */
.Homepage
{
color: red;
background: white;
}
…
/* These styles are for the content page. */
.Contentpage
{
color: red;
background: white;
}
/* These styles are for the home page. */
/* These styles are for the content page. */
CSS PerformanceSimplify selectors
• Complex element selectors are slow• When possible• Use class – or ID-based selectors• Make element selectors as simple as possible• Use child instead of descendent selectors
CSS PerformanceSimplify Selector Patterns: Avoid Descendent Selectors
table tr td ul li {color: green;}
li#myID {color: green;}
ul li {color: purple;}
ul > li {color: purple;}
Use Class or ID Selectors
Use Child Selectors
72
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
Layout OptimizationsBatch Visual Changes
function BuildUI(){
var elm = document.getElementById('ui');
// Clear existing contentselm.innerHTML = '';
// Generate UIelm.innerHTML += BuildTitle();elm.innerHTML += BuildBody();elm.innerHTML += BuildFooter();
}
+=+=+=
=
7 innerHTMLReferences
3 Visual Changes
Layout Optimizations Batch Visual Changes
function BuildUI2(){
var elm = document.getElementById('ui');
// Generate UIvar contents = BuildTitle() + BuildBody() + BuildFooter();
// Replace existing contents with UIelm.innerHTML = contents;
}=
1 innerHTMLReference
1 VisualUpdate
75
20 Best Practices to Improve Performance
1) Compress File Downloads
2) User Conditional Requests
3) Provide Cacheable Content
4) Minify Your JavaScript
5) Don’t Scale Images
6) Use Image Sprites
7) Link JavaScript at Bottom
8) Add defer tag to JavaScript
9) Link Stylesheets at Top
10)Avoid Using @import
11)Minimize Walking Lookup Chain
12)Cache Function Pointers
13)Use Native JSON Object
14)Remove Duplicate Script
15)Minimize DOM Interactions
16)Use Efficient DOM Methods
17)Use querySelectorAll for Groups
18)Only Send Required Styles
19)Simplify Selectors
20)Minimize Page Layouts
76
Internet Explorer 8 Subsystem Distribution
News Site #1
News Site #2
News Site #3
News Site #4
News Site #5
0
500,000
1,000,000
1,500,000
2,000,000
2,500,000
3,000,000
3,500,000
4,000,000
HTML parsing CSS parser Collections JavaScript Marshalling Native OM
Formatting BlockBuild Layout Rendering
Millisecon
ds
Section #2:
Preview of Internet Explorer 9 Performance
78
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Hardware Accelerated HTML5
Compiled JavaScript
GPU PoweredHTML5 Graphics
Demo Flying Logos
GPU Powered HTML5
81
The Gamers GPU
82
Everyone Has a GPU
83
Windows Experience Index Results - GPU
1 2 3 4 5 6 7 8
Windows Experience IndexGraphics Scores of Vista and Win7 Users
4% 15% 32% 27% 12% 10%
84
GPU Processing Performance
Multi-Core CPU GPU
Compiled JavaScript
Interpreters, Compilers, Intermediary Languages, Machine Code, Stack Alignment, JIT, Type System, Registers, Memory Management, Assembly, Bytecode, Tracing, Syntax Trees, Dynamic Languages, Flow Analysis, Static Languages, Regular Expressions, Inlining, oh my…
87
Foreground
New JavaScript Engine Interpreter(Chakra)
Source Code
Parser AST InterpreterByteCode
88
Multi-Core Processing
Multi-Core CPU
89
Internet Explorer 8 Processor Distribution
Foreground
Background
90
Windows Experience Index Results
Month CPU Count2/1/2010 2.3
Windows Experience IndexNumber of CPU Cores for Vista and Win7 Users
91
Foreground
New JavaScript Engine Background Compiler(Chakra)
Source Code
Parser AST InterpreterByteCode
Background Native Code
Background Compiler
92
Internet Explorer 9 Background Compilation
Foreground
Background
93
Putting It All Together• GPU Powered Graphics• Compiled JavaScript Applications
94
Flying Images – One Animation
IE8
IE9
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after
the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Related Documents
![Weber La Guia Weber 2014[1]](https://static.cupdf.com/doc/110x72/55cf9774550346d03391b4fb/weber-la-guia-weber-20141.jpg)
