적응형 로딩 - 저가형 장치에서 웹 성능 향상

14422 단어 reactwebperfwebdevnetwork
: 화면 크기로만 반응하지 말고 실제 기기 하드웨어에 따라 적응하세요.

모든 사용자는 느린 경험을 할 수 있습니다. 다양한 장치 기능이 있는 세상에서 모든 경험에 "하나의 크기"가 적합하지 않을 수도 있습니다. 고급 장치에서 사용자를 즐겁게 하는 사이트는 특히 중간 수준의 모바일 및 데스크톱 하드웨어와 신흥 시장에서 저가형 장치에 있을 수 있습니다unusable. 사용자의 제약을 더 잘 충족시키기 위해 페이지를 제공하는 방법을 조정할 수 있다면 어떨까요? 🤔

Facebook의 Nate Schloss와 저는 Adaptive Loading에 대해 이야기합니다. 이 패턴은 ...
  • 모든 사용자에게 빠른 핵심 경험 제공(저사양 기기 포함)

  • 사용자의 네트워크와 하드웨어가 처리할 수 있는 경우 고급 전용 기능을 점진적으로 추가합니다.

    • 이를 통해 사용자는 자신의 제약 조건에 가장 적합한 경험을 얻을 수 있습니다.



    사용 사례 적응형 로딩 잠금 해제에는 다음이 포함됩니다.
  • 느린 네트워크에서 저품질 ​​이미지 및 비디오 제공
  • 빠른 CPU에서만 상호 작용을 위해 중요하지 않은 JavaScript 로드
  • 저사양 장치에서 애니메이션의 프레임 속도 조절
  • 로우엔드 장치에서 계산량이 많은 작업을 피함
  • 느린 장치에서 타사 스크립트 차단



    • 다음을 포함하여 적응 로딩에 사용할 수 있는 여러 신호가 있습니다.

  • 네트워크 - 데이터 전송을 미세 조정하여 더 적은 대역폭을 사용합니다( navigator.connection.effectiveType 을 통해). 사용자의 데이터 세이버 기본 설정을 활용할 수도 있습니다( navigator.connection.saveData )

  • 메모리 - 저가형 장치의 메모리 소비 감소용( navigator.deviceMemory 을 통해)

  • CPU 코어 수 - 비용이 많이 드는 JavaScript 실행을 제한하고 장치가 제대로 처리할 수 없을 때 CPU 집약적인 논리를 줄이기 위해( navigator.hardwareConcurrency 를 통해). 자바스크립트 실행이 .

    • 이 강연에서 우리는 Facebook, eBay, Tinder 등과 같은 사이트에서 사용되는 이러한 아이디어의 실제 사례를 다룹니다. Nate가 장치 그룹화를 통해 Facebook이 이러한 아이디어 중 일부를 프로덕션에서 사용하는 방법을 안내하는 곳을 확인하십시오24mins in.



    또한 React 앱에 적응 로딩 기술을 추가하기 위한 새로운(실험적) 세트React Hooks & Utilities를 출시했습니다.


    Google 크롬 연구소 / 반응 적응 후크


    사용자의 장치 및 네트워크 제약에 가장 적합한 경험 제공





    React 적응형 로딩 후크 및 유틸리티 ·


    Deliver experiences best suited to a user's device and network constraints (experimental)


    이것은 React Hooks 및 사용자를 기반으로 한 적응형 로딩을 위한 유틸리티 모음입니다.
  • Network via effective connection type
  • Data Saver preferences
  • Device memory
  • Logical CPU cores
  • Media Capabilities API

    • 적응형 리소스 로드, 데이터 가져오기, 코드 분할 및 기능 토글을 위한 패턴을 추가하는 데 사용할 수 있습니다.

    목적


    고급 전용 기능을 상단에 점진적으로 추가하면서 저가형 장치를 더 쉽게 타겟팅할 수 있습니다. 이러한 후크와 유틸리티를 사용하면 사용자에게 장치 및 네트워크 제약 조건에 가장 적합한 훌륭한 경험을 제공하는 데 도움이 될 수 있습니다.

    설치

    npm i react-adaptive-hooks --save 또는 yarn add react-adaptive-hooks

    용법


    다음과 같이 사용하려는 후크를 가져올 수 있습니다.
    import { useNetworkStatus } from 'react-adaptive-hooks/network';
import { useSaveData } from 'react-adaptive-hooks/save-data';
import { useHardwareConcurrency } from 'react-adaptive-hooks/hardware-concurrency';
import { useMemoryStatus } from
    …
    View on GitHub

    Our hooks/utilities include the useNetworkStatus React hook for adapting based on network status (effective connection type):

    import React from 'react';

import { useNetworkStatus } from 'react-adaptive-hooks/network';

const MyComponent = () => {
  const { effectiveConnectionType } = useNetworkStatus();

  let media;
  switch(effectiveConnectionType) {
    case '2g':
      media = <img src='medium-res.jpg'/>;
      break;
    case '3g':
      media = <img src='high-res.jpg'/>;
      break;
    case '4g':
      media = <video muted controls>...</video>;
      break;
    default:
      media = <video muted controls>...</video>;
      break;
  }

  return <div>{media}</div>;
};

    사용자의 브라우저 데이터 보호기 기본 설정에 따라 조정하기 위한 useSaveData 유틸리티:

    import React from 'react';

import { useSaveData } from 'react-adaptive-hooks/save-data';

const MyComponent = () => {
  const { saveData } = useSaveData();
  return (
    <div>
      { saveData ? <img src='...' /> : <video muted controls>...</video> }
    </div>
  );
};

    ...및 사용자 장치의 논리적 CPU 프로세서 코어 수에 따라 조정하기 위한 useHardwareConcurrency 유틸리티:

    import React from 'react';

import { useHardwareConcurrency } from 'react-adaptive-hooks/hardware-concurrency';

const MyComponent = () => {
  const { numberOfLogicalProcessors } = useHardwareConcurrency();
  return (
    <div>
      { numberOfLogicalProcessors <= 4 ? <img src='...' /> : <video muted controls>...</video> }
    </div>
  );
};

    앞으로 사용자의 네트워크 및 장치 제약 조건에 따라 가장 최적의 코드 번들을 자동으로 전달할 수 있는 인프라의 더 많은 예를 볼 수 있기를 바랍니다. Client Hints과 위에서 사용된 클라이언트 측 API 사이에 이 공간에서 매력적인 것을 구축하기 위한 빌딩 블록이 이미 존재할 수 있습니다. :)



    점진적 향상 도구 상자에 적응형 로딩이 흥미롭게 추가되기를 바랍니다. 자세히 알아보려면 저희를 확인하세요 :)

    더 읽어보기:
  • React Adaptive Loading hooks and utilities

  • Tinder 웹 엔지니어링
    • 의 Sophisticated Adaptive Loading Strategies
  • Connection-Aware Components in Angular

  • Vue 및 웹 구성 요소 사용
  • Adaptive serving based on network quality
    • nginx load balancer
    자주 입력할 단어를 한 키로 입력하다

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage