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

阅读数:1607 2019 年 12 月 3 日 17:00

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

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

自适应加载:不仅要根据屏幕大小做出响应,还要适应实际的设备硬件。

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

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

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

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

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

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

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

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

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

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

我们还发布了一组新的(实验性)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 中间,可能已经有一些构建块可用来在这个领域中构建出一些引人注目的成果了。

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

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

了解更多内容:

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

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

评论

发布
用户头像
not bad!
2019 年 12 月 09 日 22:25
回复
没有更多了