네트워크 우선 순위 지정

Internet Explorer 11에서는 웹 페이지 사용을 보다 빠르게 시작할 수 있도록 네트워크 요청의 우선 순위를 지정합니다. 개발자가 웹 페이지 리소스가 로드되는 순서를 조정할 수도 있습니다.

네트워크 요청 우선 순위 지정

여기에서는 IE11에서 페이지 로드 우선 순위를 지정하는 방법 및 개별 리소스를 지연하여 나중에 로드되도록 하는 방법을 살펴봅니다.

단일 요청으로 일부 웹 페이지를 로드할 수 있지만 페이지에 있는 항목으로 인해 대부분 여러 번 요청해야 합니다. 이미지, 스타일 시트 및 스크립트 라이브러리는 원래 웹 페이지를 로드하는 데 사용되는 요청과 별도의 요청으로 로드됩니다.

웹 페이지에는 다음과 같이 다양한 형식의 리소스가 포함될 수 있습니다.

  1. 웹 페이지의 루트 문서
  2. CSS 스타일시트
  3. WOFF 글꼴
  4. 스크립트 라이브러리
  5. onload 이벤트 처리기를 사용하여 로드된 이미지
  6. 동기 XMLHttpRequest(XHR) 요청
  7. 비동기 스크립트 요청(예: indexedDB, 웹 작업자, 파일 API 등)
  8. 비동기 XHR 요청
  9. HTML5 audiovideo
  10. object 요소를 사용하여 로드된 Microsoft ActiveX 및 기타 컨트롤
  11. 지연된 JavaScript(defer="true")

이 목록은 유형별로 각 요청의 우선 순위를 지정합니다. IE11부터는 일반적으로 이 순서대로 유형별로 개별 네트워크 요청의 우선 순위가 지정됩니다.

각 리소스에는 여러 네트워크 요청이 필요할 수 있습니다. 연결 관리(TCP) 계층에서 이전 버전의 Internet Explorer는 로드되는 리소스 유형이나 해당 컨텍스트에 관계없이 각 요청을 동일하게 처리했습니다. 배경 이미지와 글꼴은 연결된 스타일시트와 동일하게 처리되었습니다. 마찬가지로, 배경 탭의 요청은 전경 탭의 요청과 동일하게 처리되었습니다.

IE11부터는 개별 네트워크 요청이 일반적으로 표시된 순서에 따라 유형별로 우선 순위가 지정됩니다. 예를 들어 웹 페이지 루트 문서의 요청이 지연된 JavaScript 요청보다 높은 우선 순위를 갖습니다.

보류 중인 요청 수가 사용 가능한 연결 수보다 크면 요청이 해당 우선 순위에 따라 처리됩니다. 최적화된 연결과 최적화되지 않은 연결 사이에서 선택해야 하는 경우 우선 순위가 낮은 요청보다 먼저 우선 순위가 높은 요청에 최적화된 연결이 지정됩니다.

또한 IE11에서는 요청 컨텍스트를 기준으로 요청의 우선 순위를 지정합니다.

  1. 전경 탭에서 웹 페이지에 의해 수행된 요청
  2. 전경 탭에서 iframe 요소에 로드된 콘텐츠에 의해 수행된 요청
  3. 배경 탭에서 웹 페이지에 의해 수행된 요청
  4. 미리 렌더링된 콘텐츠에 대한 요청

예상대로 전경 탭에서 수행된 요청이 배경 탭의 요청보다 높은 우선 순위를 갖습니다.

리소스 로딩 지연

개발자는 lazyload 특성을 사용하여 개별 리소스가 로드되지 않도록 지연시킬 수 있습니다. 이렇게 하면 중요한 콘텐츠는 가능한 한 빨리 로드되고 덜 중요한 리소스는 나중에 로드됩니다. 경합된 연결이나 우선 순위가 더 높은 리소스가 없으면 우선 순위가 낮은 리소스가 정상적으로 로드됩니다. 따라서 수행되는 동작이 사용자에게 더 빨리 표시되므로 인식되는 웹 페이지 성능을 향상시킬 수 있으며, 특히 복잡한 웹 페이지에서는 더욱 그렇습니다.

이러한 요소는 lazyload 특성을 지원합니다.

lazyload를 "true"로 설정하면 요소를 표시하는 데 필요한 연결 수준 요청이 우선 순위가 더 높은 요청 다음에 처리됩니다.

다음은 lazyload를 사용하는 방법입니다.


<img src="example.jpg" lazyload="1" />

API 참조

lazyload

 

 

표시:
© 2014 Microsoft