미리 렌더링 및 프리페치 지원

Internet Explorer 11에서 미리 렌더링프리페치를 사용하여 웹 사이트의 탐색 성능을 향상시킬 수 있습니다. 미리 렌더링미리 로드라고도 하며 사용자가 현재 페이지를 읽는 동안 백그라운드에서 로드(렌더링)할 웹 페이지를 지정하고 프리페치는 백그라운드에서 다운로드할 리소스를 식별합니다. 두 기능 모두 콘텐츠가 필요하기 전에 미리 콘텐츠를 다운로드하기 때문에 필요할 때 사용자가 즉시 리소스를 사용할 수 있습니다.

여기서는 link 요소를 사용하여 백그라운드에서 웹 페이지를 미리 렌더링하고 리소스를 프리페치하는 방법을 알아봅니다.

콘텐츠를 미리 가져와서 성능 향상

사용자가 IE11을 사용하여 웹 페이지를 읽을 때 브라우저는 백그라운드에서 추가 콘텐츠를 로드하여 렌더링할 수 있습니다. 웹 개발자는 사용자가 다음에 필요로 할 것 같은 웹 페이지와 리소스를 식별할 수 있습니다. 이렇게 하면 콘텐츠가 항상 준비되어 더 빨리 표시할 수 있으므로 인지되는 웹 사이트의 성능을 향상할 수 있습니다.

개별 웹 페이지로 분리되는 문서를 작성한다고 가정해 봅니다. 사용자가 각 페이지를 읽고 있을 때 다음 페이지를 미리 로드하여 사용자가 다음 페이지를 읽으려고 할 때 바로 표시할 수 있습니다. 또는 여러 기사가 포함된 사이트를 만든 경우 각 기사가 더 빠르게 로드되도록 홈페이지를 사용하여 각 페이지에서 사용되는 스타일시트, 이미지 및 기타 리소스를 다운로드할 수 있습니다.

이와 같이 하려면 link 요소를 사용합니다. IE11에서는 rel 특성에 대해 다음 값이 지원됩니다.

설명 및 예
미리 렌더링

사용자가 다음에 웹 페이지로 이동하려는 경우 백그라운드에서 로드할 웹 페이지를 식별합니다.

예:


<link rel="prerender" href="http://example.com/nextpage.html" />

IE11은 백그라운드에서 한 페이지를 미리 렌더링할 수 있습니다. 두 번째 미리 렌더링 요청이 발생하는 경우 첫 번째 요청을 대체합니다. 추가 미리 렌더링 요청은 무시됩니다.

prefetch

캐시에 다운로드할 리소스 파일(예: 이미지 또는 CSS 스타일시트)을 식별합니다.

예:


<link rel="prefetch" href="http://example.com/style.css" />

IE11은 프리페치 요청을 최대 10개까지 지원합니다. 추가 요청은 무시됩니다.

dns-prefetch

요청이 더 빠르게 발생할 수 있도록 백그라운드를 확인하기 위해 DNS 쿼리를 식별합니다.

예:


<link rel="dns-prefetch" href="http://example.com/"/>

 

참고  Internet Explorer는 또한 rel 특성에 대해 "next" 및 "prev" 값을 지원합니다. 자세한 내용은 페이지 넘기기 대상 결정을 참조하세요.

대상 URL은 개별 파일 이름(상대 또는 정규화된 이름)을 참조해야 합니다. 와일드카드는 지원되지 않습니다.

효과적으로 백그라운드 리소스 로드

link 요소를 사용하여 웹 페이지를 미리 로드하는 경우 IE11에서는 페이지를 백그라운드에서 로드하고 렌더링합니다.

웹 페이지를 백그라운드에서 로드해도 페이지 로드에 필요한 시간은 감소하지 않습니다. 페이지를 포그라운드 또는 백그라운드에서 로드할지 여부에 관계없이 페이지에는 동일한 개수의 네트워크 요청이 필요합니다.

사용자의 관점에서 차이가 발생합니다. 미리 렌더링된 페이지는 백그라운드에서 로드 및 렌더링되기 때문에 사용자가 링크를 클릭할 때 즉시 표시됩니다. 사용자가 페이지 로드를 볼 수 없으므로 더욱 빠르게 표시되는 것처럼 느껴집니다.

