1. 首页

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

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

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

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

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

  • 为所有用户(包括低端设备用户)提供快速的核心体验;
  • 如果用户的网络和硬件有足够的处理能力,则逐步添加仅限于高端硬件的功能。
  • Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档

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

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

  • 在慢速网络上提供低质量的图像和视频;
  • 仅在高速 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>//Js中文网 - 前端进阶资源教程 https://www.javascriptc.com
      { saveData ? <img src='...' /> : <video muted controls>...</video> }
    </div>
  );
};


……以及 useHardwareConcurrency 实用工具,用来根据用户设备上的 CPU 处理器逻辑内核数进行调整适应:

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区,你想要的,在这里都能找到

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

作者:Addy Osmani
链接:https://www.infoq.cn/article/cIQV4pJkHL3xsK0r7VtP

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

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

链接:https://www.javascriptc.com/3061.html

« 开发项目时,如何限制接口被多次点击调用
九个问题从入门到熟悉 HTTPS»
Flutter 中文教程资源

相关推荐

QR code