네트워크 정보 API를 사용하여 반응 형 웹 사이트를 개선하는 방법

키 테이크 아웃

네트워크 정보 API는 사용자의 네트워크 연결에 대한 정보를 미터 및 대역폭 추정치를 포함하여 사용자의 네트워크 연결에 대한 정보를 제공하여 응답 웹 사이트에서 사용자 경험을 크게 향상시킬 수 있습니다. 이 정보는 이미지, 비디오, 글꼴 등과 같은 자원을 조건부로드하는 데 사용될 수 있으며, 느리거나 미터 연결에서도 최적의 성능을 보장합니다. 네트워크 정보 구현 API는 JavaScript를 사용하여 API의 속성 및 방법에 액세스하는 것이 포함됩니다. API 객체는 Navigator.connection에 의해 반환되며 대역폭 및 계량의 두 가지 읽기 전용 속성을 제공합니다. 이러한 속성은 사용자의 연결 상태에 따라 고해상도 이미지 또는 기타 대형 자산을 조건부로드하는 데 사용될 수 있습니다. 잠재적 이점에도 불구하고 네트워크 정보 API는 현재 브라우저 지원이 제한되어 있으며 변경 될 수 있습니다. 그러나 모바일 친화적 인 웹 사이트 나 애플리케이션을 고려할 가치가 있습니다. 페이지가 너무 커지고 모바일 네트워크에서로드하기가 느리지 않도록하는 데 도움이 될 수 있습니다. API가 변경되면 사이트가 계속 적절하게 반응하도록하기 위해 관련 기능을 업데이트 할 수 있습니다.

반응 형 웹 디자인은 웹에 혁명을 일으켰습니다. 단일 사이트는 다양한 장치와 화면에서 볼 때 레이아웃을 조정할 수 있습니다. 스크린 크기를 감지하고 대체 스타일 또는 스타일 시트를로드하는 데 필요한 몇 가지 미디어 쿼리 만 있으면됩니다. 그러나 화면 크기를 사용하여 브라우저 기능을 감지하는 것은 라디오를 보면 자동차 속도를 판단하는 것과 유사합니다. 최신 스마트 폰과 태블릿은 점점 더 큰 해상도를 가지고 있으며 전형적인 데스크탑보기를 행복하게 보여줄 것입니다. 이보기가 수많은 글꼴, 이미지 또는 기타 자산을 추가하면 모바일 사용자는 느리거나 미터 연결에 있기 때문에 저하 된 -

및 비싸고
• - 경험을받을 수 있습니다. 네트워크 정보 api
네트워크 정보 API가 도움이 될 수 있습니다. 사용자가 Pay-as-you-go와 같이 계량 된 연결에 있는지 여부를 나타내며 대역폭의 추정치를 제공합니다. 이 정보를 사용하면 이미지, 비디오, 글꼴 및 기타 리소스를 조건부로드 할 수 있습니다. 기본 수준에서 미디어 쿼리를 무시하여 모바일 레이아웃이 제한된 네트워크에서 유지되도록 할 수 있습니다. 브라우저 지원 네트워크 정보 API 초안 사양에도 불구하고 2011 년에 출시되었지만 Firefox와 Chrome만이 실험적 지원을 제공합니다. 공급 업체 합의가있을 때까지 API는 변경 될 수 있습니다.
• 대역폭 평가는 어렵습니다. 모바일 및 Wi-Fi 네트워크를 돌아 다니거나 전환 할 때 자주 변경 될 수 있습니다. 네트워크 용량이 좋을 수도 있지만 특정 서버에 대한 연결은 이어지지 않습니다. 대역폭 추정치를 최신 상태로 유지하는 것도 프로세서 및 네트워크 집약적 일 수 있습니다. 연결 장치가 연결되어 있는지 어떻게 알 수 있습니까? 빠른 Wi-Fi조차도 언급 할 수있는 일부 호텔과 공항에서 끔찍한 비용이 발생할 수 있습니다. 새로운 연결이 이루어질 때 장치가 프롬프트하는 것입니다.
다행히도 객체 감지를 사용하여 API의 존재를 감지 할 수 있습니다. API 기본 사항

