任何用户都可能有过运行缓慢的体验。这个世界的设备千差万别,“一种规格”走天下的体验可能并不是哪里都行得通。一些网站满足了使用高端设备的用户,但在低端设备上却可能卡得没法用。特别是在普通的移动设备和桌面硬件,以及新兴市场的主流设备上尤为明显。那么我们能不能调整交付页面的方式,更好地适应用户的约束条件呢????? 自适应加载:不仅要根据屏幕大小做出响应,还要适应实际的设备硬件。
在Chrome开发者峰会的演讲中,我和Facebook的Nate Schloss讨论了自适应加载模式,即:
这使用户可以获得最适合他们自身约束条件的使用体验。
自适应加载解锁的用户场景包括:
针对自适应加载,我们有很多信号可用,具体包括:
在演讲中,我们介绍了在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
领取专属 10元无门槛券
私享最新 技术干货