LittleC
技术学习记录
技术交流学习
【译】自适应加载,于在低端设备上提升网页性能

好像咕咕了挺久了,发一篇文章翻译吧
原文标题:Adaptive Loading – Improving web performance on low-end devices

原文地址
keyboard_arrow_down

https://addyosmani.com/blog/adaptive-loading/

自适应加载是一种网络性能模式, 让网站不仅仅根据屏幕大小做出响应,它们还根据实际的设备硬件进行调整。

任何用户都可能都有缓慢的浏览体验. 在设备功能千差万别的世界中,适合所有体验的“单一尺寸”可能并不总是有效。 在高端设备上使用户满意的网站可能在低端设备上不稳定,特别是在普通移动设备,台式机硬件和新兴市场上。 如果可以的话,我们可以调整页面返回的结果以更好地迎合用户的设备情况。

在我们的Chrome开发者峰会演讲上, Facebook的Nate Schloss和我交流了自适应加载,这种模式可以

  • 为所有用户(包括低端设备)提供快速的核心体验
  • 如果用户的网络和硬件可以正常处理,则逐步添加效果高端功能。

这使用户可以获得最佳的体验。

使用案例

自适应加载解锁的用例包含:

  • 在慢速网络上提供低质量的图像和视频
  • 优先实现交互性,再在快速CPU上加载非关键JavaScript
  • 限制低端设备上动画的帧速率
  • 避免在低端设备上进行繁重的运算
  • 在速度较慢的设备上禁用第三方脚本

以其中一点来说

自适应媒体加载

自适应媒体加载旨在提供低质量的图像和视频,以减少带宽和内存消耗。

对于大量使用媒体的网站,这可能意味着:

  • 相册应用程序可以提供较低分辨率的预览,或使用较少代码量的轮播机制。
  • 搜索应用程序可以一次返回较少的结果,限制包含大量媒体的结果,或者减少渲染页面所需的依赖项。
  • 新闻站点可以显示更少的新闻报道,忽略不流行类别或提供较小的媒体预览。

尽管基于设备功能提供不同的内容是一个不错的选择,但有时甚至不提供资源可能会更好,而自适应加载则可以避免这种麻烦。

自适应代码拆分和代码加载

自适应代码加载能向所有用户提供轻便的,核心的交互体验, 如果用户的硬件可以处理的话,则可以逐步添加其他功能…

这种设备感知能力使渐进式更进一步。

在高端设备上,我们可以选择加载更多交互性的组件或运行更多计算量大的操作,而如果您使用的设备速度较慢,则可以不使用这些功能。

数据加载和预加载

无论是在服务器还是客户端上,减少请求的数据量都可以减少延迟。 自适应型数据获取可以在使用速度较慢的网络时,将较少的结果发送给用户。 您可以根据这些网络情况来限制预加载。

适合自适应加载的方面

以下几种类型是适合使用自适应加载的方面:

在我们的演讲中,我们介绍了在Facebook,eBay,Tinder等网站上使用的这些想法的真实示例。 在演讲的 24分钟时,Nate通过区分设备介绍了Facebook如何在实际中使用其中一些想法

使用React Hooks进行自适应加载

我们还发布了一组新的(实验性) React Hooks & Utilities 来向您的React页面中添加自适应加载。

我们的工具包添加了 useNetworkStatus React hook 用来在不同的网络环境中提供不同的内容 (文本代码见末尾)

UseSaveData 能根据浏览器的“节省流量”选项进行调整

useHardwareConcurrency 能根据处理器核心的数量对内容进行调整

再进一步

将来,我们希望看到更多的架构,这些架构可以根据用户的网络和设备的限制自动提供最优化的代码。 在上面的浏览器设置和客户端API之间,可能已经存在一些引人注目的内容(翻译可能不正确,请参考原文阅读)

Between Client Hints and the client-side APIs used above, the building blocks to build something compelling in this space may already exist 🙂

推荐阅读

注:文中代码

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>;
};
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>
  );
};
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>
  );
};
没有标签
首页      编程      【译】自适应加载,于在低端设备上提升网页性能

发表评论

textsms
account_circle
email

技术交流学习

【译】自适应加载,于在低端设备上提升网页性能
自适应加载是一种网络性能模式, 让网站不仅仅根据屏幕大小做出响应,它们还根据实际的设备硬件进行调整。
扫描二维码继续阅读
2020-01-04