0
Blog http://blogs.msdn.com/dorischen

 http://blogs.msdn.com/b/dorischen/

 doris.chen@microsoft.com
 http://ohours.o...

 Performance in the Real World

PAGE 4
What is web performance?
0.1
1.8
3.4
6.1
7.5
0
1
2
3
4
5
6
7
8
Bandwidth(Mbps)
2G 3G 4G HSPA+ WiFI 4G LTE
Source:
CPU
Utilization
Elapsed Page Load Time (1.81 seconds)
Time to Glass (.65 seconds)
CPU Time (1.39 seconds)
Idle CPU Time (0...
CPU
Utilization
GPU
UtilizationVSync
Networking /
Cache
Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
...
Networking /
Cache
Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
...
Networking /
Cache
Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
...
Networking /
Cache
Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
...
Networking /
Cache
Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
...
Networking /
Cache
Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
...
Networking /
Cache
Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
...
Networking /
Cache
Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
...
Networking /
Cache
Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
...
Networking /
Cache
Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
...
Networking /
Cache
Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
...
Networking /
Cache
Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
...
Networking /
Cache
Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
...
Networking /
Cache
Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
...
Performance in the Real World
Real-world problems and solutions
Six Principles to Remember
1) Quickly Respond to Network Requests
2) Minimize Bytes Downloaded
3) Optimize Media Usage
4) ...
Principle #1:
Quickly Respond to Network Requests
Avoid 3xx Redirection
Quickly Respond to Network Requests
Avoid 3xx Redirection
Quickly Respond to Network Requests
Request
GET / HTTP/1.1
Host: www.news.com
Avoid 3xx Redirection
Quickly Respond to Network Requests
Response
HTTP/1.1 303 See Other
Location: http://homepage.news.c...
Avoid 3xx Redirection
Quickly Respond to Network Requests
63%of top 1000 websites
worldwide contain 3xx redirect
Use Content Distribution Networks (CDN’s)
Quickly Respond to Network Requests
Use Content Distribution Networks (CDN’s)
Quickly Respond to Network Requests
Use Content Distribution Networks (CDN’s)
Quickly Respond to Network Requests
Use Content Distribution Networks (CDN’s)
Quickly Respond to Network Requests
Use Content Distribution Networks (CDN’s)
Quickly Respond to Network Requests
Maximize Concurrent Connections
Quickly Respond to Network Requests
Maximize Concurrent Connections
Quickly Respond to Network Requests
Maximize Concurrent Connections
Quickly Respond to Network Requests
HTTP Response
HTTP/1.1 200 OK
Content-Type: application/javascript
Content-Length: 230848
Connection: close
Reuse Connecti...
HTTP Response
HTTP/1.1 200 OK
Content-Type: application/javascript
Content-Length: 230848
Connection: close
Reuse Connecti...
Principle #2:
Minimize Bytes Downloaded
55 6 17 10 5
Images CSS JavaScript HTML Other
56 276 48 1063 75 54 131
HTML JavaScript CSS Images Flash Fonts Other