미리 렌더링에는 다음 조건이 필요합니다.

  • 사용자가 데이터 통신 연결 네트워크를 사용하는 경우 웹 페이지를 미리 렌더링하는 기능은 페이지를 보는 데 사용되는 장치의 데이터 사용량 요금제에 따라 달라집니다.
  • 대상 URL이 파일 다운로드이면 안 됩니다.
  • 대상 URL이 "http://" 또는 "https://" 프로토콜을 사용해야 합니다.
  • 대상 URL이 최상위 수준 문서여야 합니다. 즉, iframe 문서이면 안 됩니다.
  • 한 번에 하나의 웹 페이지만 미리 렌더링할 수 있습니다.
  • link 요소가 포함된 문서가 표시됩니다. 즉, 문서가 포그라운드에서 로드되고 최소화되지 않습니다.

다음 조건 중 하나라도 적용될 경우 백그라운드에서 페이지를 완전히 렌더링할 수 없습니다.

  • 대상 페이지가 alert 상자, window.open 호출 또는 보안 알림 등의 사용자 인터페이스 변경을 트리거합니다.
  • 대상 페이지가 video 또는 audio 요소를 사용하여 미디어 파일을 자동으로 재생합니다.
  • 대상 페이지가 travel log를 수정합니다.
  • F12 도구 창이 열려 있습니다.

이러한 경우에는 백그라운드에 있는 동안 대상 페이지가 일시 중지됩니다. 사용자가 대상 페이지를 선택하면 페이지가 표시되고 일시 중지된 위치부터 렌더링이 다시 시작됩니다.

미리 렌더링된 페이지가 항상 사용자에게 표시되는 것은 아닙니다. 다음 조건에 해당하는 경우 미리 렌더링된 페이지가 표시되지 않고 메모리에서 삭제됩니다.

  • 사용자가 5분 이내에 대상 페이지를 열지 않습니다.
  • 사용자가 다른 페이지를 엽니다.
  • 사용자가 다른 탭 또는 브라우저 인스턴스로 전환합니다.
  • JavaScript 프로세스가 미리 렌더링할 다른 웹 페이지를 요청하는 새 link 요소를 추가합니다.
  • 대상 페이지를 로드하는 동안 HTTP 오류 코드 500(서버 오류), 404(리소스를 찾을 수 없음) 또는 관련 오류(예: 연결 문제)를 비롯한 오류가 발생합니다.

미리 렌더링된 페이지가 삭제된 후 나중에 요청되면 호스팅 서버에서 직접 로드됩니다. 페이지가 아직 브라우저 캐시에 있을 경우 더 빠르게 로드될 수도 있지만 항상 그렇지는 않습니다.

백그라운드에서 페이지를 로드하면 특정 부작용을 일으킬 수 있습니다. 특히 load 이벤트 중에 실행되는 활동의 경우 다음과 같은 문제가 발생할 수 있습니다.

  • 사용자가 페이지를 표시할 때까지 Microsoft ActiveX 컨트롤이 로드되지 않습니다. JavaScript에서 개체를 사용하기 전에 readyState 속성을 사용하여 개체를 사용할 수 있는지 확인하세요.

  • 페이지가 표시될 때 특정 애니메이션이 표시되지 않을 수 있습니다. 이는 페이지가 백그라운드에서 로드되는 동안 애니메이션이 이미 실행되었기 때문일 수 있습니다.

  • 타이머가 예기치 않은 결과를 나타낼 수 있습니다.

  • 쿠키, 캐시된 콘텐츠 및 비동기 작업에 의한 변경 내용(예: IndexedDB웹 저장소)이 그대로 유지됩니다.

이러한 결과나 다른 관련된 문제가 발생할 경우 페이지 표시 유형 API를 사용하여 페이지 표시 여부를 결정합니다. 예를 들어 페이지가 표시될 때까지 애니메이션을 지연시켜야 합니다. 자세한 내용은 미리 렌더링 및 프리페치의 효율적인 사용을 참조하세요.

사양

HTML5, 섹션 4.12.5.9

 

 

표시:
© 2014 Microsoft