무심코 우리는 브라우저를 통해 URL을 입력하고 해당 웹 사이트를 확인 하지만 아무리 간단한 페이지라도 생각보다 많은 동작을 통해 홈페이지가 동작을 한다.
먼저 웹 페이지를 하나의 커다란 Resource라고 보자.
기존 Resource 요청방식
- 웹 URL을 통한 HTTP 요청 시작
- 브라우저가 DNS 이름 확인(DNS Lookup)
- TCP Hand Shake 수행(신뢰성 확보)(Inital connection)
- TLS 터널 협상(SSL)
- 전송계층 상 클라이언트, 서버에 대한 인증 및 데이터 암호화 수행 - 서버에 접속하여 요청 데이터를 가져옴(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% 실행이 보장 되지 않음.
** 이 글을 통해 개인적인 이익을 취할 생각이 없으며, 이로 인한 광고 같은것도 개제하지 않을 것입니다. 혹시 저작권의 문제가 되거나 잘못된 부분이 있어 글의 삭제나 수정을 원하시면 바로 언제든 적극 반영하겠습니다. **
참고
