如何提升低端设备的Web性能？试试自适应加载模式

vlambda
2021-04-03

如何提升低端设备的Web性能？试试自适应加载模式

作者｜Addy Osmani

译者｜王强

编辑｜王文婧

任何用户都可能有过运行缓慢的体验。这个世界的设备千差万别，“一种规格”走天下的体验可能并不是哪里都行得通。一些网站满足了使用高端设备的用户，但在低端设备上却可能卡得没法用 [1]。特别是在普通的移动设备和桌面硬件，以及新兴市场的主流设备上尤为明显。那么我们能不能调整交付页面的方式，更好地适应用户的约束条件呢？🤔 自适应加载不仅要根据屏幕大小做出响应，还要适应实际的设备硬件。

在 Chrome 开发者峰会的演讲中 [2]，我和 Facebook 的 Nate Schloss 讨论了自适应加载模式，即：

为所有用户（包括低端设备用户）提供快速的核心体验；
如果用户的网络和硬件有足够的处理能力，则逐步添加仅限于高端硬件的功能。

这使用户可以获得最适合他们自身约束条件的使用体验。

如何提升低端设备的Web性能？试试自适应加载模式

自适应加载解锁的用户场景包括：

在慢速网络上提供低质量的图像和视频；
仅在高速 CPU 上加载非关键的 JavaScript 交互功能；
限制低端设备上动画的帧速率；
避免在低端设备上进行繁重的运算；
在速度较慢的设备上阻止第三方脚本。

如何提升低端设备的Web性能？试试自适应加载模式

针对自适应加载，我们有很多信号可用，具体包括：

网络：用于微调数据传输以减少带宽占用（通过 navigator.connection.effectiveType[3]），还可以利用用户的“流量节省程序”首选项（通过 navigator.connection.saveData[4]）。
内存：用于减少低端设备上的内存消耗（通过 navigator.deviceMemory[5]）。
CPU 核心数：用于限制开销较大的 JavaScript 执行，并在设备处理能力不足时减少 CPU 密集型逻辑（通过 navigator.hardwareConcurrency[6]）。这是因为 JavaScript 的执行主要受 CPU 性能约束 [7]。

在演讲中，我们介绍了在 Facebook、eBay 和 Tinder 等网站上应用这些理念的真实案例。可以从演讲第 24 分钟开始看起，Nate 介绍了 Facebook 如何在生产环境中通过设备分组来实践这一理念：

如何提升低端设备的Web性能？试试自适应加载模式

我们还发布了一组新的（实验性）React Hooks 和实用工具 [8]，可以在你的 React 应用程序中添加自适应加载技术。

我们的 hooks/ 实用工具包括 useNetworkStatus React hook，用来根据网络状态（有效的连接类型）做出调整适应：

import React from 'react';

import { useNetworkStatus } from 'react-adaptive-hooks/network';

const MyComponent = () => {
  const { effectiveConnectionType } = useNetworkStatus();

  let media;
  switch(effectiveConnectionType) {
    case '2g':
      media = <img src='medium-res.jpg'/>;
      break;
    case '3g':
      media = <img src='high-res.jpg'/>;
      break;
    case '4g':
      media = <video muted controls>...</video>;
      break;
    default:
      media = <video muted controls>...</video>;
      break;
  }

  return <div>{media}</div>;
};

还有 useSaveData 实用工具，用来根据用户浏览器的流量节省程序首选项进行调整适应：

import React from 'react';

import { useSaveData } from 'react-adaptive-hooks/save-data';

const MyComponent = () => {
  const { saveData } = useSaveData();
  return (
    <div>
      { saveData ? <img src='...' /> : <video muted controls>...</video> }
    </div>
  );
};

……以及 useHardwareConcurrency 实用工具，用来根据用户设备上的 CPU 处理器逻辑内核数进行调整适应：

import React from 'react';

import { useHardwareConcurrency } from 'react-adaptive-hooks/hardware-concurrency';

const MyComponent = () => {
  const { numberOfLogicalProcessors } = useHardwareConcurrency();
  return (
    <div>
      { numberOfLogicalProcessors <= 4 ? <img src='...' /> : <video muted controls>...</video> }
    </div>
  );
};

未来，我们希望看到更多的基础架构示例，可以根据用户的网络和设备约束自动提供最优化的代码包。在上面提到的这些客户端提示 [9] 和客户端 API 中间，可能已经有一些构建块可用来在这个领域中构建出一些引人注目的成果了。

如何提升低端设备的Web性能？试试自适应加载模式

我们希望自适应加载能够成为渐进增强工具箱中一项有用的新工具。具体请查看演讲以了解更多信息。

了解更多内容：

React 自适应加载 hooks 和实用工具：https://github.com/GoogleChromeLabs/react-adaptive-hooks
Tinder Web 工程使用的复杂自适应加载策略：https://medium.com/@roderickhsiao/sophisticated-adaptive-loading-strategies-7118341fcf91
Angular 的连接感知组件：https://netbasal.com/connection-aware-components-in-angular-3a66bb0bab6f
在 Vue 和 Web 组件中，使用网络信息 API 为自适应组件提供服务：https://dev.to/vorillaz/serving-adaptive-components-using-the-network-information-api-lbo
基于网络质量的自适应服务：https://web.dev/adaptive-serving-based-on-network-quality/

vlambda博客
学习文章列表