提高低端设备的网页性能

Adaptiveloading我们之前可能听说过“自适应加载”这个词，大多数人可能会停留在对屏幕大小的反应上。其实也可以参考响应实际的硬件设备。在设备千差万别的世界里，“一刀切”的体验可能并不总是奏效。在高端设备上取悦用户的网站可能无法在低端设备上运行，尤其是在适度的移动和桌面硬件以及新兴市场上。如果我们可以调整我们提供页面的方式以更好地满足用户不同设备的限制会怎么样？在上一届ChromeDevSummit演讲中，Google的AddyOsmani和Facebook的NateSchloss讨论了“自适应加载”模式。为所有用户提供快速良好的体验，包括低端设备。当用户的网络和硬件可以处理时，逐渐添加高端功能。这允许用户为他获得最好的体验。您可以使用“自适应加载”解锁以下功能：在慢速网络上提供低质量图像和视频仅在高速CPU上加载非关键JavaScript以进行交互在低端设备上限制动画帧速率在设备上进行大量计算操作Blockthird-较慢设备上的派对脚本我们可以使用以下信号实现自适应加载：网络：微调数据传输以使用更少的带宽（通过navigator.connection.effectiveType）。我们还可以利用用户的DataSaver选项（通过navigator.connection.saveData）内存：用于减少低端设备上的内存消耗（通过navigator.deviceMemory）CPU内核：用于限制昂贵的JavaScript执行并在设备上运行如果处理得当（通过navigator.hardwareConcurrency），它不能减少CPU密集型逻辑。这是因为JavaScript的执行受CPU限制。在演讲中，作者展示了这些想法在Facebook、eBay、Tinder等网站上使用的真实示例。详细视频可以去https://www.youtube.com/watch?v=puUPpVrIRkc&feature=youtu.be查看自适应加载ReactHooksGoogleChrome团队也发布了一套新的（实验性的）ReactHooks&Utilities用于程序中实现了React自适应加载技术。https://github.com/GoogleChromeLabs/react-adaptive-hooksuseNetworkStatusReactHook：用于根据网络状态适配应用程序（有效连接类型）：importReactfrom'react';import{useNetworkStatus}from'react-adaptive-hooks/network';constMyComponent=()=>{const{effectiveConnectionType}=useNetworkStatus();letmedia;switch(effectiveConnectionType){case'2g':media=;break;case'3g':media=;break;case'4g':media=...;break;default:media=。..;break;}return

;};useSaveData用于根据用户浏览器的数据保护选项调整程序：importReactfrom'react';import{useSaveData}来自'react-adaptive-hooks/save-data';constMyComponent=()=>{const{saveData}=useSaveData();return();};useHardwareConcurrency：根据用户设备上的逻辑CPU处理器核心数调整程序：importReactfrom'react';import{useHardwareConcurrency}from'react-adaptive-hooks/hardware-concurrency';constMyComponent=()=>{const{numberOfLogicalProcessors}=useHardwareConcurrency();return();};在未来，我们希望看到更多基于用户网络和设备限制自动调整和优化的基础设施的例子OptimalApp体验了解更多：https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69