High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft.

Download Report

Transcript 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
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
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
15
Five Popular News Sites
Total
Size
Number
Elements
CSS
Rules
Image
Files
Script
Files
Script
Lines
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
YUI
Prototype
MooTools
Scriptaculous
Script
Libs
Other (JS Lib)
16
Five Popular News Sites
Variation in Total Size
Total
Size
Number
Elements
CSS
Rules
Image
Files
Script
Files
Script
Lines
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
YUI
Prototype
MooTools
Scriptaculous
Script
Libs
Other (JS Lib)
17
Five Popular News Sites
Number Elements to Number of CSS Rules
Total
Size
Number
Elements
CSS
Rules
Image
Files
Script
Files
Script
Lines
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
YUI
Prototype
MooTools
Scriptaculous
Script
Libs
Other (JS Lib)
18
Five Popular News Sites
Number of Images
Total
Size
Number
Elements
CSS
Rules
Image
Files
Script
Files
Script
Lines
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
YUI
Prototype
MooTools
Scriptaculous
Script
Libs
Other (JS Lib)
19
Five Popular News Sites
Amount of JavaScript
Total
Size
Number
Elements
CSS
Rules
Image
Files
Script
Files
Script
Lines
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
YUI
Prototype
MooTools
Scriptaculous
Script
Libs
Other (JS Lib)
20
Five Popular News Sites
Amount of JavaScript
Total
Size
Number
Elements
CSS
Rules
Image
Files
Script
Files
Script
Lines
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
YUI
Prototype
MooTools
Scriptaculous
Script
Libs
Other (JS Lib)
21
Which sites loads the fastest?
Total
Size
Number
Elements
CSS
Rules
Image
Files
Script
Files
Script
Lines
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
YUI
Prototype
MooTools
Scriptaculous
Script
Libs
Other (JS Lib)
22
Which sites loads the slowest?
Total
Size
Number
Elements
CSS
Rules
Image
Files
Script
Files
Script
Lines
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
YUI
Prototype
MooTools
Scriptaculous
Script
Libs
Other (JS Lib)
23
Internet Explorer 8 Subsystem Distribution
4,000
3,500
3,000
Milliseconds
2,500
2,000
1,500
1,000
500
0
News Site #1
News Site #2
News Site #3
News Site #4
News Site #5
HTML parsing
CSS parser
Collections
JavaScript
Marshalling
Native OM
Formatting
BlockBuild
Layout
Rendering
24
Average Distribution Across 5 News Sites
HTML parsing
CSS parser
Collections
JavaScript
Marshalling
Native OM
Formatting
BlockBuild
Layout
Rendering
25
Average Distribution Across Top AJAX Sites
HTML parsing
CSS parser
Collections
JavaScript
Marshalling
Native OM
Formatting
BlockBuild
Layout
Rendering
26
Rendering
Layout
Block
Building
Formatting
DOM
Marshalling
JavaScript
Collections
CSS
HTML
Networking
Browser Subsystems
27
Rendering
Layout
Block
Building
Formatting
DOM
Marshalling
JavaScript
Collections
CSS
HTML
Networking
Browser Subsystems
28
Networking Optimizations
• Response
Request
Response
GET / HTTP/1.1
HTTP/1.1 200 OK
Accept: */*
Content-Length: 3479
Accept-Language: en-us
Expires: -1
UA-CPU: x86
Accept-Encoding:
gzip,
deflate
Accept-Encoding: gzip,
deflate
Date: Sun, 14 Mar 2010 21:30:46 GMT
User-Agent: Mozilla/4.0 (compatible…)
Pragma: no-cache
Host: www.live.com
Content-Encoding:
gzip
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Networking Optimizations
First Request
First Response
GET /images/banner.jpg HTTP/1.1
HTTP/1.1 200 OK
Host: www.microsoft.com
Content-Type: image/jpeg
Expires:
Expires: Fri,
Fri, 19
19 Mar
Mar 2010
2010 00:00:00
00:00:00 GMT
GMT
Second Request
GET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com
No Response Required
Networking Optimizations
• Response
Request
Response
GET /images/banner.jpg HTTP/1.1
HTTP/1.1 304 Not Modified
Host: www.microsoft.com
Content-Type: image/jpeg
If-Modified-Since:
If-Modified-Since:
Sun,1414Mar
Mar2010
201021:30:46
21:30:46GMT
GMT
Sun,
Last-Modified:
Last-Modified:
Sun,14
14Mar
Mar2010
201021:30:46
21:30:46GMT
GMT
Sun,
Networking Optimizations
Original 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;
Minified JavaScript
e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromChar
Code(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}')
Networking Optimizations
<html>
<head>
<title>Test</title>
</head>
<body>
…
400 -->
<!-- logo.gif dimensions: 500 xx 400
<img src=“logo.gif" width="50"
width="50" height="40"
height="40"/>
…
</body>
</html>
Networking Optimizations
<html>
<head>
<title>Test</title>
</head>
<body>
…
<!-- logo.gif dimensions: 50
50 x 40 -->
<img src=“logo.gif" width="50"
width="50" height="40"
height="40" />
…
</body>
</html>
Networking Optimizations
<html>
<head>
<title>Test</title>
</head>
<body>
…
<img
1
<img src="a.gif"
src="a.gif"/>/>Item
Item
<img
2
<img src="b.gif"
src="b.gif"/>/>Item
Item
<img
3
<img src=“c.gif"
src=“c.gif"/>/>Item
Item
<img
4
<img src=“d.gif"
src=“d.gif"/>/>Item
Item
<img
5
<img src=“e.gif"
src=“e.gif"/>/>Item
Item
<img
6
<img src=“f.gif"
src=“f.gif"/>/>Item
Item
…
</body>
</html>
1
2
3
4
5
6
Networking Optimizations
Networking Optimizations
<head>
<title>Test</title>
<style type="text/css">
.a, .b { width: 10; height: 10 }
.a, .a,
.b {.bwidth:
10; height: 10 "abc.gif"
}
{ background-image:
}
.a, .a
.b {{ background-position:
background-image: "abc.gif"
}
0
0 }
.a { background-position: 0
0 }
{ background-position:
0 -10
.b {.bbackground-position:
0 -10
} }
</style>
</head>
<body>
…
<divclass="a"></div>
class="a"></div>
<div
<div
<divclass="b"></div>
class="b"></div>
…
</body>
Item 1
Item 2
Internet Explorer 9 Network Tools
Rendering
Layout
Block
Building
Formatting
DOM
Marshalling
JavaScript
Collections
CSS
HTML
Networking
Browser Subsystems
39
HTML Optimizations
<html>
<head>
<title>Test</title>
<script type="text/javascript">
type="text/javascript">
<script
<!-<!-function
functionhelloWorld()
helloWorld(){ {
alert('Hello
alert('HelloWorld!')
World!'); ;
}}
////-->
-->
</script>
</script>
</head>
<body>
…
</body>
</html>
HTML Parsing Optimizations
<html>
<head>
<title>Test</title>
<script
<script src=“myscript.js”
src=“myscript.js” …… ></script>
></script>
</head>
<body>
…
</body>
</html>
HTML Parsing Optimizations
<html>
<head>
<title>Test</title>
</head>
<body>
…
…
…
<script src=“myscript.js” … ></script>
</body>
</html>
HTML Parsing Optimizations
<html>
<head>
<title>Test</title>
<script src=“myscript.js” …
></script>
defer="defer">
</head>
<body>
…
</body>
</html>
Rendering
Layout
Block
Building
Formatting
DOM
Marshalling
JavaScript
Collections
CSS
HTML
Networking
Browser Subsystems
44
CSS Parsing Optimizations
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
<!-.green
.green {{ color:#009900;}
color:#009900;}
.red
.red {{ color:#660000;}
color:#660000;}
-->
</style>
…
…
…
</body>
</html>
CSS Parsing Optimizations
<html>
<head>
<title>Test</title>
</head>
<body>
…
…
…
</body>
<link rel="stylesheet" type="text/css" href=“mystyles.css" />
</html>
CSS Parsing Optimizations
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css"href="class.cs
</head>
<body>
…
…
…
</body>
</html>
CSS Parsing Optimizations
@import
@import url(/stylesheets/one.css);
url(/stylesheets/one.css);
@import
@import url(/stylesheets/two.css);
url(/stylesheets/two.css);
.MyHeading
{
color: red;
font-family: 'New Century Schoolbook', serif;
background: white;
}
CSS Parsing Optimizations
<html>
<head>
<title>Test</title>
<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" />
</head>
<body>
…
…
…
</body>
</html>
Rendering
Layout
Block
Building
Formatting
DOM
Marshalling
JavaScript
Collections
CSS
HTML
Networking
Browser Subsystems
50
Rendering
Layout
Block
Building
Formatting
DOM
Marshalling
JavaScript
Collections
CSS
HTML
Networking
Browser Subsystems
51
JavaScript Optimizations
var foo
obj.foo
Global
DOM
Intermediate
Scopes
Prototype
Chain
Local
Cost
Instance
JavaScript Optimizations
function WorkOnLocalVariable()
{
localVariable = 5;
localVariable
localVariable + 1 );
return ( localVariable
}
JavaScript Optimizations
function WorkOnLocalVariable2()
{
var localVariable = 5;
return ( localVariable
localVariable + 1 );
}
JavaScript Optimizations
function IterateWorkOverCollection()
{
var length = myCollection.length;
for(var i = 0; i < length; i++)
{
Work(myCollection[i]);
Work
}
}
JavaScript Optimizations
function IterateWorkOverCollection2()
{
var
var funcWork
funcWork == Work;
Work;
var length = myCollection.length;
for(var i = 0; i < length; i++)
{
funcWork(myCollection[i]);
funcWork
}
}
JavaScript Optimizations
var jsObjStringParsed =
JSON.parse
JSON.parse(jsObjString);
var jsObjStringBack =
JSON.stringify(jsObjStringParsed);
JSON.stringify
JavaScript Optimizations
<html>
<head>
<title>Test</title>
</head>
<body>
…
…
…
<script src=“myscript.js” … ></script>
<script src=“navigation.js” … ></script>
<script
<script src=“jquery.js”
src=“jquery.js” …… ></script>
></script>
<script
<script src=“jquery.js”
src=“jquery.js” …… ></script>
></script>
</body>
</html>
JavaScript Optimizations
<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>
Rendering
Layout
Block
Building
Formatting
DOM
Marshalling
JavaScript
Collections
CSS
HTML
Networking
Browser Subsystems
60
Marshalling Optimizations
Trident (MSHTML)
DOM
JScript Engine
Marshalling Optimizations
function CalculateSum()
{
// Retrieve Values
document.body.all
var lSide = document.body.all.lSide.value;
var rSide = document.body.all.rSide.value;
document.body.all
// Generate Result
document.body.all.result.value
= lSide +
document.body.all
rSide;
}
Optimizing Symbol Resolution
function CalculateSum2()
{
// Cache Element Collection
var elms
elms == document.body.all;
document.body.all;
var
// Retrieve Values
var lSide = elms
elms.lSide.value;
var rSide = elms
elms.rSide.value;
// Generate Result
elms.result.value = lSide + rSide;
elms
}
Rendering
Layout
Block
Building
Formatting
DOM
Marshalling
JavaScript
Collections
CSS
HTML
Networking
Browser Subsystems
64
DOM Optimizations
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
function LoopChildren2(elm)
{
var node = elm.firstChild;
while(node != null)
{
…
node = node.nextSibling;
node.nextSibling;
}
}
JavaScript Coding Inefficiencies
function doValidation2()
{
// Retrieve the required elements by using Selectors
// Selects all form fields with 'required' classes
document.querySelectorAll
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;
}
}
Rendering
Layout
Block
Building
Formatting
DOM
Marshalling
JavaScript
Collections
CSS
HTML
Networking
Browser Subsystems
68
Formatting Optimizations
/*
styles are
arefor
forthe
the
home
page.
/* These
These styles
home
page.
*/ */
.Homepage
{
color: red;
background: white;
}
…
/*
These styles
stylesare
arefor
forthe
the
content
page.
/* These
content
page.
*/ */
.Contentpage
{
color: red;
background: white;
}
CSS Performance
• 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 Performance
Use Class or ID Selectors
table tr td ul li {color: green;}
li#myID {color: green;}
Use Child Selectors
ul li {color: purple;}
ul > li {color: purple;}
Rendering
Layout
Block
Building
Formatting
DOM
Marshalling
JavaScript
Collections
CSS
HTML
Networking
Browser Subsystems
72
Layout Optimizations
function BuildUI()
{
var elm = document.getElementById('ui');
// Clear existing contents
= '';
elm.innerHTML =
// Generate UI
elm.innerHTML +=
+= BuildTitle();
elm.innerHTML +=
+= BuildBody();
elm.innerHTML +=
+= BuildFooter();
}
7 innerHTML
References
3 Visual
Changes
Layout Optimizations
function BuildUI2()
{
var elm = document.getElementById('ui');
// Generate UI
var contents = BuildTitle()
+ BuildBody()
+ BuildFooter();
1 innerHTML
Reference
1 Visual
// Replace existing contents with UI Update
elm.innerHTML =
= contents;
}
20 Best Practices to Improve Performance
1) Compress File Downloads
11) Minimize Walking Lookup Chain
2) User Conditional Requests
12) Cache Function Pointers
3) Provide Cacheable Content
13) Use Native JSON Object
4) Minify Your JavaScript
14) Remove Duplicate Script
5) Don’t Scale Images
15) Minimize DOM Interactions
6) Use Image Sprites
16) Use Efficient DOM Methods
7) Link JavaScript at Bottom
17) Use querySelectorAll for Groups
8) Add defer tag to JavaScript
18) Only Send Required Styles
9) Link Stylesheets at Top
19) Simplify Selectors
10) Avoid Using @import
20) Minimize Page Layouts
75
Internet Explorer 8 Subsystem Distribution
4,000
3,500
3,000
Milliseconds
2,500
2,000
1,500
1,000
500
0
News Site #1
News Site #2
News Site #3
News Site #4
News Site #5
HTML parsing
CSS parser
Collections
JavaScript
Marshalling
Native OM
Formatting
BlockBuild
Layout
Rendering
76
Section #2:
Preview of Internet Explorer 9
Performance
Compiled
JavaScript
Rendering
Layout
Block
Building
Formatting
DOM
Marshalling
JavaScript
Collections
CSS
HTML
Networking
Hardware Accelerated HTML5
GPU Powered
HTML5 Graphics
78
Demo Flying Logos
GPU Powered HTML5
The Gamers GPU
81
Everyone Has a GPU
82
Windows Experience Index Results - GPU
4%
1
2
15%
32%
27% 12%
3
4
5
6
Windows Experience Index
10%
7
8
Graphics Scores of Vista and Win7 Users
83
GPU Processing Performance
Multi-Core CPU
GPU
84
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…
New JavaScript Engine Interpreter
(Chakra)
Foreground
Source
Code
Parser
AST
ByteCode
Interpreter
87
Multi-Core Processing
Multi-Core CPU
88
Internet Explorer 8 Processor Distribution
Foreground
Background
89
Windows Experience Index Results
Month
2/1/2010
CPU Count
2.3
Windows Experience Index
Number of CPU Cores for Vista and Win7 Users
90
New JavaScript Engine Background Compiler
(Chakra)
Foreground
Background
Source
Code
Parser
AST
ByteCode
Background
Compiler
Native Code
Interpreter
91
Internet Explorer 9 Background Compilation
Foreground
Background
92
Putting It All Together
• GPU Powered Graphics
• Compiled JavaScript Applications
93
Flying Images – One Animation
IE8
IE9
94
© 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.