mobile/performance.zh.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <title>性能和调优</title>
  </head>
  <body>
    <header>
      <h1>性能和调优</h1>
      <p>由于其有限的CPU和电池，移动设备在性能方面需要很多关注。</p>
    </header>
    <main>
      <section class="featureset well-deployed">
        <h2>广泛部署的技术</h2>

        <div data-feature="计时 API">
          <p><a href="https://www.w3.org/webperf/">Web 性能工作组</a>开发了一些规范，它们向 Web 应用提供计时 API，用于分析各任务耗费的时间。</p>

          <p><a data-featureid="hr-time">高解析度时间</a>将单调的亚毫秒级解析度时钟 API 提供给Web应用，以便 Web 应用可以精确地测量两个事件之间的时间间隔。<a data-featureid="performance-timeline">性能时间线</a>定义了一个统一的界面来存储和检索性能指标数据。单独的性能指标接口在不同的规范中定义：</p>

          <ul>
            <li><a data-featureid="navigation-timing">导航计时</a>提供导航和元素相关的计时信息；</li>
            <li><a data-featureid="resource-timing">资源计时</a>提供文档中资源的计时信息；</li>
            <li><a data-featureid="user-timing">用户计时</a>帮助应用程序使用高解析度时间戳测量性能。</li>
          </ul>
        </div>

        <div data-feature="页面可见性检测">
          <p>用于确定是否正在显示网页的<a data-featureid="page-visibility">页面可见性API</a>也可用于使资源的使用适应 Web 应用的需要，例如通过在页面最小化时减少网络活动。</p>
        </div>

        <div data-feature="本地优先级处理">
          <p><a data-featureid="requestidlecallback">后台任务协同调度</a>规范定义了 <code>requestIdleCallback</code> 方法，该方法允许在应用未处理其他操作的下一个机会中调度操作。</p>
        </div>

        <div data-feature="动画优化">
          <p><a data-featureid="animation-frames">基于脚本的动画时间控制 API</a> 可以帮助减少播放动画时的资源使用量。</p>
        </div>

        <div data-feature="滚动优化">
          <p>平滑的滚动性能对于 Web 上出色的用户体验至关重要，尤其是在触屏设备上。通过事件监听器的 <a data-featureid="dom-addeventlistener-passive"><code>passive</code></a> 选项，开发人员可以预先声明事件监听器不会在事件上调用<code>preventDefault()</code>，从而允许浏览器在执行与事件相关的默认操作之前不同步等待。在触摸和滚轮事件中，这能够保证滚动的平滑性。注意：默认情况下，某些浏览器会自动在 <code>touchstart</code> 和 <code>touchmove</code> 上设置 <code>passive</code> 标志。</p>
        </div>

        <div data-feature="线程">
          <p>除了优化资源之外，应用程序的感知反应性也是移动用户体验的一个关键方面。通过 <a data-featureid="webworkers">Web Workers</a> 实现的<strong>类似于线程的机制</strong>允许通过将最耗费资源的操作卸载到后台进程来保持用户界面的响应。</p>
        </div>

        <div data-feature="自动化">
          <p><a data-featureid="webdriver">WebDriver</a>规范定义了一个远程控制接口，可以实现外部对用户代理的控制，通常可用于跨多个浏览器（包括移动浏览器）的自动化测试。</p>
        </div>

        <div data-feature="优化最佳实践">
          <p><a data-featureid="mwabp">移动 Web 应用最佳实践</a>提供有关如何构建可在移动设备上良好运行的 Web 应用的通用建议，并特别考虑优化的需求。</p>
        </div>
      </section>

      <section class="featureset in-progress">
        <h2>开发中的技术</h2>
        <div data-feature="网络优先级">
          <p><a data-featureid="resource-hints">资源提示</a>和<a data-featureid="preload">预加载</a>规范使开发人员能够通过延迟下载或执行下载的资源来优化资源的下载。</p>
        </div>

        <div data-feature="缓存">
          <p><a data-featureid="serviceworkers">Service Workers</a> 规范定义了一种机制，允许应用拦截传出的网络请求并直接对其进行响应。应用可以利用这种机制直接实现灵活的缓存逻辑，从而避免了对服务器的冗长请求。</p>
        </div>

        <div data-feature="电池状态">
          <p><a data-featureid="battery">电池状态 API</a> 允许根据移动设备电池中当前可用的电力水平调整资源的使用。请注意，此规范的未来还不确定，因为它有<a href="https://github.com/w3c/battery/issues/5">潜在的隐私侵犯用途</a>。</p>
        </div>

        <div data-feature="计时 API">
          <p><a data-featureid="server-timing">服务器计时</a>使服务器能够将有关请求-响应周期的性能指标传达给用户代理，并允许应用根据这些指标来优化应用响应时间。
          </p>
          <p><a data-featureid="longtasks">长任务 API</a> 提供了一种对在长时间内垄断用户界面主线程的长任务的检测机制。</p>
          <p><a data-featureid="paint-timing">绘制计时</a>规范允许应用程序在页面加载过程中捕捉一系列关键时刻，例如第一次绘制和第一次内容丰富​​的绘制。</p>
        </div>

        <div data-feature="渲染性能">
            <p>为了应用的动画部分确保最佳的性能，Web 开发者可以使用 CSS 的 <a data-featureid="css-will-change"><code>will-change</code></a> 属性让浏览器在动画发生之前计算动画。</p>
            <p>CSS 的 <a data-featureid="css-contain">contain</a> 属性可以指示某个元素的子树独立于页面的其余部分。这让用户代理能够进行大量优化，尤其是跳过屏幕外已知不会影响屏幕上内容呈现的部分。</p>
        </div>

        <div data-feature="底层字节码格式">
            <p><a data-featureid="webassembly">Web 汇编</a>是一种低级别的字节码格式，它在网络浏览器中可以以接近本机的速度运行，并支持从C/C++和其他语言进行编译。它还定义了一个试图最大限度地提高性能的执行环境，并与 JavaScript 和 Web 进行良性合作，确保各种实现的安全性和行为一致性。</p>
        </div>

        <div data-feature="无限滚动">
          <p>在移动设备上使用<b>无限滚动</b>列表（在用户滚动时加载和呈现越来越多的内容）非常常见。这样的列表提供比触摸屏上的分页更好的用户体验。不幸的是，应用程序需要不断地<em>同步</em>轮询 DOM 元素的布局信息来实现这个模式，这是一个性能开销的重要来源。<a data-featureid="intersectionobserver">交叉观察器</a>规范定义了一个 API，用于<em>异步</em>观察目标元素与祖先元素或顶层文档视图的交集中的变化，从而提供一种有效的机制来检索实现无限滚动所需的信息。</p>
        </div>

        <div data-feature="实时通讯">
          <p><a data-featureid="webrtc-stats">WebRTC统计信息API标识</a>定义了一组 Web IDL 对象，允许访问有关 RTCPeerConnection 的统计信息，允许 Web 应用监视底层网络和媒体的性能。</p>
        </div>
      </section>

      <section class="featureset exploratory-work">
        <h2>探索性工作</h2>

        <div data-feature="计时 API">
          <p><a data-featureid="frame-timing">帧计时 API</a> 的工作旨在提供应用在用户设备上运行时获得的每秒帧数的详细信息。</p>

          <p><a data-featureid="event-timing">事件计时 API</a>上的工作使开发者能够衡量用户交互触发的某些事件的延迟。</p>
        </div>

        <div data-feature="网络优先级">
          <p><a data-featureid="priority-hints">优先级提示</a>规范允许开发人员通知用户代理需要下载的每个资源的优先级，与现有的浏览器加载机制（如preload）互补。</p>
        </div>

        <div data-feature="动画优化">
            <p><a data-featureid="animation-worklet">CSS Animation Worklet API</a>提供了一种使用 JavaScript 创建动画的方法。该API使用户代理可以在专用的线程中运行动画，降低主线程的压力。</p>
        </div>

        <div data-feature="滚动优化">
            <p>用户代理可以实现滚动的默认规则，例如滚动链和过度滚动，而 Web 应用可能希望禁用该规则以增强在移动设备上常见的<b>拉动刷新</b>和<b>无限滚动</b>等交互范例。这可以通过脚本来实现，但是由于应用需要监听触摸事件而不设置 <code>passive</code> 标志以在需要时覆盖默认行为，因此会对滚动性能产生负面影响。CSS 的 <a data-featureid="css-overscroll-behavior">overscroll-behavior</a> 属性在滚动到达边界时引入了对滚动容器行为的控制，允许 Web 应用禁用滚动的默认规则。</p>
        </div>

        <div data-feature="DOM更新">
          <p>Web 应用本质上是动态的，需要大量的 DOM 操作以呈现丰富的内容，而 DOM 的更新可能导致 jank（页面重绘时的明显延迟），因为渲染时用户交互和 <code>requestAnimationFrame</code> 造成的更新是同步。<a data-featureid="display-locking">显示锁</a>提议引入了一个新概念，使开发人员能锁定 DOM 元素及其子树，从而在 DOM 更新时阻止重绘。然后，开发者将能够以异步方式解锁元素，触发修改后子树的重绘，而不会导致页面的其余部分出现 jank。</p>
        </div>
      </section>
    </main>
    <script src="../js/generate.js"></script>
  </body>
</html>