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

文章来源：infoqAddy Osmani

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

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

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

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

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

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

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

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

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

我们还发布了一组新的（实验性）React Hooks和实用工具，可以在你的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>
  );
};

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

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

了解更多内容：

作者介绍： Addy Osmani是Chrome团队的工程主管，致力于创造更快的Web体验。

原文链接： https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69

发表于: 2019-12-032019-12-03 17:00:00
本文为 InfoQ 中文站特供稿件
首发地址：https://www.infoq.cn/article/cIQV4pJkHL3xsK0r7VtP
如有侵权，请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长进交流群

领取专属 10元无门槛券

私享最新 技术干货

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

相关快讯

扫码

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