mobile/performance.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Performance and Tuning</title>
  </head>
  <body>
    <header>
      <h1>Performance and Tuning</h1>
      <p>Due to their limited CPU, and more importantly to their limited battery, mobile devices require a lot of attention in terms of performance.</p>
    </header>
    <main>
      <section class="featureset well-deployed">
        <h2>Well-deployed technologies</h2>

        <div data-feature="Timing Hooks">
          <p>The <a href="https://www.w3.org/webperf/">Web Performance Working Group</a> developed a number of specifications that expose timing hooks to Web applications, to analyze time spent doing various tasks.</p>

          <p>The <a data-featureid="hr-time">High-Resolution Time</a> exposes a monotonic sub-millisecond resolution clock to Web applications so that they can precisely measure time elapsed between two events. The <a data-featureid="performance-timeline">Performance Timeline</a> defines a unified interface to store and retrieve performance metric data. Individual performance metric interfaces are defined in separate specifications:</p>

          <ul>
            <li><a data-featureid="navigation-timing">Navigation Timing</a> exposes timing information related to navigation and elements;</li>
            <li><a data-featureid="resource-timing">Resource Timing</a> exposes timing information for resources in a document;</li>
            <li><a data-featureid="user-timing">User Timing</a> help applications measure the performance of their applications using high precision timestamps.</li>
          </ul>
        </div>

        <div data-feature="Page Visibility Detection">
          <p>The <a data-featureid="page-visibility">API to determine whether a Web page is being displayed</a> (Page Visibility API) can also be used to adapt the usage of resources to the need of the Web application, for instance by reducing network activity when the page is minimized.</p>
        </div>

        <div data-feature="Priority Handling">
          <p>The <a data-featureid="requestidlecallback">Cooperative Scheduling of Background Tasks specification</a> defines the <code>requestIdleCallback</code> method that allows scheduling an operation at the next opportunity when the app is not processing another operation.</p>
        </div>

        <div data-feature="Animation Optimization">
          <p>The <a data-featureid="animation-frames">Timing control for script-based animations API</a> can help reduce the usage of resources needed for playing animations.</p>
        </div>

        <div data-feature="Scrolling Optimization">
          <p>Smooth scrolling performance is essential for a good user experience on the web, especially on touch-based devices. Through the <a data-featureid="dom-addeventlistener-passive"><code>passive</code> event listener option</a>, developers can declare up-front that an event listener will not call <code>preventDefault()</code> on the event, allowing the browser not to wait for the event listener to have run before it performs the default action associated with the event. This is particularly recommended on touch and wheel events to guarantee smooth scrolling. Note: some browsers automatically set the <code>passive</code> flag on <code>touchstart</code> and <code>touchmove</code> by default.</p>
        </div>

        <div data-feature="Threading">
          <p>Beyond optimization of resources, the perceived reactivity of an application is also a critical aspect of the mobile user experience. The <strong>thread-like mechanism</strong> made possible via <a data-featureid="webworkers">Web Workers</a> allows keeping the user interface responsive by offloading the most resource-intensive operations into a background process.</p>
        </div>

        <div data-feature="Automation">
          <p>
            The <a data-featureid="webdriver">WebDriver</a> specification defines a remote control interface that enables introspection and control of user agents, typically useful to automate testing across multiple browsers, including mobile browsers.
          </p>
        </div>

        <div data-feature="Optimization Best Practices">
          <p>The <a data-featureid="mwabp">Mobile Web Application Best Practices</a> provide general advice on how to build Web applications that work well on mobile devices, taking into account in particular the needs for optimization.</p>
        </div>
      </section>

      <section class="featureset in-progress">
        <h2>Technologies in progress</h2>
        <div data-feature="Network Prioritization">
          <p>The <a data-featureid="resource-hints">Resource Hints</a> and <a data-featureid="preload">Preload</a> specifications let developers optimize the download of resources by enabling to delay either the download or the execution of the downloaded resource.</p>
        </div>

        <div data-feature="Caching">
          <p>The <a data-featureid="serviceworkers">Service Workers</a> specification defines a mechanism that allows applications to intercept outgoing network requests and respond to them directly. Applications can take advantage of this mechanism to implement a flexible cache logic directly and thus avoid lengthy requests to the server.</p>
        </div>

        <div data-feature="Battery Status">
          <p>The <a data-featureid="battery">Battery status API</a> allows adjusting the use of resources to the current level of power available in the battery of a mobile device. However, note the future of this last specification is uncertain due to identified <a href="https://github.com/w3c/battery/issues/5">potential privacy-invasive usage</a> of the API.</p>
        </div>

        <div data-feature="Timing Hooks">
          <p><a data-featureid="server-timing">Server Timing</a> enables a server to communicate performance metrics about the request-response cycle to the user agent, and allows applications to act on these metrics to optimize application delivery.</p>
          <p>The <a data-featureid="longtasks">Long Tasks API</a> exposes a mechanism to detect long running tasks that monopolize the user interface's main thread for extended periods of time.</p>
          <p>The <a data-featureid="paint-timing">Paint Timing</a> specification allows the application to capture a series of key moments such as first paint and first contentful paint during page load.</p>
        </div>

        <div data-feature="Rendering performance">
          <p>To ensure optimal performance when animating parts of an app, developers can make use of the <a data-featureid="css-will-change">CSS <code>will-change</code></a> property to let browsers compute the animation ahead of its occurrence.</p>
          <p>The CSS <a data-featureid="css-contain">contain</a> property can indicate that the element’s subtree is independent of the rest of the page. This also enables heavy optimizations by user agents when used well, in particular to skip over content that is off-screen knowing that it won't affect the rendering of the content that is on-screen.</p>
        </div>

        <div data-feature="Low-level Bytecode Format">
            <p><a data-featureid="webassembly">WebAssembly</a> is a low-level bytecode format that runs with near-native speed in web browsers and supports compilation from C, C++, and other languages. It also defines an execution environment that attempts to maximize performance and interoperate gracefully with JavaScript and the Web, while ensuring security and consistent behavior across a variety of implementations.</p>
        </div>

        <div data-feature="Infinite scrolling">
          <p>The use of <b>infinite scrolling</b> lists, where more and more content is loaded and rendered as the user scrolls, is very common on mobile devices. Such lists provide a better user experience than pagination on touch screens. Applications unfortunately need to continuously poll layout information of DOM elements <em>synchronously</em> to implement this pattern, which is a source of significant performance overhead. The <a data-featureid="intersectionobserver">Intersection Observer</a> specification defines an API to <em>asynchronously</em> observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport, providing an efficient mechanism to retrieve the information needed to implement infinite scrolling.</p>
        </div>

        <div data-feature="Real-time Communication">
          <p>The <a data-featureid="webrtc-stats">Identifiers for WebRTC's Statistics API</a> defines a set of Web IDL objects that allow access to the statistical information about a RTCPeerConnection, allowing web apps to monitor the performance of the underlying network and media pipeline.</p>
        </div>
      </section>

      <section class="featureset exploratory-work">
        <h2>Exploratory work</h2>

        <div data-feature="Timing hooks">
          <p>The work on the <a data-featureid="frame-timing">Frame Timing API</a> aims at providing detailed information on the frame-per-second obtained when an application is running on the user device.</p>

          <p>The work on the <a data-featureid="event-timing">Event Timing API</a> exposes a mechanism to measure the latency of some events triggered by user interaction.</p>
        </div>

        <div data-feature="Network Prioritization">
          <p>The <a data-featureid="priority-hints">Priority Hints</a> specification lets developers signal the priority of each resource they need to download, complementing existing browser loading primitives such as preload.</p>
        </div>

        <div data-feature="Animation Optimization">
          <p>The <a data-featureid="animation-worklet">CSS Animation Worklet API</a> provides a method to create scripted animations that control a set of animation effects. The API is designed to make it possible for user agents to run such animations in their own dedicated thread to provide a degree of performance isolation from main thread.</p>
        </div>

        <div data-feature="Scrolling Optimization">
          <p>User agents may implement default rules for scrolling such as scroll chaining and overscroll affordances that web applications may wish to disable to enhance <b>pull-to-refresh</b> and <b>infinite scrolling</b> interaction paradigms, which are common on mobile devices. This can be achieved through scripting, but negatively affects scrolling performances as the application needs to listen to touch events without setting the <code>passive</code> flag to override the default behavior when needed. The <a data-featureid="css-overscroll-behavior">CSS <code>overscroll-behavior</code></a> property introduces control over the behavior of a scroll container when its scrollport reaches the boundary of its scroll box, allowing web applications to disable default rules for scrolling efficiently.</p>
        </div>

        <div data-feature="DOM Updates">
          <p>Web applications are dynamic in essence and need to manipulate the DOM significantly to present rich content. Problem is updates to the DOM can cause <em>jank</em> (noticeable delay in visual updates) because the rendering phase is updated synchronously with user interactions and <code>requestAnimationFrame</code> scripts. The <a data-featureid="display-locking">Display Locking</a> proposal introduces a new concept whereby developers can lock a DOM element and its subtree, preventing visual updates while the DOM gets updated. The developer will then be able to unlock the element, asynchronously, triggering the visual updates of the modified subtree without causing the rest of the page to jank.</p>
        </div>
      </section>
    </main>
    <script src="../js/generate.js"></script>
  </body>
</html>