developing high performance websites and modern apps with javascript and html5
DESCRIPTION
Creating high performance sites and apps is crucial for every developer. In this session, we will explore the best practices and performance tricks, including startup time, UI responsiveness, and Memory efficiency to make your apps running faster and fluid. Come learn the tips, tricks, and tools for maximizing the performance of your sites and apps with JavaScript and HTML5.TRANSCRIPT
![Page 1: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/1.jpg)
![Page 2: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/2.jpg)
Blog http://blogs.msdn.com/dorischen
Who am I? Developer Evangelist at Microsoft based in Silicon Valley, CA
Blog: http://blogs.msdn.com/b/dorischen/
Twitter @doristchen
Email: [email protected]
Office Hours http://ohours.org/dorischen
Has over 15 years of experience in the software industry focusing on web technologies
Spoke and published widely at JavaOne, O'Reilly, Silicon Valley Code Camp, SD West, SD Forum and worldwide User Groups meetings
Doris received her Ph.D. from the University of California at Los Angeles (UCLA)
PAGE 2
![Page 3: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/3.jpg)
![Page 4: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/4.jpg)
![Page 5: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/5.jpg)
Tips & tricks that still work
http://channel9.msdn.com/Events/Build/2012/3-132
![Page 6: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/6.jpg)
function InsertUsername()
{
document.getElementById('user').innerHTML = userName;
}
User innerHTML to Create your DOMUse DOM Efficiently
![Page 7: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/7.jpg)
<html>
<head>
<script type="text/javascript">function helloWorld() {
alert('Hello World!') ;}
</script>
</head>
<body>
…
</body>
</html>
Avoid Inline JavaScriptEfficiently Structure Markup
![Page 8: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/8.jpg)
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>
![Page 9: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/9.jpg)
Native JSON Methods
var jsObjStringParsed = JSON.parse(jsObjString);
var jsObjStringBack = JSON.stringify(jsObjStringParsed);
Use Native JSON MethodsWrite Fast JavaScript
![Page 10: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/10.jpg)
![Page 11: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/11.jpg)
Raw JS code: http://aka.ms/FastJS
![Page 12: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/12.jpg)
DemoHigh Five
![Page 13: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/13.jpg)
ArraysObjects and
propertiesNumbers Animation loop
Memory allocations
Repeat until neighbors list empty
Components and control flow
![Page 14: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/14.jpg)
![Page 15: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/15.jpg)
Always start with a good profiler
Windows Performance Toolkit
http://aka.ms/WinPerfKit
F12 UI Responsiveness Tool
![Page 16: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/16.jpg)
Networking 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
DMANIP
Hit Testing
InputData
&State
IE (Pipeline)
![Page 17: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/17.jpg)
Do we expect so much of GC to happen?
GC
![Page 18: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/18.jpg)
![Page 19: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/19.jpg)
What triggers a garbage collection?
• Every call to new or implicit memory allocation reserves GC memory- Allocations are cheap until current pool is exhausted
• When the pool is exhausted, engines force a collection- Collections cause program pauses
- Pauses could take milliseconds
• Be careful with object allocation patterns in your apps- Every allocation brings you closer to a GC pause
![Page 20: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/20.jpg)
demo
![Page 21: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/21.jpg)
Results
• Overall FG GC time reduced to 1/3rd
• Raw JavaScript perf improved ~3x
![Page 22: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/22.jpg)
Best practices for staying lean
• Avoid unnecessary object creation
• Use object pools, when possible
• Be aware of allocation patterns
- Setting closures to event handlers
- Dynamically creating DOM (sub) trees
- Implicit allocations in the engine
![Page 23: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/23.jpg)
![Page 24: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/24.jpg)
Internal Type System: Fast Object Types
var p1;p1.north = 1;p1.south = 0;
var p2;p2.south = 0;p2.north = 1;
north 1
south 0
north 1
south 0
north 1
south 0
Base Type “{}”
Type “{north}” Type “{south}”
Base Type “{}”
Type “{south, north}”Type “{north, south}”
![Page 25: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/25.jpg)
Create fast types and avoid type mismatchesDon’t add properties conditionally
function Player(direction) {if (direction = “NE”) {
this.n = 1;this.e = 1;
}else if (direction = “ES”) {
this.e = 1;this.s = 1;
}...
}
var p1 = new Player(“NE”); // p1 type {n,e}var p2 = new Player(“ES”); // p2 type {e,s}
function Player(north,east,south,west) {this.n = north;this.e = east;this.s = south;this.w = west;
}
var p1 = new Player(1,1,0,0);//p1 type {n,e,s,w}var p2 = new Player(0,0,1,1);//p2 type {n,e,s,w}
p1.type != p2.type p1.type == p2.type
![Page 26: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/26.jpg)
Create fast types and avoid type mismatchesDon’t default properties on prototypes
function Player(name) {...
};
Player.prototype.n = null;Player.prototype.e = null;Player.prototype.s = null;Player.prototype.w = null;
var p1 = new Player("Jodi"); //p1 type{}var p2 = new Player("Mia"); //p2 type{}var p3 = new Player("Jodi"); //p3 type{}
p1.n = 1; //p1 type {n}p2.e = 1; //p2 type {e}
function Player(name) {this.n = null;this.e = null;this.s = null;this.w = null;...
}
var p1 = new Player("Jodi"); //p1 type{n,e,s,w}var p2 = new Player("Mia"); //p2 type{n,e,s,w}var p3 = new Player("Jodi"); //p3 type{n,e,s,w}
p1.n = 1; //p1 type{n,e,s,w}p2.e = 1; //p2 type{n,e,s,w}
p1.type != p2.type != p3.type p1.type == p2.type == p3.type
![Page 27: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/27.jpg)
Internal Type System: Slower Property Bags
var p1 = new Player(); //prop bagp1.north = 1;p1.south = 1;
var p2 = new Player(); //prop bagp2.north = 1;p2.south = 1;
Slower Bag “{p1}” Slower Bag “{p2}”
![Page 28: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/28.jpg)
Avoid conversion from fast type to slower property bagsDeleting properties forces conversion
function Player(north,east,south,west) {this.n = north;this.e = east;this.s = south;this.w = west;
}var p1 = new Player();
delete p1.n;
function Player(north,east,south,west) {this.n = north;this.e = east;this.s = south;this.w = west;
}var p1 = new Player();
p1.n = 0; // or undefined
SLOW FAST
![Page 29: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/29.jpg)
Avoid creating slower property bagsAdd properties in constructor, restrict total properties
function Player(north,east,south,west) {this.n = north;this.e = east;this.s = south;this.w = west;... // Restrict to few if possible
}
var p1 = new Player();
function Player() {this.prop01 = 1;this.prop02 = 2;...this.prop256 = 256;... // Do you need an array?
}
var p1 = new Player();
SLOW FAST
![Page 30: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/30.jpg)
Avoid creating slower property bagsRestrict using getters, setters and property descriptors in perf critical paths
function Player(north, east, south, west) {Object.defineProperty(this, "n", {
get : function() { return nVal; }, set : function(value) { nVal=value; }, enumerable: true, configurable: true
});Object.defineProperty(this, "e", {
get : function() { return eVal; }, set : function(value) { eVal=value; }, enumerable: true, configurable: true
});...
}var p = new Player(1,1,0,0);var n = p.n;p.n = 0;...
function Player(north, east, south, west) {this.n = north;this.e = east;this.s = south;this.w = west;...
}
var p = new Player(1,1,0,0);var n = p.n;p.n = 0;...
SLOW FAST
![Page 31: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/31.jpg)
demo
![Page 32: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/32.jpg)
Results
• Time in script execution reduced ~30%
• Raw JS performance improved ~30%
3.8s 2.2s
![Page 33: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/33.jpg)
Best practices for fast objects and manipulations
• Create and use fast types
• Keep shapes of objects consistent
• Avoid type mismatches for fast types
![Page 34: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/34.jpg)
![Page 35: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/35.jpg)
Numbers in JavaScript
• All numbers are IEEE 64-bit floating point numbers- Great for flexibility
- Performance and optimization challenge
31 bits
31-bit (tagged) Integers1 bit
1
31 bits
Object pointer1 bit
032 bits
32 bits
Floats
32-bit Integers
STACK HEAP
FIXED LENGTH, FASTER ACCESS VARIABLE LENGTH, SLOWER ACCESS
Boxed
![Page 36: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/36.jpg)
Use 31-bit integers for faster arithmetic
var north = 1;
var east = "east";var south = 0.1;var west = 0x1;
function Player(north, south, east, west) {
...}
var p = new Player(north,south,east,west);
STACK
0x00000003north:
0x005e4148east:
0x005e4160south:
String
“east”
Number
0.1
Number
0x1
0x005e4170west:
HEAP
0x005e4148: 0…010010000x03 represents 1: 0…00000011
SLOW
SLOW
SLOW
![Page 37: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/37.jpg)
Avoid creating floats if they are not neededFastest way to indicate integer math is |0
var r = 0;
function doMath(){var a = 5;var b = 2;r = ((a + b) / 2) |0 ; // r = 3r = 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
![Page 38: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/38.jpg)
Take advantage of type-specialization for arithmeticCreate 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
![Page 39: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/39.jpg)
Best practices for fast arithmetic
• Use 31-bit integer math when possible
• Avoid floats if they are not needed
• Design for type specialized arithmetic
![Page 40: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/40.jpg)
![Page 41: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/41.jpg)
Chakra: Array internals
01 var a = new Array();02 a[0] = 1;03 a[1] = 2.3;04 a[2] = “str”;
Type: Int Array 1
Type: Float
Array
Type: Var Array 1 2.3 “str”
1 2.3
![Page 42: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/42.jpg)
Pre-allocate arrays
var a = new Array(100);for (var i = 0; i < 100; i++) {a[i] = i + 2;
}
var a = new Array();for (var i = 0; i < 100; i++) {a.push(i + 2);
}
0 ?
?+1 ??
…0 100
SLOW FAST
![Page 43: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/43.jpg)
var a = new Array(100000);
for (var i = 0; i < a.length; i++) {a[i] = i;
}...//operations on the array...a[99] = “str”;
For mixed arrays, provide an early hintAvoid delayed type conversion and copy
var a = new Array(100000);
a[0] = “hint”;
for (var i = 0; i < a.length; i++) {a[i] = i;
}...//operations on the array...a[99] = “str”;
SLOW FAST
![Page 44: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/44.jpg)
Use Typed Arrays when possibleAvoids tagging of integers and allocating heap space for floats
var value = 5;
var a = new Array(100);a[0] = value; // 5 - taggeda[1] = value / 2; // 2.5 - boxeda[2] = "text"; // "text" – var array
var value = 5;
var a = new Float64Array(100);a[0] = value; // 5 - no tagging requireda[1] = value / 2; // 2.5 - no boxing requireda[2] = "text"; // 0
var a = new Int32Array(100);a[0] = value; // 5 - no tagging requireda[1] = value / 2; // 2 - no tagging requireda[2] = "text"; // 0
SLOW FAST
![Page 45: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/45.jpg)
Keep values in arrays consistent Numeric arrays treated like Typed Arrays internally
var a = [1,0x2,99.1,5]; //mixed arrayvar b = [0x10,8,9]; //mixed array
function add(a,i,b,j){return a[i] + b[j];
}
add(a,0,b,0);add(a,1,b,1);
var a = [1,5,8,9]; //int arrayvar b = [0x02,0x10,99.1]; //float array
function add(a,i,b,j){return a[i] + b[j];
}
add(a,0,b,0);add(a,1,b,1);
SLOW FAST
![Page 46: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/46.jpg)
Keep arrays denseDeleting elements can force type change and de-optimization
var a = new Array(1000); //type int...for (var i = 0; i < boardSize; i++) {
matrix[i] = [1,1,0,0];}
//operating on the array...delete matrix[23];...//operating on the array
var a = new Array(1000); //type int...for (var i = 0; i < boardSize; i++) {
matrix[i] = [1,1,0,0];}
//operating on the array...matrix[23] = 0;...//operating on the array
SLOW FAST
![Page 47: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/47.jpg)
Enumerate arrays efficientlyExplicit caching of length avoids repetitive property accesses
var a = new Array(100);var total = 0;
for (var item in a) {total += item;
};
a.forEach(function(item){total += item;
});
for (var i = 0; i < a.length; i++) { total += a[i];
}
var a = new Array(100);var total = 0;
cachedLength = a.length;
for (var i = 0; i < cachedLength; i++) { total += a[i];
}
SLOW FAST
![Page 48: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/48.jpg)
Best practices for using arrays efficiently
• Pre-allocate arrays
• Keep array type consistent
• Use typed arrays when possible
• Keep arrays dense
• Enumerate arrays efficiently
![Page 49: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/49.jpg)
![Page 50: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/50.jpg)
Avoid chattiness with the DOM
...//for each rotationdocument.body.game.getElementById(elID).classList.remove(oldClass)document.body.game.getElementById(elID).classList.add(newClass)...
var element = document.getElementById(elID).classList;
//for each rotationelement.remove(oldClass)element.add(newClass)...
JavaScript
DOM
JavaScript
DOM
![Page 51: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/51.jpg)
Avoid automatic conversions of DOM valuesValues 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 25for (var j = 0; j < this.boardSize; j++) { //this.boardSize is 25
...}
}
FAST(25% marshalling cost
reduction in init function)
SLOW
![Page 52: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/52.jpg)
Paint as much as your users can seeAlign timers to display frames
setInterval(animate, 0);setTimeout(animate, 0);
requestAnimationFrame(animate);
setInterval(animate, 1000 / 60);setTimeout(animate, 1000 / 60);
MORE WORK LESS WORK
![Page 53: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/53.jpg)
demo
![Page 54: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/54.jpg)
ResultsSave CPU cycles
75% 65%
setTimeout(animate, 0); requestAnimationFrame(animate);
![Page 55: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/55.jpg)
Optimized JS code: http://aka.ms/FasterJS
![Page 56: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/56.jpg)
![Page 57: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/57.jpg)
![Page 58: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/58.jpg)
PAGE 61
![Page 59: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/59.jpg)
![Page 60: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/60.jpg)
![Page 61: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/61.jpg)
Loading and
parsing
of
HTML, JS, CSS
New host
process
Tile click
"DOMContentLoaded" event
Windows Runtime
"activated" event
Splash screen
Ready for
user
Navigation
App visible
![Page 62: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/62.jpg)
Splash screen App visible App ready to use
![Page 63: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/63.jpg)
• Can I eliminate work entirely?
• Can I optimize existing work?
• Can I defer work, or perform it in parallel?
![Page 64: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/64.jpg)
Splash screen App visible App ready to use
![Page 65: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/65.jpg)
Loading and Parsing: Package Locally
![Page 66: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/66.jpg)
Optimize your landing Page: Use Local Data
![Page 67: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/67.jpg)
MIME Type: text/cache-manifest
![Page 68: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/68.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 80
![Page 69: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/69.jpg)
Optimize landing page: Load only what you need
<script type="text/javascript" src='file1.js'defer='defer'></script>
![Page 70: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/70.jpg)
Further optimizations
![Page 71: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/71.jpg)
![Page 72: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/72.jpg)
Join us for this Free, hands-on event and learn how to build a Windows 8.1
and/or Windows Phone game in record time. We’ll cover everything you need
to create, upload and publish an amazing game. Expert developers will outline
different game frameworks and give you the tools you need to start building.
They’ll also explain how to add graphics, level and sound to game starter kits,
while sharing other cool ways to make the game your own. In one jam-packed
day of learning and coding, you can turn your idea into reality!
Register today for a local Game On event.
December 4, 2013 December 5, 2013
San Francisco, CA Mountain View, CA
http://aka.ms/gameonsf http://aka.ms/gameonsvc
![Page 73: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/73.jpg)
![Page 74: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/74.jpg)
![Page 75: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/75.jpg)
http://bit.ly/win8OnePage
http://bit.ly/HTML5Wins8Camp
http://msdn.microsoft.com/en-us/library/windows/apps/hh465194.aspx
http://Aka.ms/brockschmidtbook
http:/dev.windows.com
PAGE
94
![Page 76: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/76.jpg)
PAGE
95
• Responsive Web Design and CSS3
• http://bit.ly/CSS3Intro
• HTML5, CSS3 Free 1 Day Training
• http://bit.ly/HTML5DevCampDownload
• Using Blend to Design HTML5 Windows 8 Application (Part II): Style,
Layout and Grid
• http://bit.ly/HTML5onBlend2
• Using Blend to Design HTML5 Windows 8 Application (Part III): Style
Game Board, Cards, Support Different Device, View States
• http://bit.ly/HTML5onBlend3
• Feature-specific demos • http://ie.microsoft.com/testdrive/
• Real-world demos• http://www.beautyoftheweb.com/
![Page 77: Developing High Performance Websites and Modern Apps with JavaScript and HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052216/554f4fe5b4c905b9508b4ca0/html5/thumbnails/77.jpg)