了解如何针对特定硬件和网络限制优化您的网站，确保每位用户获得最佳体验。
设备功能和网络连接有很大差异。取悦高端设备用户的网站在低端设备上可能无法使用。在速度较快的网络上，网站如果能够顺畅加载，那么在网速较慢时可能会停止运行。任何用户都可能会遇到网站运行缓慢的问题，因此开发“通用型”解决方案可能无法始终发挥作用。
在 Chrome 开发者峰会演讲中，Google 的 Addy Osmani 和 Facebook 的 Nate Schloss 探索了解决此问题的方法，即通过这种模式来提供更符合各种用户限制的页面。他们称之为自适应加载。
什么是自适应加载？
自适应加载涉及根据不同用户的网络和硬件限制为其提供不同的体验，具体来说：
为所有用户（包括低端设备）提供快速的核心体验。
在用户的网络和硬件可以处理的情况下，逐步添加仅限高端设备的功能。
通过针对特定硬件和网络限制进行优化，您可以让每位用户在其设备上获得最佳体验。为用户量身打造的体验可以包括：
在速度较慢的网络上提供低画质的图片和视频。
限制低端设备上的动画帧速率。
避免在低端设备上执行计算开销很大的操作。
在速度较慢的设备上屏蔽第三方脚本。
仅在快速 CPU 上加载非关键 JavaScript 以用于互动。
浏览器支持以及如何实现自适应加载
下面列出了可用于自适应加载的信号。此外，每个信号还包含浏览器支持：
Navigator.deviceMemory
navigator.deviceMemory 属性用于减少低端设备上的内存消耗。
Navigator.hardwareConcurrency
navigator.hardwareConcurrency 属性是 CPU 核心数。它用于限制开销高昂的 JavaScript 执行，并在设备处理不畅时减少 CPU 密集型逻辑。
NetworkInformation.effectiveType
navigator.connection.effectiveType 属性用于微调数据传输，以减少使用的带宽。
NetworkInformation.saveData
navigator.connection.saveData 属性用于利用用户的流量节省程序偏好设置。
您可以在以下两个位置决定要向用户提供的内容：客户端和服务器。在客户端上，您拥有上述 JavaScript API。在服务器上，您可以使用客户端提示深入了解用户的设备功能和他们连接到的网络。
React 中的自适应加载
React Adaptive Loading Hooks & Utilities 是 React 生态系统的一个套件，可让您更轻松地使您的网站适应低端设备。包括：
用于根据网络状态（
slow-2g、2g、3g或4g）进行调整的useNetworkStatus()钩子。useSaveData()钩子，用于根据用户的流量节省程序偏好设置进行调整。useHardwareConcurrency()钩子，用于根据用户设备上的逻辑 CPU 处理器核心数量进行调整。useMemoryStatus()钩子，用于根据用户的设备内存 (RAM) 来进行调整。
每个钩子都接受用于设置初始值的可选参数。此选项在以下两种情况下很有用：用户的浏览器不支持相关 API；以及用于服务器端渲染（您可以使用客户端提示数据在服务器上设置初始值）。例如，useNetworkStatus() 钩子可以使用从客户端提示传递的初始值进行服务器端渲染，并且在客户端上执行时，如果网络有效类型发生变化，该钩子会自行更新。
React 自适应加载钩子和实用程序是使用 Web 平台 API（网络信息、设备内存和硬件并发）实现的。您可以使用相同的 API 将自适应加载概念应用于其他框架和库，如 Angular、Vue 等。
自适应加载的实际运用
本部分探讨了如何使用自适应加载以及来自 Facebook、eBay、Tinder 等网站的真实示例的演示。
React Movie 演示版展示了如何根据网络状态调整媒体传送。它是一款用于浏览电影的应用，其中会显示海报、摘要和演员表。根据用户的有效连接类型，它在快速连接上传送高质量海报，在慢速连接上传送低质量海报。
Twitter 提供流量节省程序模式，旨在减少流量消耗。在此模式下，只有在您点按预览时，系统才会加载低分辨率和大图片的预览图片。启用此选项后，iOS 和 Android 用户通过图片节省了 50% 的流量消耗，而通过网页用户节省了 80% 的流量。这是一个使用“保存数据”钩子复制 Twitter 时间轴的 React 演示。尝试打开开发者工具的 Network 面板，看看停用“保存数据”与启用“保存数据”后滚动时传输的数据量差异。
当用户的硬件或网络条件不能很好地支持缩放等功能时，eBay 有条件地启用和关闭缩放等功能。您可以通过自适应代码拆分和代码加载来实现此目的，这种方法有条件地加载互动性更高的组件，或在高端设备上运行计算繁重的操作，同时不会将这些脚本发送给所用设备速度较慢的用户。请观看 16 分钟的视频，其中 Addy 在 eBay 产品页面上展示了使用 React.lazy() 和 Suspense 实现的模式。
Tinder 在其Web 和精简版应用中使用了多种自适应加载模式，以确保所有人都能快速获得体验。如果用户的网络速度较慢或启用了流量节省程序，他们会停用视频自动播放功能，限制路由预提取，并限制在用户滑动时加载轮播界面中的下一张图片，一次加载一张图片。实现这些优化后，他们发现印度尼西亚等国家/地区的平均滑动次数显著提高。
Facebook 的自适应加载
自适应加载出现的一个问题是，根据可用信号将设备分为高端和低端类别。在移动设备上，用户代理 (UA) 字符串会提供设备名称，这样 Facebook 就能使用关于设备特征的公开数据，将移动设备分组为类。不过，在桌面设备上，UA 仅提供与设备的操作系统相关的信息。
为了对桌面设备进行分组，Facebook 会在其性能监控中记录有关操作系统、CPU 核心（来自 navigator.hardwareConcurrency）和 RAM 内存 (navigator.deviceMemory) 的数据。研究了不同类型硬件与性能之间的关系，他们将设备分为五个类别。通过将硬件类别集成到性能监控中，他们可以更全面地了解用户如何根据设备使用 Facebook 产品，并更轻松地发现回归问题。
请观看 24 分钟的视频，Nate 详细介绍了 Facebook 如何处理设备分组，以及如何使用自适应加载机制加载动画和加载 JavaScript。
详细了解自适应加载
自适应加载就是在设计网站时充分考虑包容性。打造人人皆宜的核心体验，然后切换或叠加功能，如果用户拥有足够的内存、CPU 或速度较快的网络，则可以使体验更加出色。如需详细了解自适应加载，请查看适用的演示并观看 Chrome 开发者峰会演讲：