소개
NoState Prefetch는 <link rel="prerender">와 같은 기능을 지원하는 데 사용되는 지원 중단된 사전 렌더링 프로세스의 대안인 Chrome의 새로운 메커니즘입니다. 사전 렌더링과 마찬가지로 사전 로드도 리소스를 미리 가져옵니다. 하지만 사전 렌더링과 달리 JavaScript를 실행하거나 페이지의 일부를 미리 렌더링하지는 않습니다. NoState Prefetch의 목표는 페이지 로드 시간을 줄이면서 프리렌더링보다 적은 메모리를 사용하는 것입니다.
NoState Prefetch는 API가 아니라 Chrome에서 다양한 API 및 기능을 구현하는 데 사용하는 메커니즘입니다. Resource Hints API와 Chrome 주소 표시줄의 페이지 미리 로드는 모두 NoState Prefetch를 사용하여 구현됩니다. Chrome 63 이상을 사용하는 경우 브라우저에서 이미 <link rel="prerender">와 같은 기능에 NoState Prefetch를 사용하고 있습니다.
이 도움말에서는 NoStatePrefetch의 작동 방식, 도입 동기, Chrome의 히스토그램을 사용하여 사용 통계를 확인하는 방법을 설명합니다.
동기
NoState Prefetch를 도입한 이유는 다음과 같이 두 가지입니다.
메모리 사용량 감소
NoState Prefetch는 약 45MiB의 메모리만 사용합니다. 미리 로드 스캐너를 유지하는 것이 NoState Prefetch의 기본 메모리 비용이며 이 비용은 다양한 사용 사례에서 비교적 일정하게 유지됩니다. 가져오기의 크기나 양을 늘리면 NoState Prefetch에서 사용하는 메모리 양에 큰 영향을 미치지 않습니다.
반면 사전 렌더링은 일반적으로 100MiB의 메모리를 사용하며 메모리 사용량은 150MiB로 제한됩니다. 메모리 소비가 많으므로 메모리가 부족한 기기 (예: RAM이 512MB 이하인 기기)에는 적합하지 않습니다. 따라서 Chrome은 저가형 기기에서 사전 렌더링을 실행하지 않고 대신 사전 연결합니다.
새로운 웹 플랫폼 기능 지원 용이화
사전 렌더링을 사용하면 사용자 대상 (예: 음악 또는 동영상 재생) 또는 상태 저장 작업 (예: 세션 또는 로컬 저장소 변경)이 발생해서는 안 됩니다. 하지만 페이지를 렌더링하는 동안 이러한 작업이 실행되지 않도록 하는 것은 어렵고 복잡할 수 있습니다. NoState 미리 가져오기는 리소스만 미리 가져옵니다. 코드를 실행하거나 페이지를 렌더링하지는 않습니다. 이렇게 하면 사용자 대상 및 상태 저장 동작이 발생하지 않도록 더 간단하게 방지할 수 있습니다.
구현
다음 단계에서는 NoState Prefetch의 작동 방식을 설명합니다.
NoStatePrefetch가 트리거됩니다.
사전 렌더링 리소스 힌트 (예:
<link rel="prerender">) 및 일부 Chrome 기능은 a) 사용자가 저가형 기기를 사용하지 않고 b) 사용자가 모바일 네트워크를 사용하지 않는 경우 NoState Prefetch를 트리거합니다.NoState Prefetch를 위한 새로운 전용 렌더러가 생성됩니다.
Chrome에서 '렌더러'는 HTML 문서를 가져와 파싱하고 렌더링 트리를 생성하고 결과를 화면에 페인팅하는 프로세스입니다. Chrome의 각 탭과 각 NoState Prefetch 프로세스에는 격리를 제공하는 자체 렌더러가 있습니다. 이렇게 하면 문제가 발생할 때의 영향 (예: 탭 비정상 종료)을 최소화하고 악성 코드가 다른 탭이나 시스템의 다른 부분에 액세스하는 것을 방지할 수 있습니다.
NoState Prefetch로 로드되는 리소스가 가져옵니다. 그런 다음 HTMLPreloadScanner가 이 리소스를 검사하여 가져와야 하는 하위 리소스를 찾습니다. 기본 리소스 또는 하위 리소스에 등록된 서비스 워커가 있는 경우 이러한 요청은 적절한 서비스 워커를 통해 전달됩니다.
NoState 미리 가져오기는 GET HTTP 메서드만 지원합니다. 다른 HTTP 메서드의 사용이 필요한 하위 리소스는 가져오지 않습니다. 또한 사용자 작업이 필요한 리소스 (예: 인증 팝업, SSL 클라이언트 인증서 또는 수동 재정의)는 가져오지 않습니다.
가져온 하위 리소스는 'IDLE' 순수 우선순위로 가져옵니다.
'IDLE' 네트워크 우선순위는 Chrome에서 가능한 가장 낮은 네트워크 우선순위입니다.
NoState Prefetch로 가져온 모든 리소스는 캐시 헤더에 따라 캐시됩니다.
NoState Prefetch는
no-storeCache-Control 헤더가 있는 리소스를 제외한 모든 리소스를 캐시합니다.Vary응답 헤더,no-cacheCache-Control 헤더가 있거나 리소스 생성 후 5분이 지난 경우 리소스는 사용 전에 재검증됩니다.모든 하위 리소스가 로드된 후 렌더러가 종료됩니다.
하위 리소스가 타임아웃되면 30초 후에 렌더러가 종료됩니다.
브라우저는 쿠키 저장소와 로컬 DNS 캐시를 업데이트하는 것 외에는 상태를 수정하지 않습니다. 이는 'NoState Prefetch'의 'NoState'이므로 이를 명시하는 것이 중요합니다.
'일반적인' 페이지 로드 프로세스의 이 시점에서 브라우저는 JavaScript 실행,
sessionStorage또는localStorage변형, 음악 또는 동영상 재생, History API 사용, 사용자 메시지 표시와 같이 브라우저 상태를 수정하는 작업을 실행할 수 있습니다. NoState Prefetch에서 발생하는 유일한 상태 수정은 응답이 도착할 때 DNS 캐시를 업데이트하고 응답에Set-Cookie헤더가 포함된 경우 쿠키 저장소를 업데이트하는 것입니다.리소스가 필요하면 브라우저 창에 로드됩니다.
그러나 사전 렌더링된 페이지와 달리 페이지가 즉시 표시되지는 않습니다. 브라우저에서 렌더링해야 합니다. 브라우저는 NoState Prefetch에 사용한 렌더러를 재사용하지 않고 대신 새 렌더러를 사용합니다. 페이지를 미리 렌더링하지 않으면 NoStatePrefetch의 메모리 사용량이 줄어들지만 페이지 로드 시간에 미칠 수 있는 영향도 줄어듭니다.
페이지에 서비스 워커가 있는 경우 이 페이지 로드는 서비스 워커를 다시 거칩니다.
페이지가 필요할 때까지 NoState Prefetch가 하위 리소스 가져오기를 완료하지 못한 경우 브라우저는 NoState Prefetch가 중단된 지점부터 페이지 로드 프로세스를 계속 진행합니다. 브라우저는 여전히 리소스를 가져와야 하지만 NoState Prefetch가 시작되지 않은 경우만큼은 가져오지 않아도 됩니다.
웹 애널리틱스에 미치는 영향
NoState Prefetch를 사용하여 로드된 페이지는 웹 분석 도구에서 클라이언트 측에서 데이터를 수집하는지 아니면 서버 측에서 데이터를 수집하는지에 따라 약간 다른 시점에 등록됩니다.
클라이언트 측 분석 스크립트는 페이지가 사용자에게 표시될 때 페이지 조회를 등록합니다. 이러한 스크립트는 JavaScript 실행에 의존하며 NoState Prefetch는 JavaScript를 실행하지 않습니다.
서버 측 분석 도구는 요청이 처리될 때 측정항목을 등록합니다. NoState Prefetch를 통해 로드된 리소스의 경우 요청이 처리되는 시점과 클라이언트에서 응답이 실제로 사용되는 시점 (사용되는 경우) 사이에 상당한 시간 간격이 있을 수 있습니다. Chrome 69부터 NoState Prefetch는 모든 요청을 일반 탐색과 구별할 수 있도록 Purpose: Prefetch 헤더를 모든 요청에 추가합니다.
확인해 보기
NoStatePrefetch는 2017년 12월에 Chrome 63으로 출시되었습니다. 현재 다음 용도로 사용됩니다.
prerender리소스 힌트 구현- Google 검색 결과에서 첫 번째 결과 가져오기
- Chrome 주소 표시줄에서 다음에 방문할 가능성이 높다고 예측하는 페이지 가져오기
Chrome 내부에서 NoStatePrefetch 사용 방식을 확인할 수 있습니다.
NoState 미리 로드로 로드된 사이트 목록을 보려면 chrome://net-internals/#prerender로 이동합니다.
NoState Prefetch 사용에 관한 통계를 보려면 chrome://histograms로 이동하여 'NoStatePrefetch'를 검색합니다. NoState Prefetch의 사용 사례마다 하나씩 세 가지 NoState Prefetch 히스토그램이 있습니다.
- 'NoStatePrefetch'(사전 렌더링 리소스 힌트 사용 통계)
- 'gws_NoStatePrefetch'(Google 검색 결과 페이지의 사용 통계)
- 'omnibox_NoStatePrefetch'(Chrome 주소 표시줄의 사용 통계)