Google Chrome

Mike Belshe<mbelshe@google.com>
Velocity 2010

Agenda
  • Benchmarks
  • Network Vitals
  • HTML5 for Performance
  • Chrome's Secret Weapon

Benchmarks

fastest on every benchmark

The V8 Performance Drumbeat...

20% faster with every release

Google's Goal

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

Web Page Size

average 320KB

Source: Google Index Data, May 2010
Web Page Size

comprise 45 resources

Source: Google Index Data, May 2010
Web Page Size

touch 8.3 domains

Source: Google Index Data, May 2010
Client Connectivity

3.9Mbps in the US
1.7Mbps worldwide
Regions now exceed 5Mbps

Client Connectivity

Round-Trip-Time (RTT) is over 100ms
Not going down.

Source: Google, June 2010
Client Connectivity

Packet loss is 1-2% worldwide

Source: Google Chrome, 2010
More Bandwidth Doesn't Matter
"Top-25" pages, 60ms RTT, 0% loss
Source: Google
Reduced RTT Does Matter
"Top-25" pages, 5Mbps link, 0% loss
Source: Google
Web Page Efficiency Is Poor
"Top-25" pages, 60ms RTT, 0% loss
Source: Google Chrome
Optimizing the Network Stack

Opportunities exist at all layers

  • Application
  • HTTP
  • SSL
  • TCP
Application Layer Optimizations

Leverage the client

  • Separate UI and Data
  • Take advantage of HTML5 where you can

Consider a CDN

Compress

% of compressible data which is not compressed
httphttps
Top-100 sites11%51%
Top-500 sites14%45%
All sites 34%56%
Source: Google Web Indexer
HTTP Optimizations

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
Source: Google Chrome
SSL (aka TLS) Optimizations

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 Optimizations

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
Chrome's Work In Progress

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

CSS Gradients
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))  
                              
CSS Corners
Use CSS3 to reduce download sizes
  border-radius: 10px;  

Velocity 2010


CSS Shadows
Turn complicated animation script into simple CSS
text-shadow: 
  rgba(64, 64, 64, 0.5) 
  0px  
  0px  
  0px;      
box-shadow: 
  rgba(0, 0, 128, 0.25) 
  0px  
  0px  
  0px; 
            
Shadows example
CSS Transitions

#box {
  -webkit-transition: margin-left 1s ease-in-out;
}  

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right'; 

Application Cache
Similar to cache controls, but browsers will be able to discover and auto-sync your application's manifest.
<html manifest="cache-manifest">
window.applicationCache.addEventListener('checking', updateCache Status, false);
CACHE MANIFEST

# version 1

CACHE:
bar.png
chrome.png
refresh.png
Web SQL Database
var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

    Originally designed for offline storage, but usable for sites using complex data access.
    Web Storage
    Use local storage to avoid costly round trips
    // 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'];
    
    Example: Save email draft on the client side (crash-safe)
    Web Sockets
    Solves the "Hanging GET" problem.
    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"); }
    
    
    Built-in Audio and Video
    Lightweight Audio Visual elements
    <audio src="sound.mp3" controls></audio>
    document.getElementById("audio").muted=false;
    
    <video src='movie.mp4' autoplay controls ></video>
    document.getElementById("video").play();
    
    Other HTML5 Features
    HTML Features
    <input type="range">
    <input autofocus>
    <input placeholder="...">
    New semantic tags (header, section, etc.)
    Microdata
    ARIA role and state attributes
    <canvas>
    <audio>,<video>
    data: URIs
    SVG for images

    CSS Features
    CSS 3 selectors!
    Gradients
    Rounded corners
    Reflections
    Box shadows
    Text shadows
    Transitions
    Transformations
    Animations
    Independent background opacity
    @font-face
    Pointer events
    HBox/VBox layout
    Text clipping
    Multi-background
    background-size, background-origin, background-clip
    HSLA color model

    JS & DOM Features
    One way to listen for events
    querySelectorAll
    document.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...

    IE8: only 52% in 15 Months
    Firefox 3.6: 67% in 5 Months

    Chrome's Secret Weapon

    it's about your performance, not ours

    Chrome: 98% in 7 Days

    Thank You


    http://dev.chromium.org/

    Thanks to Marcin Wichary and Ernest Delgado for their HTML5 Slides
    P.S. Chrome Frame
    If your current browser can't display this presentation, Chrome Frame is for you!

    Chrome Frame adds HTML5 to older browsers with minimal effort

    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    or
    X-UA-Compatible: chrome=1
    Try to load this presentation in IE to see what I mean.