vlambda博客
学习文章列表

在 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