Resource Hint

박상수
박상수
Apr 29, 2018 · 5 min read

무심코 우리는 브라우저를 통해 URL을 입력하고 해당 웹 사이트를 확인 하지만 아무리 간단한 페이지라도 생각보다 많은 동작을 통해 홈페이지가 동작을 한다.

먼저 웹 페이지를 하나의 커다란 Resource라고 보자.

기존 Resource 요청방식

  1. 웹 URL을 통한 HTTP 요청 시작
  2. 브라우저가 DNS 이름 확인(DNS Lookup)
  3. TCP Hand Shake 수행(신뢰성 확보)(Inital connection)
  4. TLS 터널 협상(SSL)
    - 전송계층 상 클라이언트, 서버에 대한 인증 및 데이터 암호화 수행
  5. 서버에 접속하여 요청 데이터를 가져옴(Waiting, Content Download)
위 그림과 같이 리소스를 갖고 오게된다

이러한 과정을 레이턴시(latency)라 부르며, 아무리 작고, 많은 리소스라도 이 과정을 거치게 된다.

HTTP 1.1 스펙에서 한 리소스 출처에 최대 6개의 리소스를 동시에 갖고 올 수 있고 이를 넘을 경우 대기를 하게 된다.(https://crbug.com/12066)

이러한 상황들을 레이턴시 극복을 위해 prefetch 기술은 여러분야에서 사용되고 있으며, Ilya Grigorik 이 Resource Hint라는 Spec를 제안하였다.

SPEC

크게 4가지로 구성되어 있다.

  • dns-prefetch
    - 리소스를 갖고 오는 목적서버에 대해 선언, 가능한 빨리 dns lookup동작을 빨리 해결하려 한다.
<link  rel="dns-prefetch"  href = "//foo.com">
  • preconnect
    - dns lookup, tcp handshake, TLS협상 등 초기 높은 대기시간 비용을 사용하게 된다.
    - preconnect는 다음 동작들이 이루어진다
    1. href 속성에 의해 URL을 해석,
    URL이 유효한 URL인지 아닌지 해석하여 아닐경우 error처리,
    HTTP/HTTPS인지 판단
    2. 유효할 경우 이 url을 origin으로 판단
    3. cors에 대한 상태를 대상 엘리먼트의 crossOrigin 속성에 할당합니다.
    4. cors의 속성의 값이 anonymous 이거나 credentials이 false가 아닐경우 연결을 시도
    5. http의 경우 (DNS+TCP), https의 경우 (DNS+TCP+TLS)를 수행, 이러한 커넥션을 열어두게 되며, 얼마나 많은 연결을 하게 될지는 user agent가 결정
<link rel="preconnect" href="//foo.com" crossorigin="anonymous">
  • prefetch
    - 링크에 대한 관계를 빨리 파악할 수 있도록 도움을 줌
    - 리소스를 받게 될 경우 더 빠른 응답을 할 수 있도록 준비
    - as 속성은 “preload” 에 정의된 요구사항을 준수해야 됨
    - crossOrigin은 CORS속성이며, 그 요구사항을 준수해야 됨
<link rel="prefetch" href="/bar.png" as="image">
<link rel="prefetch" href="/bar.js" as="script">
  • prerender
    - 다음탐색에 요구될 수 있는 자원을 식별하는데 사용
    - 가져온 자원에 대해 더 빠른 응답에 대한 준비, 실행합니다.
<link rel="prerender" href="//foo.com/renderpage.html">
  • 사전 렌더링에 있어 주의해야 될 것이 몇가지 있다.
    -적은 cpu, gpu 사용 유도
    — html 리소스 요청 일부 연기
    — 이용이 제한된 리소스에 대한 사전렌더링은 중지
    — 원본 페이지에 영향을 줄 수 있는 렌더링은 포기
    — 멱등 수가 아닌 동작을 하는 속성에 대해서는 포기
    (XMLHttpRequest를 이용한 GET, HEAD 또는 OPTION이외의 동사와 공유 로컬 저장소에 대한 변형)
    — 사용자가 확인 대화상자, 인증 프롬프트 등의 입력 요구 할 경우 등..

전처리시 실행이 필요하지 않을경우 prefetch 힌트를 사용할 수 있다.

렌더링 처리간 성공률을 높이기 위해서는 가시성의 상태를 보고 결정, 예외적인 상황에 대한 처리도 적절히 구현되어야 한다.
- 멱등을 원하지 않는 요청
- 페이지가 표시되기 전에 실행되는부분

로드 및 오류 이벤트

  • 미해결 요청이나 초기화 요청으로 인한 이벤트를 지연시켜서는 안된다.
  • 요소별 레벨 load 및 error, 자바스크립트 이벤트 등으로 인해 실행되지 않을수 있다. load 이벤트와 error 상황 별 처리가 필요함.
  • hint 일 뿐 100% 실행이 보장 되지 않음.

** 이 글을 통해 개인적인 이익을 취할 생각이 없으며, 이로 인한 광고 같은것도 개제하지 않을 것입니다. 혹시 저작권의 문제가 되거나 잘못된 부분이 있어 글의 삭제나 수정을 원하시면 바로 언제든 적극 반영하겠습니다. **

참고

More From Medium

Also tagged Prefetch

Top on Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade