目录
我们可以做得更好吗?
更快图像的原因
首页 web前端 css教程 根据React中的网络和设备约束来优化图像

根据React中的网络和设备约束来优化图像

Apr 01, 2025 am 04:56 AM

Optimize Images According to Network and Device Constraints in React

网络连接技术自互联网诞生以来发生了翻天覆地的变化。我们早已告别了拨号上网的时代,如今可以在移动网络上用智能手机观看高清视频。但并非所有移动网络连接都一样——老一代网络(3G、2G等)仍然占据主导地位,2020年全球近一半的连接都属于此类网络。

不幸的是,淘汰旧网络的过程非常缓慢,全球许多人仍然面临着页面加载缓慢的问题,这让人联想起家用互联网普及初期的情况。

现代网站变得资源密集型,包含大量图片和动画。对于使用低性能设备和不稳定网络连接的访问者来说,一个普通的网页可能需要一分钟才能完全加载。这主要是因为开发人员在处理用户硬件和网络状况时,往往会做出二元决策:设备要么属于台式机类别,要么属于智能手机类别;连接状态要么在线,要么离线。实际上,用户的环境往往更加细致复杂。

我们可以做得更好吗?

如何弥合那些使用低端设备和不稳定网络连接的用户之间的差距?首先,我们需要通过查看以下两个属性来快速评估他们的具体情况:

  • navigator.deviceMemory
  • navigator.connection

基于此,我们可以决定调整要提供的图像质量。然而,对于在服务器端渲染的Jamstack网站和应用程序来说,有一个问题——navigator对象以及任何其他浏览器API在渲染阶段都不可用。解决此问题的常用方法是添加大量响应式图像标记,但这带来了一个显著的痛点——低效的缩放。像ImageEngine这样的图像CDN可以帮助避免这个问题以及与响应式图像相关的其他陷阱,因为它通过对请求的资源进行即时自动智能调整来处理所有繁重的工作。

在适应用户网络限制方面,可以检测连接类型并指示图像CDN根据连接质量改变压缩率。以下是如何在React中实现这一点:

import React, { useState, useEffect } from 'react'

const useConnectionType = (defaultConnectionType) => {

  const isSupported = navigator?.connection?.effectiveType
    ? true
    : false

  const [connectionType, setNetworkStatus] = useState(
    isSupported
      ? navigator.connection.effectiveType
      : defaultConnectionType
  )

  useEffect(() => {
    if (isSupported) {
      const { connection } = navigator
      const updateConnectionType = () => {
        setNetworkStatus(connection.effectiveType)
      }

      connection.addEventListener('change', updateConnectionType)

      return () => {
        connection.removeEventListener('change', updateConnectionType)
      }
    }
  }, [])

  return [ connectionType, setNetworkStatus ]
}

const imageCDNHost = 'images.foo.com'

function ConnectionAwareComponent () {

  const [ connectionType ] = useConnectionType()

  let compressionLevel = 0

  switch (connectionType) {
    case 'slow-2g':
      compressionLevel = 65
      break
    case '2g':
      compressionLevel = 50
      break
    case '3g':
      compressionLevel = 30
      break
    case '4g':
      compressionLevel = 0
      break
  }

  return (
    <div>
      {/* 使用专用指令应用可变压缩 */}
      <img  src="%7B%60%24%7BimageCDNHost%7D/?imgeng?=cmpr_%24%7BcompressionLevel%7D%60%7D" alt="根据React中的网络和设备约束来优化图像" >
    </div>
  )
}
登录后复制

我们可以更进一步,为那些网络非常缓慢的用户提供模糊图像,并提供按需下载更高分辨率版本的选择。或者设计一个性能评分系统,并根据该系统调整发送的内容。

另一方面,用户使用“高速”4G连接并不一定意味着他们不关心节省数据,因为他们可能在漫游状态下访问网站。在网站上启用客户端提示将使网站所有者能够检测到数据节省标志的存在,并采取必要的步骤来适应用户的偏好。

更快图像的原因

中等CPU、适量的内存和低等级的连接并非虚构的限制。它们构成了真正的用户体验挑战,可能会影响全球数亿用户。一些公司开始将其产品融入包容性体验:像Netflix和Spotify这样的流媒体服务会根据您的网络状况调整流媒体质量,而许多其他公司则在幕后为用户进行自动图像优化。

在网络尚未普及的欠发达地区,可能并非目标市场。与此同时,如果为来自发达国家农村地区的用户提供网站的完整版本,他们可能会遇到令人不快的体验。我们可以通过一些小的调整来更体贴地调整发送/显示给用户的内容。

使用像ImageEngine这样的图像CDN可以简化图像优化过程,并自动响应网络限制的客户端提示。其结果是为网络受限的访问者提供更好的体验,并为开发人员提供优雅的工作流程。

以上是根据React中的网络和设备约束来优化图像的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1667
14
CakePHP 教程
1426
52
Laravel 教程
1328
25
PHP教程
1273
29
C# 教程
1255
24
静态表单提供商的比较 静态表单提供商的比较 Apr 16, 2025 am 11:20 AM

让我们尝试在这里造成一个术语:“静态表单提供商”。你带上html

使Sass更快的概念证明 使Sass更快的概念证明 Apr 16, 2025 am 10:38 AM

在一个新项目开始时,Sass汇编发生在眼睛的眨眼中。感觉很棒,尤其是当它与browsersync配对时,它重新加载

每周平台新闻:HTML加载属性,主要的ARIA规格以及从iframe转移到Shadow dom 每周平台新闻:HTML加载属性,主要的ARIA规格以及从iframe转移到Shadow dom Apr 17, 2025 am 10:55 AM

在本周的平台新闻综述中,Chrome引入了一个用于加载的新属性,Web开发人员的可访问性规范以及BBC Move

带有HTML对话框元素的一些动手 带有HTML对话框元素的一些动手 Apr 16, 2025 am 11:33 AM

这是我第一次查看HTML元素。我已经意识到了一段时间,但是尚未将其旋转。它很酷,

纸张形式 纸张形式 Apr 16, 2025 am 11:24 AM

购买或建造是技术的经典辩论。自己构建东西可能会感觉更便宜,因为您的信用卡账单上没有订单项,但是

'订阅播客”链接应在哪里? '订阅播客”链接应在哪里? Apr 16, 2025 pm 12:04 PM

有一段时间,iTunes是播客中的大狗,因此,如果您将“订阅播客”链接到喜欢:

它全部都在头上:管理带有React头盔的React Power Site的文档头 它全部都在头上:管理带有React头盔的React Power Site的文档头 Apr 15, 2025 am 11:01 AM

文档负责人可能不是网站上最迷人的部分,但是其中所处的内容对于您的网站的成功也一样重要

托管您自己的非JavaScript分析的选项 托管您自己的非JavaScript分析的选项 Apr 15, 2025 am 11:09 AM

有很多分析平台可帮助您跟踪网站上的访问者和使用数据。也许最著名的是Google Analytics(广泛使用)

See all articles