FCon7折倒计时最后一周:日程已上线70%!查看详情>>> 了解详情
写点什么

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

  • 2019-12-03
  • 本文字数:1814 字

    阅读完需:约 6 分钟

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

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

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



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


  • 为所有用户(包括低端设备用户)提供快速的核心体验;

  • 如果用户的网络和硬件有足够的处理能力,则逐步添加仅限于高端硬件的功能。


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


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


  • 在慢速网络上提供低质量的图像和视频;

  • 仅在高速 CPU 上加载非关键的 JavaScript 交互功能;

  • 限制低端设备上动画的帧速率;

  • 避免在低端设备上进行繁重的运算;

  • 在速度较慢的设备上阻止第三方脚本。



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



在演讲中,我们介绍了在 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


2019-12-03 17:002364

评论

发布
暂无评论
发现更多内容

懒人神器——新手必备的图片后期处理软件

懒得勤快

图片后期 修图 滤镜 ps

如何透彻理解 Redis 核心原理?怎样才能形成 Redis 系统观?

Java架构师迁哥

03-week4-homework

J

极客大学架构师训练营

测开之数据类型· 第4篇《迭代器、生成器》

清菡软件测试

测试开发

光知道SpringBoot,不用thymeleaf就太不对了

小Q

Java 学习 编程 面试 Spring Boot

阿里大牛亲自总结整理的一线互联网公司面试真题及面经(阿里、网易、字节)

Java架构之路

Java 程序员 架构 面试 编程语言

Java渣渣外包开发3年,4面终揽下美团面试官,含泪拿到22koffer

比伯

Java 编程 程序员 架构 面试

字节首发Redis笔记,基础+原理+应用+源码+拓展五大核心模块

Java架构追梦

Java redis 编程 架构 面试

DeFi流动性挖矿系统APP软件开发

系统开发

第四周 系统架构 学习总结

胡云飞

极客大学架构师训练营

阿里P8传授给小老弟的Java面试宝典,竟让让小弟也拿到了P8的offer,傻眼了

Java架构之路

Java 程序员 架构 面试 编程语言

从月薪3K的Java菜鸟,到年薪80W的Java架构师,靠这份文档,让我学习像打怪升级一样简单!

Java架构之路

Java 程序员 架构 面试 编程语言

北纬37°的浪漫与理性,穿越千年的信息之变

脑极体

阿里9年老开发终于总结出微服务架构设计模式PDF了

小Q

Java 学习 编程 架构 面试

一个典型的大型互联网应用系统使用了哪些技术方案和手段,主要解决什么问题?

我们新四军不拿群众一针一线

海量小文件存储系统HOS探索与实践

Galaxy数据平台

大数据 OSS 对象存储 HBase GEEDGE NETWORKS

Swift函数调用逆向分析

ios swift

LeetCode题解:18. 四数之和,哈希表,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

架构师训练营第 13 周课后练习

薛凯

架构师训练营 -week13-总结

大刘

极客大学架构师训练营

区块链落地应用开发- 珠宝溯源,不当“冤大头”

13828808769

区块链技术 区块链落地开发 珠宝溯源

工厂模式学习

en

设计模式 工厂模式 Go 语言

架构训练营-week13-总结

于成龙

互联网架构总结

J

极客大学架构师训练营

智能合约Dapp系统开发,区块链智能合约技术

薇電13242772558

区块链 智能合约

第四周 系统架构 作业 「架构师训练营 3 期」

胡云飞

极客大学架构师训练营

面试必问系列,源码解析多线程绝对不容忽视得问题:线程活性故障

小Q

Java 学习 架构 面试 多线程

面试阿里被质问:ConcurrentHashMap线程安全吗

Java架构师迁哥

架构师训练营第 13 周作业

netspecial

极客大学架构师训练营

架构训练营-week13-作业1

于成龙

架构训练营

列举出常见的Java面试题100+,我靠这个在十月拿到了阿里的offer

Java架构之路

Java 程序员 架构 面试 编程语言

  • 扫码添加小助手
    领取最新资料包
如何提升低端设备的Web性能?试试自适应加载模式_大前端_Addy Osmani_InfoQ精选文章