Google Chrome
Mike Belshe<mbelshe@google.com>
Velocity 2010
- Benchmarks
- Network Vitals
- HTML5 for Performance
- Chrome's Secret Weapon
Benchmarks
fastest on every benchmark
20% faster with every release
Every web page in 100ms!
But...
Server latencies are >100ms
and network latencies are >100ms
and the client rendering is >100ms...
OK - this will be fun!
Network Vitals
the network is the bottleneck
average 320KB
comprise 45 resources
touch 8.3 domains
3.9Mbps in the US
1.7Mbps worldwide
Regions now exceed 5Mbps
Round-Trip-Time (RTT) is over 100ms
Not going down.
Packet loss is 1-2% worldwide
Opportunities exist at all layers
- Application
- HTTP
- SSL
- TCP
Leverage the client
- Separate UI and Data
- Take advantage of HTML5 where you can
Consider a CDN
Compress
| http | https | |
|---|---|---|
| Top-100 sites | 11% | 51% |
| Top-500 sites | 14% | 45% |
| All sites | 34% | 56% |
Smarter implementations
- DNS prefetching
- DNS cost: 48ms at the 50%-tile, 148ms at the 90%-tile
- Sub-domain topology learning algorithms
- Mitigate packet loss
- Lost SYN packet on Windows is 3000ms
SSL is the un-optimized frontier
- Multi-packet TLS Records
- OSCP caching
- OCSP stapling
- Who forgot the compression?
- Too many round trips
- Many more...
TCP specific issues
- TCP was not designed for short transactions
- Congestion control (cwnd) is the bottleneck!
- Handshake is serial with data exchange
- Initial RTO is high
- Server scalability - can't hold connections open for long
All Open Source!
- HTTP optimizations on current protocols
- SPDY - prioritized, multiplexed, compressed HTTP
- SSL - SnapStart for 0-RTT
- New transport? (based on SCTP? Other?)
HTML5 for Performance
leveraging the client
background: -webkit-gradient(linear, left top, left bottom,
from(#00abeb), to(white),
color-stop(0.5, white), color-stop(0.5, #66cc00))
background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))
border-radius: 10px;
Velocity 2010
text-shadow: rgba(64, 64, 64, 0.5) 0px 0px 0px; box-shadow: rgba(0, 0, 128, 0.25) 0px 0px 0px;
#box {
-webkit-transition: margin-left 1s ease-in-out;
}
document.getElementById('box').className = 'left';
document.getElementById('box').className = 'right';
<html manifest="cache-manifest">
window.applicationCache.addEventListener('checking', updateCache Status, false);
CACHE MANIFEST # version 1 CACHE: bar.png chrome.png refresh.png
var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});
// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
window.localStorage['value'] = area.value;
window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];
var socket = new WebSocket(location);
socket.onopen = function(event) {
socket.postMessage("Hello, WebSocket");
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert("closed"); }
<audio src="sound.mp3" controls></audio>
document.getElementById("audio").muted=false;
<video src='movie.mp4' autoplay controls ></video>
document.getElementById("video").play();
<input type="range"><input autofocus><input placeholder="...">New semantic tags (header, section, etc.)
Microdata
ARIA role and state attributes
<canvas><audio>,<video>data: URIsSVG for images
CSS Features
CSS 3 selectors!
Gradients
Rounded corners
Reflections
Box shadows
Text shadows
Transitions
Transformations
Animations
Independent background opacity
@font-facePointer events
HBox/VBox layout
Text clipping
Multi-background
background-size, background-origin, background-clipHSLA color model
JS & DOM Features
One way to listen for events
querySelectorAlldocument.HTMLDivElement, etc.Array generics, some ES5 features
JITing JS engines
Web Workers
Local Storage
Web Sockets
AppCache
Notifications
Drag and Drop
Geolocation
WebGL
But who cares?
sigh. See you in two years...
Chrome's Secret Weapon
it's about your performance, not ours
Thank You
http://dev.chromium.org/
<meta http-equiv="X-UA-Compatible" content="chrome=1">or
X-UA-Compatible: chrome=1Try to load this presentation in IE to see what I mean.