根據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中文網其他相關文章！