적응 형 로딩을위한 H5 네트워크 정보 API

H5의 네트워크 정보 API는 네트워크 유형을 판단하여로드 전략을 최적화 할 수 있습니다. navigator.connection을 사용하여 네트워크 유형 및 온라인 상태를 얻습니다. exection EffectiveType 값 (예 : Slow-2G, 4G, 5G 등)을 기반으로 고화질 리소스 또는 경량 컨텐츠로드하기로 결정합니다. hange 변경 이벤트를 들음으로써 로딩 전략을 동적으로 조정합니다. prativeability, 제한된 iOS 지원 및 개인 정보 보호 모드 제한과 같은 문제에주의를 기울입니다.

때로는 웹 페이지의로드는 네트워크가 열악하거나 서버가 느리기 때문이 아니라 현재 네트워크 상황에 따라 최적화가 부족하기 때문입니다. H5의 네트워크 정보 API는이 문제를 해결하기 위해 작성되었습니다. 사용자가 현재 Wi-Fi, 4G 또는 5G를 사용하고 있는지 알 수 있으며 온라인 상태 여부를 결정하여 로딩 전략을 결정할 수 있습니다.

현재 네트워크 상태를 얻으십시오

navigator.connection 사용하여 현재 장치의 네트워크 정보를 얻으십시오. 예를 들어:

 if (navigator.connection) {
  console.log ( '네트워크 유형 :', navigator.connection.effectiveType);
  console.log ( '온라인 :', navigator.online? '예': '아니오');
}

이렇게하면 사용자가 Wi-Fi에 연결되어 있는지 또는 트래픽을 사용하는지 여부를 알 수 있으며 대략 네트워크 속도의 수준을 결정할 수도 있습니다. 예를 들어, EffectiveType이 4g 또는 slow-2g 반환하면 그에 따라 리소스로드 방법을 조정할 수 있습니다.

네트워크 유형에 따라 로딩 전략을 조정하십시오

다른 네트워크 조건은 다른 로딩 전략에 적합합니다. 예를 들어:

• Wi-Fi 또는 5G Environment : HD 사진, 비디오 미리보기 또는 JS/CSS의 정식 버전을 자신감있게로드 할 수 있습니다.
• 4G 또는 중간 속도 : 이미지 품질을 적절하게 압축, 비정규 함량의로드 지연.
• 저속 네트워크 (예 : Slow-2G와 같은) : 텍스트 내용의 우선 순위로드, 사진 및 스크립트로드 지연 및 자리 표시 자지도 사용.

예를 들어 다음을 작성할 수 있습니다.

 const preloadstrategy = () => {
  const type = navigator.connection.effectiveType;

  if (type === 'slow-2g') {
    // 경량 자원을로드로드로드 텔리 ();
  } else if (type === '4g'|| type === '5g') {
    // 고화질 사진 및 비디오로드로드 loadfullContent ();
  } 또 다른 {
    // 중간 품질의 리소스로드 DefaultContent ()는 기본적으로로드됩니다.
  }
};

이것은 모바일에서 특히 유용하여 사용자가 너무 느리게로드하여 떠나는 것을 방지합니다.

네트워크 변경 및 동적 조정을 모니터링합니다

네트워크 상태는 정적이 아닙니다. 예를 들어, 지하철에서 사무실로 들어가면 4G에서 Wi-Fi로 줄어들 수 있습니다. 현재 변경 사항을 모니터링하여 페이지 컨텐츠를 동적으로 조정할 수 있습니다.

 navigator.connection.addeventListener ( 'Change', () => {
  Console.log ( '순 상태 변경, 재평가 하중 정책');
  preloadstrategy ();
});

그러나이 리스너는 모든 브라우저에서 지원되지 않으며 현재 크롬 및 크롬 기반 브라우저에서 주로 사용할 수 있습니다. 따라서 호환성 판단을 추가하는 것이 좋습니다.

 if (navigator.connection의 'navigator &&'effectiveType '의'연결 ') {
  // 네트워크 정보 지원 API
  preloadstrategy ();
  navigator.connection.addeventListener ( 'Change', preloadstrategy);
} 또 다른 {
  // 지원되지 않으면 기본로드로드로드로드 드 폴트 CONTENT ();
}

자주 묻는 질문과 예방 조치

실제 사용에주의를 기울일 몇 가지 세부 사항이 있습니다.

• 모든 장치가 완전한 네트워크 정보를 제공 할 수있는 것은 아닙니다. 특히 iOS에 대한 지원이 제한되어 있습니다.
• effectiveType 는 추정치이며 반드시 완전히 정확한 것은 아니지만 의사 결정에 충분합니다.
• 개인 정보 보호 모드에서 일부 브라우저는 네트워크 정보에 대한 액세스를 제한 할 수 있습니다.
• 이 API에 의존하여 보안 관련 판단을 내리지 않으면 경험을 최적화하는 데만 사용됩니다.

전반적으로 H5의 네트워크 정보 API는 리소스로드를보다 지능적으로 처리하는 데 도움이되는 실용적인 도구를 제공합니다. 모든 시나리오를 다루지는 않지만 대부분의 최신 모바일 브라우저에서 이미 사용할 수 있습니다. 기본적으로 그게 다야.

위 내용은 적응 형 로딩을위한 H5 네트워크 정보 API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!