Optimieren Sie die Bilder gemäß den Einschränkungen für Netzwerk- und Geräte in React

Die Netzwerkkonnektivitätstechnologie hat seit der Geburt des Internets Erdschütteln verändert. Wir haben uns lange Zeit von der Ära des Wähler-Internetzugangs verabschiedet und können jetzt hochauflösende Videos in Mobilfunknetzen mit Smartphones ansehen. Aber nicht alle Verbindungen des Mobilfunknetzes sind gleich - Netzwerke der älteren Generation (3G, 2G usw.) dominieren immer noch, und fast die Hälfte der weltweiten Verbindungen gehört 2020 zu dieser Art von Netzwerk.

Leider ist der Prozess der Beseitigung alter Netzwerke sehr langsam, und viele Menschen auf der ganzen Welt stehen immer noch vor dem Problem des langsamen Seitenladens, das an die frühen Tage der Popularität des häuslichen Internets erinnert.

Moderne Websites sind ressourcenintensiv geworden, mit vielen Bildern und Animationen. Für Besucher, die Geräte mit niedrigem Performance und instabile Netzwerkverbindungen verwenden, kann eine normale Webseite eine Minute dauern, bis sie voll geladen werden. Dies liegt hauptsächlich daran, dass Entwickler dazu neigen, im Umgang mit Benutzerhardware- und Netzwerkbedingungen binäre Entscheidungen zu treffen: Geräte gehören entweder zur Kategorie Desktop -Kategorie oder zur Kategorie von Smartphones. Der Verbindungsstatus ist entweder online oder offline. Tatsächlich ist die Umgebung des Benutzers oft detaillierter und komplexer.

Können wir es besser machen?

Wie schlägt ich die Lücke zwischen den Benutzern, die Low-End-Geräte und instabile Netzwerkverbindungen verwenden? Zunächst müssen wir ihre spezifische Situation schnell bewerten, indem wir uns die folgenden zwei Eigenschaften ansehen:

• navigator.deviceMemory
• navigator.connection

Basierend darauf können wir uns entscheiden, die für die Bereitstellung von Bildqualität anpassen. Für JamStack -Websites und -Anwendungen, die auf der Serverseite gerendert werden, gibt es jedoch ein Problem - navigator -Objekte und andere Browser -APIs sind während der Rendering -Phase nicht verfügbar. Eine häufige Möglichkeit, dieses Problem zu lösen, besteht darin, viele reaktionsschnelle Bildmarker hinzuzufügen, aber dies bringt einen signifikanten Schmerzpunkt - ineffiziente Skalierung. Bild -CDNs wie Imagegine können dazu beitragen, dieses Problem und andere Fallstricke zu vermeiden, die mit reaktionsschnellen Bildern verbunden sind, da es das gesamte schwere Heben abwickelt, indem sofort automatische intelligente Anpassungen an den angeforderten Ressourcen vorgenommen werden.

In Bezug auf die Anpassung an Benutzernetzwerkbeschränkungen kann der Verbindungstyp erkannt werden und das Bild -CDN wird angewiesen, die Komprimierungsrate entsprechend der Verbindungsqualität zu ändern. So implementieren Sie dies in React:

 reagieren, {usestate, useEffect} aus 'React' '

const useconnectionType = (defaultConnectionType) => {

  const isupported = navigator? .Connection? .effectivetype
    ? WAHR
    : FALSCH

  const [ConnectionType, setNetworkStatus] = Usestate (
    ermittelt
      ? navigator.connection.effectivetype
      : defaultConnectionType
  )

  useEffect (() => {
    if (emittiert) {
      const {Verbindung} = Navigator
      const UpdateConnectionType = () => {
        setNetworkStatus (Connection.effectivetype)
      }

      Connection.AdDeVentListener ('Change', UpdateConnectionType)

      return () => {
        Connection.RemoveEventListener ('Change', UpdateConnectionType)
      }
    }
  }, [])

  return [ConnectionType, setNetworkStatus]
}

const imagecdnhost = 'images.foo.com'

Funktion ConnectionAWareComponent () {

  const [ConnectionType] = useConnectionType ())

  Lassen Sie komprimierende = 0

  Switch (ConnectionType) {
    Fall 'Slow-2G':
      komprimierende = 65
      brechen
    Fall '2G':
      komprimierende = 50
      brechen
    Fall '3G':
      komprimierende = 30
      brechen
    Fall '4G':
      komprimierende = 0
      brechen
  }

  Zurückkehren (
    <div>
      {/* Verwenden Sie dedizierte Anweisungen, um eine variable Komprimierung anzuwenden*/}
      <img  src="%7B%60%24%7BimageCDNHost%7D/?imgeng?=cmpr_%24%7BcompressionLevel%7D%60%7D" alt="Optimieren Sie die Bilder gemäß den Einschränkungen für Netzwerk- und Geräte in React" >
    </div>
  )
}

Wir können noch einen Schritt weiter gehen, unscharfen Bildern für Benutzer mit sehr langsamen Netzwerken bereitstellen und die Möglichkeit bieten, Versionen bei Bedarf mit höherer Auflösung herunterzuladen. Oder entwerfen Sie ein Leistungsbewertungssystem und passen Sie den gesendeten Inhalt basierend auf dem System an.

Auf der anderen Seite bedeutet Benutzer, dass sie eine "Hochgeschwindigkeit" -D-Verbindung 4G verwenden, nicht unbedingt, dass sie sich nicht für das Speichern von Daten interessieren, da sie die Website in einem Roaming-Status besuchen können. Durch die Aktivierung von Client -Eingabeaufforderungen auf der Website können der Site -Eigentümer das Vorhandensein eines Datensparenflags erkennen und die erforderlichen Schritte ausführen, um sich an die Einstellungen des Benutzers anzupassen.

Gründe für schnellere Bilder

Medium CPU, die richtige Menge an Speicher und Verbindungen mit niedriger Ebene sind keine fiktiven Einschränkungen. Sie stellen eine echte Benutzererfahrungsherausforderung dar, die Hunderte Millionen von Nutzern auf der ganzen Welt beeinflussen könnte. Einige Unternehmen integrieren ihre Produkte in ein integratives Erlebnis: Streaming -Dienste wie Netflix und Spotify stellen die Streaming -Qualität anhand Ihrer Netzwerkbedingung an, während viele andere hinter den Kulissen stehen, um das Bild für Benutzer automatisch zu optimieren.

In unterentwickelten Bereichen, in denen das Internet noch nicht beliebt ist, ist es möglicherweise nicht der Zielmarkt. Wenn Benutzer aus ländlichen Gebieten der Industrieländer eine Vollversion der Website erhalten, können sie eine unangenehme Erfahrung erleben. Wir können den gesendeten/angezeigten Inhalt mit einigen kleinen Anpassungen an den Benutzer anpassen.

Durch die Verwendung eines Bild -CDN wie Imagegine können Sie den Bildoptimierungsprozess vereinfachen und automatisch auf Client -Eingabeaufforderungen für Netzwerkbeschränkungen reagieren. Das Ergebnis ist eine bessere Erfahrung für netzwerkbeschränkte Besucher und ein eleganter Workflow für Entwickler.

Das obige ist der detaillierte Inhalt vonOptimieren Sie die Bilder gemäß den Einschränkungen für Netzwerk- und Geräte in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!