自适应加载——提升低端设备上的网页性能
React自适应加载钩子和实用工具 ·
自适应加载：不要仅仅根据屏幕尺寸做出响应，而要根据实际设备硬件进行调整。
任何用户都可能遇到体验缓慢的问题。在设备性能差异巨大的今天，“一刀切”的体验模式未必总能奏效。在高端设备上体验流畅的网站，在低端设备上可能根本无法使用，尤其是在中端移动和桌面硬件以及新兴市场。如果我们能够调整页面呈现方式，更好地满足用户的实际需求，那该多好？🤔
在我们的Chrome 开发者峰会演讲中，Facebook 的 Nate Schloss 和我讨论了自适应加载——这种模式……
- 为所有用户（包括低端设备）提供快速的核心体验
- 如果用户的网络和硬件能够支持，则逐步添加仅限高端用户使用的功能。
这样一来，用户就能获得最符合自身需求的体验。
自适应加载解锁的应用场景包括：
- 在慢速网络上提供低质量图像和视频
- 仅在高性能 CPU 上加载用于交互的非关键 JavaScript。
- 在低端设备上限制动画帧速率
- 避免在低端设备上进行计算密集型操作
- 在较慢的设备上阻止第三方脚本
我们可以使用多种信号进行自适应加载，包括：
在我们的演讲中，我们将介绍这些理念在 Facebook、eBay、Tinder 等网站的实际应用案例。请观看24 分钟处， Nate 将详细讲解 Facebook 如何通过设备分组在实际应用中运用这些理念：
我们还发布了一套新的（实验性的）React Hooks 和实用工具，用于向您的 React 应用程序添加自适应加载技术。
React自适应加载钩子和实用工具 ·
根据用户的设备和网络限制，提供最佳体验（实验性功能）
这是一套React Hooks和实用工具，用于根据用户的以下操作进行自适应加载：
它可用于添加自适应资源加载、数据获取、代码分割和功能切换的模式。
客观的
让面向低端设备的用户更容易获得体验，同时逐步添加仅限高端设备使用的功能。利用这些接口和工具，您可以为用户提供最适合其设备和网络限制的出色体验。
安装
npm i react-adaptive-hooks --save或者yarn add react-adaptive-hooks
用法
您可以按如下方式导入您想要使用的钩子：
import { useNetworkStatus } from 'react-adaptive-hooks/network' ;
import { useSaveData } from 'react-adaptive-hooks/save-data' ;
import { useHardwareConcurrency } from 'react-adaptive-hooks/hardware-concurrency' ;
import { useMemoryStatus } from…
我们的钩子/实用程序包括useNetworkStatus用于根据网络状态（有效连接类型）进行调整的 React 钩子：
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，构建这一领域引人注目的产品所需的基础模块或许已经存在 :)
我们希望您会发现自适应加载是您渐进增强工具箱中一个有趣的补充。欢迎观看我们的演讲了解更多信息 :)
阅读更多：
文章来源：https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69
