이 페이지는 Cloud Translation API를 통해 번역되었습니다.

NoState Prefetch 소개

Katie Hempenius

소개

NoState Prefetch는 Chrome의 새로운 메커니즘으로, <link rel="prerender">와 같은 기능을 제공하는 데 사용되는 지원 중단된 사전 렌더링 프로세스의 대안입니다. 사전 렌더링과 마찬가지로 리소스를 미리 가져오지만 사전 렌더링과 달리 자바스크립트를 실행하거나 페이지의 일부를 미리 렌더링하지 않습니다. 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은 저사양 기기에서 사전 렌더링을 하지 않고 대신 사전 연결합니다.

새로운 웹 플랫폼 기능 지원 촉진

사전 렌더링을 사용하면 사용자에게 표시되는 작업(예: 음악 또는 동영상 재생) 또는 스테이트풀(Stateful) 작업(예: 변형 세션 또는 로컬 저장소)이 발생해서는 안 됩니다. 그러나 페이지를 렌더링하는 동안 이러한 작업이 실행되지 않도록 하는 것은 어렵고 복잡할 수 있습니다. NoState Prefetch는 리소스를 미리 가져오기만 하며 코드를 실행하거나 페이지를 렌더링하지 않습니다. 이렇게 하면 사용자에게 표시되는 스테이트풀(Stateful) 작업이 실행되지 않도록 더 간단하게 방지할 수 있습니다.

구현

다음 단계에서는 NoState 미리 가져오기의 작동 방식을 설명합니다.

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-store Cache-Control 헤더가 있는 리소스를 제외한 모든 리소스를 캐시합니다. Vary 응답 헤더, no-cache Cache-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 Prefetch로 로드된 사이트 목록을 보려면 chrome://net-internals/#prerender로 이동합니다.

NoState Prefetch 사용량에 관한 통계를 보려면 chrome://histograms로 이동하여 'NoStatePrefetch'를 검색합니다. NoState Prefetch 히스토그램에는 세 가지의 서로 다른 NoState Prefetch 히스토그램이 있으며 NoState Prefetch 사용 사례마다 하나씩 있습니다.

'NoStatePrefetch'(사전 렌더링 리소스 힌트 사용 통계)
'gws_NoStatePrefetch'(Google 검색결과 페이지에서 사용 통계)
'omnibox_NoStatePrefetch'(Chrome 주소 표시줄 사용 통계)