Request
GET / HTTP/1.1
Accept: */*
Accept-Language: en-us
UA-CPU: x86
Accept-Encoding: gzip, deflate
Host: www.live.com
Re...
Request
GET / HTTP/1.1
Accept: */*
Accept-Language: en-us
UA-CPU: x86
Accept-Encoding: gzip, deflate
Host: www.live.com
Re...
Request
GET / HTTP/1.1
Accept: */*
Accept-Language: en-us
UA-CPU: x86
Accept-Encoding: gzip, deflate
Host: www.live.com
Re...
Persist App Resources Locally in Package
Minimize Bytes Downloaded
Persist App Resources Locally in Package
Minimize Bytes Downloaded (Windows Store apps)
Cache Dynamic Resources in App Cache
Minimize Bytes Downloaded
Cache Dynamic Resources in App Cache
Minimize Bytes Downloaded
Cache Dynamic Resources in App Cache
Minimize Bytes Downloaded
v2
Cache Dynamic Resources in App Cache
Minimize Bytes Downloaded
manifest file
PAGE 53
MIME Type: text/cache-manifest
Request
GET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com
Response
HTTP/1.1 200 OK
Content-Type: image/jpeg
Expires:...
Request
GET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com
Response
HTTP/1.1 200 OK
Content-Type: image/jpeg
Expires:...
jQuery Data Request
jQuery.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});
Cached jQuery Data Request...
jQuery Data Request
jQuery.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});
Cached jQuery Data Request...
Lower Case
<img src="icon.png" />
Title Case
<img src="Icon.png" />
Careless Developer
<img src="ICon.png" />
Standardize ...
Lower Case
<img src="icon.png" />
Title Case
<img src="Icon.png" />
Careless Developer
<img src="ICon.png" />
Standardize ...
Lower Case
<img src="icon.png" />
Title Case
<img src="Icon.png" />
Careless Developer
<img src="ICon.png" />
Standardize ...
Lower Case
<img src="icon.png" />
Title Case
<img src="Icon.png" />
Careless Developer
<img src="ICon.png" />
Standardize ...
Principle #3:
Optimize Media Usage
Minimize Number of Images
Optimize Media Usage
58average number of media resources
on the top 100,000 web sites
<html>
<head>
<title>Test</title>
</head>
<body>
…
<!-- logo.gif dimensions: 500 x 400 -->
<img src="logo.png" width="50" ...
<html>
<head>
<title>Test</title>
</head>
<body>
…
<!-- logo.gif dimensions: 500 x 400 -->
<img src="logo.png" width="50" ...
<html>
<head>
<title>Test</title>
</head>
<body>
…
<!-- logo.gif dimensions: 500 x 400 -->
<img src="logo.png" width="50" ...
Avoid Death by 1,000 Images
Optimize Media Usage
Use Image Sprites
Optimize Media Usage
240px
40px
40px
Scenario #1 – Multiple Files Scenario #2 - Image Sprite
40px
6 Imag...
Image Formats: PNG, JPEG
Optimize Media Usage
JPEG
photographs, landscapes, and faces
PNG
Logos, charts, graphs, screensho...
683 x 1024
RGBA
557 KB
width * height * 4
2.67 MB Decoded
Huffman Decoding
Dequantization /
iDCT
Chroma
Upsampling
YCbCr to RGB
Color Conversion
Video: User Preview Images
Optimize Media Usage
<video
poster="PreviewImage.jpeg
" width="640" height="480"
controls="cont...
Minimize Media Plugin Usage
Optimize Media Usage
Principle #4:
Efficiently Structure Markup
Link Style Sheets at Top of Page
Efficiently Structure Markup
<html>
<head>
<title>Test</title>
<link rel="stylesheet" typ...
Link Style Sheets at Top of Page
Efficiently Structure Markup
<html>
<head>
<title>Test</title>
<link rel="stylesheet" typ...
<html>
<head>
<title>Test</title>
</head>
<body>
…
…
…
</body>
<link rel="stylesheet" type="text/css" href="styles.css"/>
...
<html>
<head>
<title>Test</title>
</head>
<body>
…
…
…
</body>
<link rel="stylesheet" type="text/css" href="styles.css"/>
...
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
.item { color:#009900;}
</style>
<div class=‘item’>MyItem</div>
<...
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
.item { color:#009900;}
</style>
<div class=‘item’>MyItem</div>
<...
/* These styles are for the home page. */
HomePage
{
color: red;
}
/* These styles are for the content page. */
ContentPag...
/* These styles are for the home page. */
HomePage
{
color: red;
}
/* These styles are for the content page. */
ContentPag...
/* These styles are for the home page. */
HomePage
{
color: red;
}
/* These styles are for the content page. */
ContentPag...
<html>
<head>
<title>Test</title>
</head>
<body>
…
…
…
</body>
</html>
Always Link JavaScript at End of File
Efficiently S...
<html>
<head>
<title>Test</title>
</head>
<body>
…
…
…
</body>
</html>
Always Link JavaScript at End of File
Efficiently S...
<html>
<head>
<title>Test</title>
<script src="myscript.js" … ></script>
</head>
<body>
…
…
…
</body>
</html>
Avoid Linkin...
<html>
<head>
<title>Test</title>
<script src="myscript.js" … ></script>
</head>
<body>
…
…
…
</body>
</html>
Avoid Linkin...
<html>
<head>
<script type="text/javascript">
function helloWorld() {
alert('Hello World!') ;
}
</script>
</head>
<body>
…...
<html>
<head>
<script type="text/javascript">
function helloWorld() {
alert('Hello World!') ;
}
</script>
</head>
<body>
…...
<html>
<head>
<title>Test</title>
</head>
<body>
…
…
…
<script async src="myscript.js"></script>
</body>
</html>
Asynchron...
<html>
<head>
<title>Test</title>
</head>
<body>
…
…
…
<script async src="myscript.js"></script>
</body>
</html>
Asynchron...
<html>
<head>
<title>Test</title>
</head>
<body>
…
<script src="jquery.js" … ></script>
<script src="myscript.js" … ></scr...
<html>
<head>
<title>Test</title>
</head>
<body>
…
<script src="jquery.js" … ></script>
<script src="myscript.js" … ></scr...
Remove Duplicate Code
Efficiently Structure Markup
52%of the pages on the web
have duplicate code
<script src="jquery.js" … ></script>
<script src="prototype.js" … ></script>
<script src="dojo.js" … ></script>
<script sr...
<script src="facebookconnect.js" … ></script>
<script src="facebooklike.js" … ></script>
<script src="facebookstats.js" … ...
Replace Images with CSS3 Gradients
Optimize Media Usage
Replace Images with CSS3 Border Radius
Optimize Media Usage
Leverage CSS3 Transforms
Optimize Media Usage
-ms-transform: translate(75px, 100px) scaleY(.75) skewY(10deg);
-webkit-tran...
Principle #5:
Know What Your Application is Doing
Align Timers to the Display Frame (16.7)
Know What Your Application is Doing
setInterval(renderLoop, 16.7);
setInterval(re...
Use requestAnimationFrame for Animations
Know What Your Application is Doing
window.requestAnimationFrame(renderLoop);
16....
Principle #6:
Write Fast JavaScript
JSON Always Faster than XML for Data
JSON Representation
"glossary":{
"title": "example glossary", "GlossDiv":{
"title": "...
Native JSON Methods
var jsObjStringParsed = JSON.parse(jsObjString);
var jsObjStringBack = JSON.stringify(jsObjStringParse...
Numbers in JavaScript
• All numbers are IEEE 64-bit floating point numbers
- Great for flexibility
- Performance and optim...
Avoid creating floats if they are not needed
Fastest way to indicate integer math is |0
var r = 0;
function doMath(){
var ...
Take advantage of type-specialization for arithmetic
Create separate functions for ints and floats; use consistent argumen...
Initialize JavaScript on Demand
Write Fast Loading JavaScript
var userTileScriptsLoaded = false;
function CustomizeUserTil...
Initialize JavaScript on Demand
Write Fast Loading JavaScript
var userTileScriptsLoaded = false;
function CustomizeUserTil...
Initialize JavaScript on Demand
Write Fast Loading JavaScript
var userTileScriptsLoaded = false;
function CustomizeUserTil...
Initialize JavaScript on Demand
Write Fast Loading JavaScript
var userTileScriptsLoaded = false;
function CustomizeUserTil...
Initialize JavaScript on Demand
Write Fast Loading JavaScript
var userTileScriptsLoaded = false;
function CustomizeUserTil...
Avoid chattiness with the DOM
...
//for each rotation
document.body.game.getElementById(elID).classList.remove(oldClass)
d...
Avoid automatic conversions of DOM values
Values from DOM are strings by default
this.boardSize = document.getElementById(...
function LoopChildren(elm) {
var node = elm.firstChild;
while (node != null) {
node = node.nextSibling;
}
}
Built in DOM M...
function LoopChildren(elm) {
var node = elm.firstChild;
while (node != null) {
node = node.nextSibling;
}
}
Built in DOM M...
function LoopChildren(elm) {
var node = elm.firstChild;
while (node != null) {
node = node.nextSibling;
}
}
Built in DOM M...
function InsertUsername()
{
document.getElementById('user').innerHTML = userName;
}
User .innerHTML to Construct Your Page...
Maintain a Small and Healthy DOM
Use DOM Efficiently
Document HTML Body
Element
Element
Element
Element
Element
Element
El...
Six Principles to Remember
1) Quickly Respond to Network Requests
2) Minimize Bytes Downloaded
3) Optimize Media Usage
4) ...
Overview Concepts
High Performance Websites
Steve Souders, September 2007
Event Faster Websites: Best Practices
Steve Soud...
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Upcoming SlideShare
Loading in...5
×

Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster

8,412

Published on

How to tackle real-world web platform performance problems in modern websites and apps? This session starts with a basic understanding of the web platform and then explores to a set of problem/solution pairs built from industry-standard performance guidance. In the talk, we will demonstrate performance tips and tricks that will help you improve the performance of your apps and sites today. We will discuss the following respond to network requests, speed and responsiveness, optimizing media usage, and writing fast JavaScript. These performance tips and tricks apply equally to web sites that run on standards based web browsers, as well as to modern apps.

Published in: Technology, Design
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,412
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
107
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Transcript of "Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster"

  1. 1. Blog http://blogs.msdn.com/dorischen   http://blogs.msdn.com/b/dorischen/   doris.chen@microsoft.com  http://ohours.org/dorischen    PAGE 2
  2. 2.   Performance in the Real World 
  3. 3. PAGE 4
  4. 4. What is web performance?
  5. 5. 0.1 1.8 3.4 6.1 7.5 0 1 2 3 4 5 6 7 8 Bandwidth(Mbps) 2G 3G 4G HSPA+ WiFI 4G LTE Source:
  6. 6. CPU Utilization Elapsed Page Load Time (1.81 seconds) Time to Glass (.65 seconds) CPU Time (1.39 seconds) Idle CPU Time (0.42 seconds)
  7. 7. CPU Utilization GPU UtilizationVSync
  8. 8. Networking / Cache Parsers 1 2 7 43 8 9 5 6 DOM Tree Formatting Layout Painting 1 2 7 43 8 9 5 6 Display Tree Compositing DOM API & Capabilities JavaScript CSS Cascade
  9. 9. Networking / Cache Parsers 1 2 7 43 8 9 5 6 DOM Tree Formatting Layout Painting 1 2 7 43 8 9 5 6 Display Tree Compositing DOM API & Capabilities JavaScript CSS Cascade
  10. 10. Networking / Cache Parsers 1 2 7 43 8 9 5 6 DOM Tree Formatting Layout Painting 1 2 7 43 8 9 5 6 Display Tree Compositing DOM API & Capabilities JavaScript CSS Cascade
  11. 11. Networking / Cache Parsers 1 2 7 43 8 9 5 6 DOM Tree Formatting Layout Painting 1 2 7 43 8 9 5 6 Display Tree Compositing DOM API & Capabilities JavaScript CSS Cascade
  12. 12. Networking / Cache Parsers 1 2 7 43 8 9 5 6 DOM Tree Formatting Layout Painting 1 2 7 43 8 9 5 6 Display Tree Compositing DOM API & Capabilities JavaScript CSS Cascade
  13. 13. Networking / Cache Parsers 1 2 7 43 8 9 5 6 DOM Tree Formatting Layout Painting 1 2 7 43 8 9 5 6 Display Tree Compositing DOM API & Capabilities JavaScript CSS Cascade
  14. 14. Networking / Cache Parsers 1 2 7 43 8 9 5 6 DOM Tree Formatting Layout Painting 1 2 7 43 8 9 5 6 Display Tree Compositing DOM API & Capabilities JavaScript CSS Cascade
  15. 15. Networking / Cache Parsers 1 2 7 43 8 9 5 6 DOM Tree Formatting Layout Painting 1 2 7 43 8 9 5 6 Display Tree Compositing DOM API & Capabilities JavaScript CSS Cascade
  16. 16. Networking / Cache Parsers 1 2 7 43 8 9 5 6 DOM Tree Formatting Layout Painting 1 2 7 43 8 9 5 6 Display Tree Compositing DOM API & Capabilities JavaScript CSS Cascade
  17. 17. Networking / Cache Parsers 1 2 7 43 8 9 5 6 DOM Tree Formatting Layout Painting 1 2 7 43 8 9 5 6 Display Tree Compositing DOM API & Capabilities JavaScript CSS Cascade
  18. 18. Networking / Cache Parsers 1 2 7 43 8 9 5 6 DOM Tree Formatting Layout Painting 1 2 7 43 8 9 5 6 Display Tree Compositing DOM API & Capabilities JavaScript CSS Cascade
  19. 19. Networking / Cache Parsers 1 2 7 43 8 9 5 6 DOM Tree Formatting Layout Painting 1 2 7 43 8 9 5 6 Display Tree Compositing DOM API & Capabilities JavaScript CSS Cascade
  20. 20. Networking / Cache Parsers 1 2 7 43 8 9 5 6 DOM Tree Formatting Layout Painting 1 2 7 43 8 9 5 6 Display Tree Compositing DOM API & Capabilities JavaScript CSS Cascade
  21. 21. Networking / Cache Parsers 1 2 7 43 8 9 5 6 DOM Tree Formatting Layout Painting 1 2 7 43 8 9 5 6 Display Tree Compositing DOM API & Capabilities JavaScript CSS Cascade
  22. 22. Performance in the Real World Real-world problems and solutions
  23. 23. Six Principles to Remember 1) Quickly Respond to Network Requests 2) Minimize Bytes Downloaded 3) Optimize Media Usage 4) Efficiently Structure Markup 5) Know What Your Application is Doing 6) Write Fast JavaScript
  24. 24. Principle #1: Quickly Respond to Network Requests
  25. 25. Avoid 3xx Redirection Quickly Respond to Network Requests
  26. 26. Avoid 3xx Redirection Quickly Respond to Network Requests Request GET / HTTP/1.1 Host: www.news.com
  27. 27. Avoid 3xx Redirection Quickly Respond to Network Requests Response HTTP/1.1 303 See Other Location: http://homepage.news.com/ Request GET / HTTP/1.1 Host: www.news.com
  28. 28. Avoid 3xx Redirection Quickly Respond to Network Requests 63%of top 1000 websites worldwide contain 3xx redirect
  29. 29. Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
  30. 30. Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
  31. 31. Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
  32. 32. Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
  33. 33. Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
  34. 34. Maximize Concurrent Connections Quickly Respond to Network Requests
  35. 35. Maximize Concurrent Connections Quickly Respond to Network Requests
  36. 36. Maximize Concurrent Connections Quickly Respond to Network Requests
  37. 37. HTTP Response HTTP/1.1 200 OK Content-Type: application/javascript Content-Length: 230848 Connection: close Reuse Connections Quickly Respond to Network Requests
  38. 38. HTTP Response HTTP/1.1 200 OK Content-Type: application/javascript Content-Length: 230848 Connection: close Reuse Connections Quickly Respond to Network Requests
  39. 39. Principle #2: Minimize Bytes Downloaded
  40. 40. 55 6 17 10 5 Images CSS JavaScript HTML Other 56 276 48 1063 75 54 131 HTML JavaScript CSS Images Flash Fonts Other 
  41. 41. Request GET / HTTP/1.1 Accept: */* Accept-Language: en-us UA-CPU: x86 Accept-Encoding: gzip, deflate Host: www.live.com Response HTTP/1.1 200 OK Content-Length: 3479 Expires: -1 Date: Sun, 14 Mar 2010 21:30:46 GMT Pragma: no-cache Content-Encoding: gzip GZIP Compress Network Traffic Minimize Bytes Downloaded
  42. 42. Request GET / HTTP/1.1 Accept: */* Accept-Language: en-us UA-CPU: x86 Accept-Encoding: gzip, deflate Host: www.live.com Response HTTP/1.1 200 OK Content-Length: 3479 Expires: -1 Date: Sun, 14 Mar 2010 21:30:46 GMT Pragma: no-cache Content-Encoding: gzip GZIP Compress Network Traffic Minimize Bytes Downloaded
  43. 43. Request GET / HTTP/1.1 Accept: */* Accept-Language: en-us UA-CPU: x86 Accept-Encoding: gzip, deflate Host: www.live.com Response HTTP/1.1 200 OK Content-Length: 3479 Expires: -1 Date: Sun, 14 Mar 2010 21:30:46 GMT Pragma: no-cache Content-Encoding: gzip GZIP Compress Network Traffic Minimize Bytes Downloaded
  44. 44. Persist App Resources Locally in Package Minimize Bytes Downloaded
  45. 45. Persist App Resources Locally in Package Minimize Bytes Downloaded (Windows Store apps)
  46. 46. Cache Dynamic Resources in App Cache Minimize Bytes Downloaded
  47. 47. Cache Dynamic Resources in App Cache Minimize Bytes Downloaded
  48. 48. Cache Dynamic Resources in App Cache Minimize Bytes Downloaded
  49. 49. v2 Cache Dynamic Resources in App Cache Minimize Bytes Downloaded
  50. 50. manifest file PAGE 53
  51. 51. MIME Type: text/cache-manifest
  52. 52. Request GET /images/banner.jpg HTTP/1.1 Host: www.microsoft.com Response HTTP/1.1 200 OK Content-Type: image/jpeg Expires: Fri, 20 Apr 2011 00:00:00 GMT Provide Cacheable Content Minimize Bytes Downloaded
  53. 53. Request GET /images/banner.jpg HTTP/1.1 Host: www.microsoft.com Response HTTP/1.1 200 OK Content-Type: image/jpeg Expires: Fri, 20 Apr 2011 00:00:00 GMT Provide Cacheable Content Minimize Bytes Downloaded
  54. 54. jQuery Data Request jQuery.ajax({ url: url, dataType: 'json', data: data, success: callback }); Cached jQuery Data Request jQuery.ajax({ url: url, dataType: 'json', data: data, cache: true, success: callback }); Cache Data Requests Minimize Bytes Downloaded
  55. 55. jQuery Data Request jQuery.ajax({ url: url, dataType: 'json', data: data, success: callback }); Cached jQuery Data Request jQuery.ajax({ url: url, dataType: 'json', data: data, cache: true, success: callback }); Cache Data Requests Minimize Bytes Downloaded
  56. 56. Lower Case <img src="icon.png" /> Title Case <img src="Icon.png" /> Careless Developer <img src="ICon.png" /> Standardize File Capitalization Convention Minimize Bytes Downloaded
  57. 57. Lower Case <img src="icon.png" /> Title Case <img src="Icon.png" /> Careless Developer <img src="ICon.png" /> Standardize File Capitalization Convention Minimize Bytes Downloaded
  58. 58. Lower Case <img src="icon.png" /> Title Case <img src="Icon.png" /> Careless Developer <img src="ICon.png" /> Standardize File Capitalization Convention Minimize Bytes Downloaded
  59. 59. Lower Case <img src="icon.png" /> Title Case <img src="Icon.png" /> Careless Developer <img src="ICon.png" /> Standardize File Capitalization Convention Minimize Bytes Downloaded
  60. 60. Principle #3: Optimize Media Usage
  61. 61. Minimize Number of Images Optimize Media Usage 58average number of media resources on the top 100,000 web sites
  62. 62. <html> <head> <title>Test</title> </head> <body> … <!-- logo.gif dimensions: 500 x 400 --> <img src="logo.png" width="50" height="40" /> … </body> </html> Use Native Image Resolutions Optimize Media Usage
  63. 63. <html> <head> <title>Test</title> </head> <body> … <!-- logo.gif dimensions: 500 x 400 --> <img src="logo.png" width="50" height="40" /> … </body> </html> Use Native Image Resolutions Optimize Media Usage
  64. 64. <html> <head> <title>Test</title> </head> <body> … <!-- logo.gif dimensions: 500 x 400 --> <img src="logo.png" width="50" height="40" /> … </body> </html> Use Native Image Resolutions Optimize Media Usage
  65. 65. Avoid Death by 1,000 Images Optimize Media Usage
  66. 66. Use Image Sprites Optimize Media Usage 240px 40px 40px Scenario #1 – Multiple Files Scenario #2 - Image Sprite 40px 6 Images 6 Connections 96k Download 1 Image 1 Connection 21k Download 40px40px40px40px40px40px
  67. 67. Image Formats: PNG, JPEG Optimize Media Usage JPEG photographs, landscapes, and faces PNG Logos, charts, graphs, screenshots Don’t Get Distracted GIF, TIFF, BMP, WebP, etc.
  68. 68. 683 x 1024 RGBA 557 KB width * height * 4 2.67 MB Decoded
  69. 69. Huffman Decoding Dequantization / iDCT Chroma Upsampling YCbCr to RGB Color Conversion
  70. 70. Video: User Preview Images Optimize Media Usage <video poster="PreviewImage.jpeg " width="640" height="480" controls="controls">
  71. 71. Minimize Media Plugin Usage Optimize Media Usage
  72. 72. Principle #4: Efficiently Structure Markup
  73. 73. Link Style Sheets at Top of Page Efficiently Structure Markup <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css"href="class.css" /> </head> <body> … … … </body> </html>
  74. 74. Link Style Sheets at Top of Page Efficiently Structure Markup <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="class.css" /> </head> <body> … … … </body> </html>
  75. 75. <html> <head> <title>Test</title> </head> <body> … … … </body> <link rel="stylesheet" type="text/css" href="styles.css"/> </html> Never Link Style Sheets at Bottom of Page Efficiently Structure Markup
  76. 76. <html> <head> <title>Test</title> </head> <body> … … … </body> <link rel="stylesheet" type="text/css" href="styles.css"/> </html> Never Link Style Sheets at Bottom of Page Efficiently Structure Markup
  77. 77. <html> <head> <title>Test</title> </head> <body> <style> .item { color:#009900;} </style> <div class=‘item’>MyItem</div> </body> </html> Avoid Embedded and Inline Styles Efficiently Structure Markup
  78. 78. <html> <head> <title>Test</title> </head> <body> <style> .item { color:#009900;} </style> <div class=‘item’>MyItem</div> </body> </html> Avoid Embedded and Inline Styles Efficiently Structure Markup
  79. 79. /* These styles are for the home page. */ HomePage { color: red; } /* These styles are for the content page. */ ContentPage { color: green; } Only Include Necessary Styles Efficiently Structure Markup
  80. 80. /* These styles are for the home page. */ HomePage { color: red; } /* These styles are for the content page. */ ContentPage { color: green; } Only Include Necessary Styles Efficiently Structure Markup
  81. 81. /* These styles are for the home page. */ HomePage { color: red; } /* These styles are for the content page. */ ContentPage { color: green; } Only Include Necessary Styles Efficiently Structure Markup
  82. 82. <html> <head> <title>Test</title> </head> <body> … … … </body> </html> Always Link JavaScript at End of File Efficiently Structure Markup
  83. 83. <html> <head> <title>Test</title> </head> <body> … … … </body> </html> Always Link JavaScript at End of File Efficiently Structure Markup
  84. 84. <html> <head> <title>Test</title> <script src="myscript.js" … ></script> </head> <body> … … … </body> </html> Avoid Linking JavaScript In Head Efficiently Structure Markup
  85. 85. <html> <head> <title>Test</title> <script src="myscript.js" … ></script> </head> <body> … … … </body> </html> Avoid Linking JavaScript In Head Efficiently Structure Markup
  86. 86. <html> <head> <script type="text/javascript"> function helloWorld() { alert('Hello World!') ; } </script> </head> <body> … </body> </html> Avoid Inline JavaScript Efficiently Structure Markup
  87. 87. <html> <head> <script type="text/javascript"> function helloWorld() { alert('Hello World!') ; } </script> </head> <body> … </body> </html> Avoid Inline JavaScript Efficiently Structure Markup
  88. 88. <html> <head> <title>Test</title> </head> <body> … … … <script async src="myscript.js"></script> </body> </html> Asynchronously Download Script Efficiently Structure Markup
  89. 89. <html> <head> <title>Test</title> </head> <body> … … … <script async src="myscript.js"></script> </body> </html> Asynchronously Download Script Efficiently Structure Markup
  90. 90. <html> <head> <title>Test</title> </head> <body> … <script src="jquery.js" … ></script> <script src="myscript.js" … ></script> <script src="navigation.js" … ></script> <script src="jquery.js" … ></script> </body> </html> Remove Duplicate Code Efficiently Structure Markup
  91. 91. <html> <head> <title>Test</title> </head> <body> … <script src="jquery.js" … ></script> <script src="myscript.js" … ></script> <script src="navigation.js" … ></script> <script src="jquery.js" … ></script> </body> </html> Remove Duplicate Code Efficiently Structure Markup
  92. 92. Remove Duplicate Code Efficiently Structure Markup 52%of the pages on the web have duplicate code
  93. 93. <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=“gsel.js" … ></script> … Standardize on a Single Framework Efficiently Structure Markup
  94. 94. <script src="facebookconnect.js" … ></script> <script src="facebooklike.js" … ></script> <script src="facebookstats.js" … ></script> <script src="tweetmeme.js" … ></script> <script src="tweeter.js" … ></script> <script src="tweetingly.js" … ></script> <script src="googleanalytics.js" … ></script> <script src="doubleclick.js" … ></script> <script src="monitor.js" … ></script> <script src="digg.js" … ></script> … Don’t Include Script To Be Cool Efficiently Structure Markup
  95. 95. Replace Images with CSS3 Gradients Optimize Media Usage
  96. 96. Replace Images with CSS3 Border Radius Optimize Media Usage
  97. 97. Leverage CSS3 Transforms Optimize Media Usage -ms-transform: translate(75px, 100px) scaleY(.75) skewY(10deg); -webkit-transform: translate(75px, 100px) scaleY(.75) skewY(10deg); -moz-transform: translate(75px, 100px) scaleY(.75) skewY(10deg); -o-transform: translate(75px, 100px) scaleY(.75) skewY(10deg); Element Rotate SkewMove
  98. 98. Principle #5: Know What Your Application is Doing
  99. 99. Align Timers to the Display Frame (16.7) Know What Your Application is Doing setInterval(renderLoop, 16.7); setInterval(renderLoop, 33.4); 16.7 16.716.7
  100. 100. Use requestAnimationFrame for Animations Know What Your Application is Doing window.requestAnimationFrame(renderLoop); 16.7 16.716.7
  101. 101. Principle #6: Write Fast JavaScript
  102. 102. JSON Always Faster than XML for Data JSON Representation "glossary":{ "title": "example glossary", "GlossDiv":{ "title": "S", "GlossList": { "GlossEntry": { "ID": "SGML", "SortAs": "SGML", "GlossTerm": "Markup Language", "Acronym": "SGML", "Abbrev": "ISO 8879:1986", "GlossDef": { "para": "meta-markup language", "GlossSeeAlso": ["GML", "XML"] }, "GlossSee": "markup" } } } } XML Representation <!DOCTYPE glossary PUBLIC "DocBook V3.1"> <glossary><title>example glossary</title> <GlossDiv><title>S</title> <GlossList> <GlossEntry ID="SGML" SortAs="SGML"> <GlossTerm>Markup Language</GlossTerm> <Acronym>SGML</Acronym> <Abbrev>ISO 8879:1986</Abbrev> <GlossDef> <para>meta-markup language</para> <GlossSeeAlso OtherTerm="GML"> <GlossSeeAlso OtherTerm="XML"> </GlossDef> <GlossSee OtherTerm="markup"> </GlossEntry> </GlossList> </GlossDiv> </glossary>
  103. 103. Native JSON Methods var jsObjStringParsed = JSON.parse(jsObjString); var jsObjStringBack = JSON.stringify(jsObjStringParsed); Use Native JSON Methods Write Fast JavaScript
  104. 104. Numbers in JavaScript • All numbers are IEEE 64-bit floating point numbers - Great for flexibility - Performance and optimization challenge 31bits 31-bit (tagged) Integers 1bit 1 31bits Object pointer 1bit 0 32bits 32bits Floats 32-bit Integers STACK HEAP FIXED LENGTH, FASTER ACCESS VARIABLE LENGTH, SLOWER ACCESS Boxed
  105. 105. Avoid creating floats if they are not needed Fastest way to indicate integer math is |0 var r = 0; function doMath(){ var a = 5; var b = 2; r = ((a + b) / 2) |0 ; // r = 3 r = Math.round((a + b) / 2); // r = 4 } var r = 0; function doMath(){ var a = 5; var b = 2; r = ((a + b) / 2); // r = 3.5 } ... var intR = Math.floor(r); 0x005e4148r: 0x00000007r: 0x00000009r: Number 3.5 STACK HEAP STACK SLOW FAST SLOW
  106. 106. Take advantage of type-specialization for arithmetic Create separate functions for ints and floats; use consistent argument types function Distance(p1, p2) { var dx = p1.x - p2.x; var dy = p1.y - p2.y; var d2 = dx * dx + dy * dy; return Math.sqrt(d2); } var point1 = {x:10, y:10}; var point2 = {x:20, y:20}; var point3 = {x:1.5, y:1.5}; var point4 = {x:0x0AB, y:0xBC}; Distance(point1, point3); Distance(point2, point4); function DistanceFloat(p1, p2) { var dx = p1.x - p2.x; var dy = p1.y - p2.y; var d2 = dx * dx + dy * dy; return Math.sqrt(d2); } function DistanceInt(p1,p2) { var dx = p1.x - p2.x; var dy = p1.y - p2.y; var d2 = dx * dx + dy * dy; return (Math.sqrt(d2) | 0); } var point1 = {x:10, y:10}; var point2 = {x:20, y:20}; var point3 = {x:1.5, y:1.5}; var point4 = {x:0x0AB, y:0xBC}; DistanceInt(point1, point2); DistanceFloat(point3, point4); SLOW FAST
  107. 107. Initialize JavaScript on Demand Write Fast Loading JavaScript var userTileScriptsLoaded = false; function CustomizeUserTile() { if (userTileScriptsLoaded == false) { var head = document.getElementsByTagName("head")[0]; script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'upload.js'; head.appendChild(script); } }
  108. 108. Initialize JavaScript on Demand Write Fast Loading JavaScript var userTileScriptsLoaded = false; function CustomizeUserTile() { if (userTileScriptsLoaded == false) { var head = document.getElementsByTagName("head")[0]; script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'upload.js'; head.appendChild(script); } }
  109. 109. Initialize JavaScript on Demand Write Fast Loading JavaScript var userTileScriptsLoaded = false; function CustomizeUserTile() { if (userTileScriptsLoaded == false) { var head = document.getElementsByTagName("head")[0]; script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'upload.js'; head.appendChild(script); } }
  110. 110. Initialize JavaScript on Demand Write Fast Loading JavaScript var userTileScriptsLoaded = false; function CustomizeUserTile() { if (userTileScriptsLoaded == false) { var head = document.getElementsByTagName("head")[0]; script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'upload.js'; head.appendChild(script); } }
  111. 111. Initialize JavaScript on Demand Write Fast Loading JavaScript var userTileScriptsLoaded = false; function CustomizeUserTile() { if (userTileScriptsLoaded == false) { var head = document.getElementsByTagName("head")[0]; script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'upload.js'; head.appendChild(script); } }
  112. 112. Avoid chattiness with the DOM ... //for each rotation document.body.game.getElementById(elID).classList.remove(oldClass) document.body.game.getElementById(elID).classList.add(newClass) ... var element = document.getElementById(elID).classList; //for each rotation element.remove(oldClass) element.add(newClass) ... JavaScript DOM JavaScript DOM
  113. 113. Avoid automatic conversions of DOM values Values from DOM are strings by default this.boardSize = document.getElementById("benchmarkBox").value; for (var i = 0; i < this.boardSize; i++) { //this.boardSize is “25” for (var j = 0; j < this.boardSize; j++) { //this.boardSize is “25” ... } } this.boardSize = parseInt(document.getElementById("benchmarkBox").value); for (var i = 0; i < this.boardSize; i++) { //this.boardSize is 25 for (var j = 0; j < this.boardSize; j++) { //this.boardSize is 25 ... } } FAST (25% marshalling cost reduction in init function) SLOW
  114. 114. function LoopChildren(elm) { var node = elm.firstChild; while (node != null) { node = node.nextSibling; } } Built in DOM Methods Always More Efficient Use DOM Efficiently
  115. 115. function LoopChildren(elm) { var node = elm.firstChild; while (node != null) { node = node.nextSibling; } } Built in DOM Methods Always More Efficient Use DOM Efficiently
  116. 116. function LoopChildren(elm) { var node = elm.firstChild; while (node != null) { node = node.nextSibling; } } Built in DOM Methods Always More Efficient Use DOM Efficiently
  117. 117. function InsertUsername() { document.getElementById('user').innerHTML = userName; } User .innerHTML to Construct Your Page Use DOM Efficiently
  118. 118. Maintain a Small and Healthy DOM Use DOM Efficiently Document HTML Body Element Element Element Element Element Element Element Element Element
  119. 119. Six Principles to Remember 1) Quickly Respond to Network Requests 2) Minimize Bytes Downloaded 3) Optimize Media Usage 4) Efficiently Structure Markup 5) Know What Your Application is Doing 6) Write Fast JavaScript
  120. 120. Overview Concepts High Performance Websites Steve Souders, September 2007 Event Faster Websites: Best Practices Steve Souders, June 2009 High Performance Browser Networking Ilya Grigorik, September 2013 JavaScript Patterns High Performance JavaScript Nicholas Zakas, March 2010 JavaScript the Good Parts Douglas Crockford, May 2008 JavaScript Patterns Stoyan Stefanov, September 2010 JavaScript Cookbook Shelley Powers, July 2010 Microsoft Guidance Windows Store App: JavaScript Best Practices MSDN, December 2012 Performance Tricks to Make Apps & Sites Faster Jatinder Mann, Build 2012 50 Performance Tricks for Windows Store Apps Jason Weber, Build 2011 Engineering Excellence Performance Guidance Jason Weber, EE Forum 2011 Internet Explorer Architectural Overview Jason Weber, PDC 2011 W3C Web Performance Web Performance Working Group Homepage Navigation Timing Specification Blog Posts 1) Measuring Performance with ETW/XPerf 2) Measuring Performance in Lab Environments 3) Browser Subsystems Overview 4) What Common Benchmarks Measure Tools Windows Performance Toolkit Fiddler Web Debugger Contact Doris Chen Twitter: @doristchen Email: doris.chen@Microsoft.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×