根據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連接並不一定意味著他們不關心節省數據，因為他們可能在漫遊狀態下訪問網站。在網站上啟用客戶端提示將使網站所有者能夠檢測到數據節省標誌的存在，並採取必要的步驟來適應用戶的偏好。