Who am I?

• Philippe Le Hégaret, <plh@w3.org>, @plhw3org
• Responsible for the Interaction Domain at W3C
• Interaction Domain contains items like HTML, CSS, SVG, WOFF, Video, various Web APIs, etc.
• Based at MIT in Cambridge, MA, USA

The World Wide Web Consortium (W3C)

• Lead Web to its Full Potential
• 385 Members
• Web ecosystem: users, developers, browsers, etc.

How does W3C work?

• Focus is to create standards that lead to public and commercial benefits
• W3C accepts inputs from all and provides outputs to all
• Each participation brings their expertise, perspective
• 65 Groups. Each has engineers from member companies and W3C staff support
• Liaisons with many organizations: IDPF, IETF, OMA, DLNA, ISO JTC1, ITU-T, Open IPTV Forum, SMPTE, EBU, more.

Standard Technologies

Web Client 2012

Web Performance Working Group

"The mission of the Web Performance Working Group is to provide methods to enhance aspects of application performance of user agent features and APIs."

Chairs:

Arvind Jain, Google

Jason Weber, Microsoft

25 organizations: Microsoft, Google, Mozilla, eBay, dynaTrace, Intel, Akamai, etc.

Web Performance

We do things like:

• Navigation and Resource Timing: .redirectStart, .domainLookupStart, etc.
• Page Visibility: document.hidden
• .requestAnimationFrame
• .now() (now in sub-milliseconds!)

… and we implement them!

Our documents

Timing specifications

Navigating Timing

client-side latency measurements within applications

function onLoad() {
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  alert("User-perceived page loading time: " + page_load_time);
}

Navigating Timing

  sd=function() {
    var a=window.performance
          ||window.webkitPerformance;
    return (a=a&&a.timing)
            &&a.loadEventStart-a.fetchStart
  }

Navigating Timing

High Resolution Time

• One function:

  window.performance.now()

• Accurate to a thousandth of a millisecond
  (subject to hardware or software constraints)
• Monotonic clock: not subject to system clock adjustments or skew
• HRT 2 will introduce support for Web Workers

Navigating Timing 2

• support for unified interface to store and retrieve performance metric data
• support for sub-millisecond resolution
• Add timing information for link negotiation
  (network interface on/off timing)

Resource Timing

client-side latency measurements within applications

function onPlay() {
  var resourceList = window.performance.getEntriesByType("resource");
  // for all resources in ResourceList
    if (resource.initiatorType == "video") {
      alert("autoplay loading time: "
            + performance.now() - resourceList[i].fetchStart);
    }
}
video.addEventListener("play", onPlay, false);

Resource Timing

Resource Timing

• Support for img, video, iframe, css, XHR, etc.
• default to 150 resources in the buffer (see also setResourceTimingBufferSize)
• Support for cross-origin resources: Timing-Allow-Origin

User Timing

High precision timestamps for web applications

performance.mark("mark_fully_loaded");
doTask1(); // Some developer code
performance.mark("mark_above_the_fold");

var perfEntries = performance.getEntriesByType("mark");
// for all perfEntries, do something

Perf-enhancing specifications

Page Visibility

Determine the current visibility of a page

document.hidden
document.addEventListener('visibilitychange', ...);

function onvisibilitychange() {
  if (document.hidden)
   video.pause();
  else 
   video.play();
}

requestAnimationFrame

Script-based animations where the user agent is in control of limiting the update rate of the animation

function animate(time) {
  if (!document.hidden) {
    // if visible, draw
    canvas.drawImage(myVideoElement, 0, 0);
  }
  window.requestAnimationFrame(animate);
}
function start() {
  window.requestAnimationFrame(animate);
}

requestAnimationFrame

function animate() {
  $("#raf_count").innerHTML = ++raf_count;
  window.requestAnimationFrame(animate);  
}
// RAF
window.requestAnimationFrame(animate);  
// setTimeout
window.setTimeout(animate2, 0);

What's next?

• Resource Timing 2
• Pre-render
• Display performance
• Async scroll
• HTTP Archive (HAR) format
• Resource Priorities
• Beacon
• Diagnostics: Error Logging

Resource Priorities

• hints on the download priority of resources
• new HTML attribute, e.g. "defer"?

Beacon

• Use case: Analytics will typically attempt to send data to a web server prior to the unloading of the document
• XHR doesn't work for this: user agents ignore async XHR made at unload
• asynchronously transfer data from the user agent to a web server
• user agent taking the responsibility to eventually send the data

Diagnostics: Error Logging

• Use Case: site may not know that end users are hitting a problem
• store and retrieve error data related to the previous and current navigations
• targeted for HTTP response code

Diagnostics: Other ideas

• Pre-flight JS injection
• JavaScript profiling
• Browser Activity Monitoring
• Detailed Networking Diagnostics
• Event Hooking API

Thank you

Performance standards:
http://www.w3.org/wiki/Web_Performance/Publications

These slides at:
http://www.w3.org/2013/Talks/0516-webperf/