根据React中的网络和设备约束来优化图像-css教程-PHP中文网

首页

web前端

css教程

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

Jennifer Aniston

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连接并不一定意味着他们不关心节省数据，因为他们可能在漫游状态下访问网站。在网站上启用客户端提示将使网站所有者能够检测到数据节省标志的存在，并采取必要的步骤来适应用户的偏好。