게시일: 2018년 7월 20일
소개
NoState Prefetch는 <link rel="prerender">와 같은 기능을 지원하는 데 사용되는 지원 중단된 사전 렌더링 프로세스를 대체하는 Chrome의 새로운 메커니즘입니다. 사전 렌더링과 마찬가지로 리소스를 미리 가져오지만 사전 렌더링과 달리 JavaScript를 실행하거나 페이지의 일부를 미리 렌더링하지는 않습니다. NoState Prefetch의 목표는 페이지 로드 시간을 줄이면서도 사전 렌더링보다 메모리를 적게 사용하는 것입니다.
NoState Prefetch는 API가 아니라 Chrome에서 다양한 API와 기능을 구현하는 데 사용하는 메커니즘입니다. 리소스 힌트 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 Prefetch는 리소스만 미리 가져오며 코드를 실행하거나 페이지를 렌더링하지는 않습니다. 이렇게 하면 사용자 대상 및 상태 저장 작업이 발생하는 것을 더 간단하게 방지할 수 있습니다.
구현
다음 단계에서는 NoState Prefetch의 작동 방식을 설명합니다.
NoStatePrefetch가 트리거됩니다.
사전 렌더링 리소스 힌트 (예:
<link rel="prerender">)와 일부 Chrome 기능은 다음 두 가지 조건이 충족되는 경우 NoState Prefetch를 트리거합니다. a) 사용자가 로우엔드 기기를 사용하지 않음, b) 사용자가 모바일 네트워크를 사용하지 않음NoState Prefetch를 위해 새로운 전용 렌더러가 생성됩니다.
Chrome에서 '렌더러'는 HTML 문서를 가져와 파싱하고, 렌더링 트리를 구성하고, 결과를 화면에 페인팅하는 프로세스입니다. Chrome의 각 탭과 각 NoState Prefetch 프로세스에는 격리를 제공하는 자체 렌더러가 있습니다. 이렇게 하면 탭 비정상 종료와 같은 문제가 발생할 때의 영향을 최소화하고 악성 코드가 다른 탭이나 시스템의 다른 부분에 액세스하지 못하도록 방지할 수 있습니다.
NoState Prefetch로 로드되는 리소스가 가져와집니다. 그러면 HTMLPreloadScanner가 이 리소스를 스캔하여 가져와야 하는 하위 리소스를 검색합니다. 기본 리소스 또는 하위 리소스에 등록된 서비스 워커가 있는 경우 이러한 요청은 적절한 서비스 워커를 통해 전달됩니다.
NoState Prefetch는 GET HTTP 메서드만 지원하며 다른 HTTP 메서드를 사용해야 하는 하위 리소스는 가져오지 않습니다. 또한 사용자 작업 (예: 인증 팝업, SSL 클라이언트 인증서, 수동 재정의)이 필요한 리소스는 가져오지 않습니다.
가져온 하위 리소스는 '유휴' 네트워크 우선순위로 가져옵니다.
'유휴' 네트워크 우선순위는 Chrome에서 가능한 가장 낮은 네트워크 우선순위입니다.
NoState Prefetch로 가져온 모든 리소스는 캐시 헤더에 따라 캐시됩니다.
NoState Prefetch는
no-storeCache-Control 헤더가 있는 리소스를 제외한 모든 리소스를 캐시합니다.Vary응답 헤더,no-cacheCache-Control 헤더가 있거나 리소스가 5분을 초과하는 경우 사용 전에 리소스가 재검증됩니다.모든 하위 리소스가 로드된 후 렌더러가 종료됩니다.
하위 리소스가 타임아웃되면 렌더러가 30초 후에 종료됩니다.
브라우저는 쿠키 저장소와 로컬 DNS 캐시를 업데이트하는 것 외에는 상태를 수정하지 않습니다. 'NoState 프리패치'의 '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 Prefetch로 로드된 사이트 목록을 보려면 chrome://net-internals/#prerender로 이동하세요.
NoState Prefetch 사용량에 관한 통계를 보려면 chrome://histograms로 이동하여 'NoStatePrefetch'를 검색하세요. NoState Prefetch에는 세 가지 다른 히스토그램이 있습니다. NoState Prefetch의 각 사용 사례에 하나씩 있습니다.
- 'NoStatePrefetch'(사전 렌더링 리소스 힌트의 사용량 통계)
- 'gws_NoStatePrefetch'(Google 검색 결과 페이지의 사용 통계)
- 'omnibox_NoStatePrefetch'(Chrome 주소 표시줄의 사용 통계)