네트워크 정보 API 객체는 Navigator.connection에 의해 반환됩니다. 브라우저 크로스 브라우저 호환성을 보장하려면 다음이 필요합니다.

IE는 일반적으로 정제되지 않은 API를 구현하지만 해당 목록에 navigator.msconnection을 추가 할 수 있습니다. 우리의 연결 객체는 두 가지 읽기 전용 속성을 제공합니다.

대역폭 - MB/s (초당 메가 바이트)에서 현재 대역폭의 추정을 나타내는 이중. 사용자가 오프라인 상태 인 경우 값이 0이고 결정할 수없는 경우 무한대입니다. 참고 대부분의 네트워크 제공 업체는 초당 메가 비트로 값을 인용하며 일반적인 바쁜 모바일 3G 연결은 약 400Mbps ~ = 400,000 비트/S ~ = 50KB/S ~ = 0.05MB/s.

<span>var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;</span>

입니다. metered - 사실이라면, 사용자의 연결에 제한이 적용되고 가능한 경우 대역폭 사용이 제한되어야한다는 부울.

예를 들어:
• 마지막으로 연결 상태가 변경되면 변경 이벤트 핸들러를 실행할 수 있습니다 (예 :
이 코드에서는 높은 대역폭을 사용할 수있을 때 Global HighBandwidth 변수가 맞습니다. 다른 코드는 그에 따라 반응 할 수 있습니다 (예 : HighBandwidth가 False 일 때 :
• 고해상도 이미지는로드되지 않습니다 불필요한 글꼴은로드되지 않습니다 ajax 폴링이 느려집니다 ajax 타임 아웃 매개 변수가 증가합니다
일을 좀 더 쉽게 만들려면 대역 위드 체인지의 바디 태그에 클래스를 추가 할 수 있습니다. 기능 (예 : 기능)

<span>var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;</span>

이를 통해 CSS의 배경 이미지와 같은 항목을 조건부로드 할 수 있습니다.

<span>if (connection && !connection.metered && connection.bandwidth > 2) {
</span><span>// load high-resolution image
</span><span>var img = document.getElementById("kitten");
</span>
img<span>.src = "/images/kitten_hd.jpg";
</span><span>}</span>

이 조건은 여전히 ​​미디어 쿼리로로드 된 데스크탑 레이아웃에서 확인할 수 있습니다. 네트워크 정보 API를 사용해야합니까?

작성 당시 네트워크 정보 API에는 브라우저 지원이 거의 없으며 변경 될 수 있습니다. 즉, 모바일 장치에서 작동 해야하는 웹 사이트 나 응용 프로그램을 작성하는 경우 이제 약간의 계획을 통해 페이지가 1.7MB에 도달하지 못하게 할 수 있습니다. API가 변경되면 대역폭 체인지 기능을 업데이트하면 사이트가 적절하게 반응합니다. 네트워크 정보 API를 고려할 가치가 있다고 생각합니다. 당신은?

네트워크 정보 API 에 대한 자주 묻는 질문 (FAQ) 네트워크 정보 API는 무엇이며 어떻게 작동합니까? 네트워크 정보 API는 장치가 웹과 통신하는 데 사용하는 네트워크 연결에 대한 정보를 제공하는 도구입니다. 웹 애플리케이션은 컨텐츠 전달을 최적화하는 데 사용할 수있는 장치의 네트워크 유형 및 속도의 상태에 액세스 할 수 있습니다. 예를 들어, 사용자가 느린 네트워크에있는 경우 웹 사이트는로드 시간을 개선하기 위해 품질이 낮은 이미지를 보내도록 선택할 수 있습니다.

네트워크 정보 API를 사용하여 반응 형 웹 사이트를 개선 할 수 있습니까?

네트워크 정보 API는 응답 형 웹 사이트에서 사용자 경험을 향상시키는 데 사용될 수 있습니다. 사용자의 네트워크 조건을 감지하면 웹 사이트의 동작을 적절하게 조정할 수 있습니다. 예를 들어, 사용자의 네트워크가 느리면 해상도 이미지 이하 이하면 비디오 컨텐츠가 적은 것과 같이 보내는 데이터 양을 줄일 수 있습니다. 이는 웹 사이트의 로딩 속도와 전반적인 성능을 크게 향상시킬 수 있습니다.

네트워크 정보 API가 모든 브라우저에서 지원합니까?

네트워크 정보 API가 모든 브라우저에서 지원되는 것은 아닙니다. 현재 Chrome, Opera 및 Android 브라우저에서 지원됩니다. 새로운 API를 구현하기 전에 "내가 사용할 수 있는가"와 같은 웹 사이트에서 최신 브라우저 호환성 정보를 확인하는 것이 항상 좋은 생각입니다.

웹 애플리케이션에서 네트워크 정보 API를 구현하려면 어떻게해야합니까?

네트워크 정보 구현 API는 JavaScript를 사용하여 네트워크 정보 API의 속성 및 메소드에 액세스하는 것이 포함됩니다. navigator.connection 또는 navigator.mozconnection 속성을 사용하여 사용자의 연결을 나타내는 네트워크 인식 개체를 가져온 다음이 객체의 속성 및 이벤트 처리기를 사용하여 연결에 대한 정보를 얻고 연결 변경에 반응 할 수 있습니다. 네트워크 정보 API에서 어떤 종류의 정보를 얻을 수 있습니까?

네트워크 정보 API는 사용자의 네트워크 연결에 대한 정보를 제공하는 몇 가지 속성을 제공합니다. 여기에는 다운 링크, 이펙트 티브 타입 및 RTT가 포함됩니다. 초당 메가 비트의 대역폭, 유효 연결 유형 및 라운드 트립 시간이 각각 밀리 초의 왕복 시간을 제공합니다. 네트워크 정보 API가 사용될 수 있습니까? 오프라인 상태 감지?

예, 네트워크 정보 API를 사용하여 사용자의 장치가 오프라인 상태인지 감지 할 수 있습니다. Navigator.online 속성은 사용자의 장치가 온라인 또는 오프라인인지를 나타내는 부울 값을 반환합니다.

네트워크 정보 API의 데이터는 얼마나 안정적인가?

네트워크 정보 API의 데이터 추정치이며 완전히 정확하지 않을 수 있습니다. 최근에 관찰 된 네트워크 조건을 기반으로하며 실제 현재 네트워크 조건을 반영하지 않을 수 있습니다. 따라서 네트워크 조건의 결정적인 척도가 아닌 가이드로 사용해야합니다.

네트워크 정보 API를 서비스 작업자와 함께 사용할 수 있습니까?

예, 네트워크 정보 API를 사용할 수 있습니다. 서비스 근로자와 함께. 이를 통해 사용자가 느린 네트워크에있을 때 더 적극적으로 캐싱하는 것과 같은 사용자의 네트워크 조건에 따라 서비스 작업자의 동작을 조정할 수 있습니다.

네트워크 정보 API 사용의 개인 정보 영향은 무엇입니까? 네트워크 정보 API는 네트워크 조건에 따라 사용자 지문에 잠재적으로 사용될 수 있습니다. 그러나 API는 네트워크에 대한 거친 정보 만 제공 하며이 정보는 기본 애플리케이션에도 사용할 수 있으므로 추가 개인 정보 보호 위험이 최소화됩니다.

네트워크 정보 API의 일부 사용 사례는 무엇입니까?

네트워크 정보 API는 사용자 경험을 향상시키기 위해 다양한 방법으로 사용할 수 있습니다. 예를 들어, 비디오 스트리밍 사이트는이를 사용하여 사용자의 네트워크 속도에 따라 적절한 비디오 품질을 자동으로 선택할 수 있습니다. 뉴스 사이트는이 사이트를 사용하여 고해상도 이미지를로드할지 여부를 결정할 수 있습니다. 웹 앱은이를 사용하여 느린 네트워크에있을 때 사용자에게 경고 할 수 있으며 일부 기능은 최적으로 작동하지 않을 수 있습니다.

위 내용은 네트워크 정보 API를 사용하여 반응 형 웹 사이트를 개선하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!