<div id="readability-page-1" class="page"><div tabindex="-1" id="___gatsby"><main><div itemscope="" itemtype="http://schema.org/BlogPosting"><section><main><article><div id="post-content" itemprop="articleBody"><p><em>6편 소개</em></p>
<ul>
<li>브라우져가 웹 페이지를 렌더링할 때 발생하는 HTTP 요청을 효율적으로 제어하는 다양한 기법</li>
<li><strong>16장. 렌더링 최적화</strong>: 외부 리소스의 로드 시점을 제어해 웹 성능을 최적화하는 기술</li>
<li><strong>17장. 캐시</strong>: 서버와 브라우저가 HTTP 헤더를 통해 캐싱 정책을 주고받아 성능을 최적화하는 메커니즘</li>
</ul>
<h2 id="16장-로딩-최적화"><a href="#16%EC%9E%A5-%EB%A1%9C%EB%94%A9-%EC%B5%9C%EC%A0%81%ED%99%94" aria-label="16장 로딩 최적화 permalink"></a>16장. 로딩 최적화</h2>
<h2 id="161-렌더링-과정"><a href="#161-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95" aria-label="161 렌더링 과정 permalink"></a>16.1 렌더링 과정</h2>
<ul>
<li>DSN 질의</li>
<li>HTML 문서 획득</li>
<li>주요 렌더링 경로(Critical Rendering Path, CRP)</li>
<li>파싱을 차단하는 HTTP 요청</li>
</ul>
<h2 id="162-script-태그의-렌더링-영향도"><a href="#162-script-%ED%83%9C%EA%B7%B8%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%98%81%ED%96%A5%EB%8F%84" aria-label="162 script 태그의 렌더링 영향도 permalink"></a>16.2 script 태그의 렌더링 영향도</h2>
<ul>
<li>웹 서버 준비</li>
<li>자바스크립트를 로딩하는 웹 문서 준비</li>
<li>응답 지연 기능 추가</li>
<li>PerformanceAPI로 정확한 시간 측정</li>
</ul>
<h2 id="163-async"><a href="#163-async" aria-label="163 async permalink"></a>16.3 Async</h2>
<ul>
<li>파싱과 동시에 파일을 다운로드하는 방법</li>
<li>다운로드 완료한 순서대로 실행한다.</li>
<li>DOM 에 무관하거나 서로 영향을 주지 않는 스크립트에 적합, 광고나 분석 트래커</li>
</ul>
<h2 id="164-defer"><a href="#164-defer" aria-label="164 defer permalink"></a>16.4 Defer</h2>
<ul>
<li>순서대로 실행해야하는 스크립트</li>
<li>미리 다운로드한 뒤 실행 순서를 보장하는 방법</li>
<li>서로 의존하는 스크립트에 적합</li>
</ul>
<h2 id="165-preload"><a href="#165-preload" aria-label="165 preload permalink"></a>16.5 Preload</h2>
<ul>
<li>웹문서에 필요한 자원을 미리 다운로드하는 방법</li>
<li>용량이 큰 이미지를 다운로드하는 상황</li>
<li>클릭과 동시에 이미지가 렌더링되도록 개선</li>
<li>이미지, 비디오, 스타일시트, 폰트, 자바스크립트 등에 활용</li>
</ul>
<h2 id="166-prefetch"><a href="#166-prefetch" aria-label="166 prefetch permalink"></a>16.6 Prefetch</h2>
<ul>
<li>다음 페이지에서 사용할 자원을 미리 다운로드하는 방법</li>
<li>용량이 큰 다음 페이지로 이동하는 상황</li>
<li>링크 이동과 동시에 페이지가 렌더링되도록 개선</li>
<li>다음 문서의 렌더링 성능을 높일 때 활용</li>
</ul>
<h2 id="167-이미지-지연-로딩"><a href="#167-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%A7%80%EC%97%B0-%EB%A1%9C%EB%94%A9" aria-label="167 이미지 지연 로딩 permalink"></a>16.7 이미지 지연 로딩</h2>
<ul>
<li>브라우져가 img 태그의 이미지를 다운로드하는 시점</li>
<li>뷰 포트 안에 이미지만 다운로드하고 밖에 있는 이미지는 지연 로딩</li>
<li>이미지가 많은 사진첩이나 블로그에서 활용</li>
</ul>
<h2 id="168-중간-정리"><a href="#168-%EC%A4%91%EA%B0%84-%EC%A0%95%EB%A6%AC" aria-label="168 중간 정리 permalink"></a>16.8 중간 정리</h2>
<ul>
<li>주요 렌더링 경로에서 추가적인 HTTP 요청은 성능에 영향을 준다.</li>
<li><strong>Async</strong> 속성으로 자바스크립트를 비동기로 다운로드 할 수 있다.</li>
<li><strong>Defer</strong> 속성으로 자바스크립트의 실행 순서를 보장할 수 있다.</li>
<li><strong>Preload</strong>로 웹 페이지에 필요한 자원을 미리 다운로드 할 수 있다.</li>
<li><strong>Prefetch</strong>로 다음 페이지에 필요한 자원을 미리 다운로드 할 수 있다.</li>
<li><strong>img 태그</strong>로 로딩하는 이미지는 지연 로딩할 수 있다.</li>
</ul>
<h3 id="참고"><a href="#%EC%B0%B8%EA%B3%A0" aria-label="참고 permalink"></a>참고</h3>
<ul>
<li><a href="https://developer.mozilla.org/ko/docs/Web/Performance/Critical_rendering_path">주요 렌더링 경로 | MDN</a></li>
<li><a href="https://ko.javascript.info/script-async-defer">defer, async 스크립트 | JAVASCRITP.INFO</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Attributes/rel/preload">preload | MDN</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Glossary/Prefetch">prefetch | MDN</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/img">img | MDN</a></li>
</ul>
<h2 id="17장-캐싱"><a href="#17%EC%9E%A5-%EC%BA%90%EC%8B%B1" aria-label="17장 캐싱 permalink"></a>17장. 캐싱</h2>
<h2 id="171-시간-기반-캐싱"><a href="#171-%EC%8B%9C%EA%B0%84-%EA%B8%B0%EB%B0%98-%EC%BA%90%EC%8B%B1" aria-label="171 시간 기반 캐싱 permalink"></a>17.1 시간 기반 캐싱</h2>
<ul>
<li>서버가 파일 수정일을 <strong>Last-Modified</strong> 응답 헤더에 실는다.</li>
<li>브라우져가 파일을 캐싱하고 <strong>If-Modifed-Since</strong> 요청 헤더에 실는다.</li>
</ul>
<h2 id="172-내용-기반-캐싱"><a href="#172-%EB%82%B4%EC%9A%A9-%EA%B8%B0%EB%B0%98-%EC%BA%90%EC%8B%B1" aria-label="172 내용 기반 캐싱 permalink"></a>17.2 내용 기반 캐싱</h2>
<ul>
<li>시간 기반의 캐시는 한계가 있습니다.</li>
<li>파일 내용을 비교하는 방법을 <strong>ETag</strong>라고 합니다.</li>
<li>서버가 파일 해시값을 ETag 응답 헤더에 실는다.</li>
<li>브라우져가 파일을 캐싱하고 <strong>If-None-Match</strong> 요청 헤더에 실는다.</li>
</ul>
<h2 id="173-캐시-제어"><a href="#173-%EC%BA%90%EC%8B%9C-%EC%A0%9C%EC%96%B4" aria-label="173 캐시 제어 permalink"></a>17.3 캐시 제어</h2>
<ul>
<li>서버는 더 세밀한 캐시 정책을 <strong>Cache-Control</strong> 응답 헤더에 실는다.</li>
<li><strong>max-age</strong>: 브라우져가 자원을 일정기간 캐싱하고 서버에 접속하지 않는다.</li>
<li><strong>no-cache</strong>: 브라우져는 캐시가 신선한지 매번 서버에 접속해 확인한다.</li>
<li><strong>no-store</strong>: 브라우져는 이 자원을 캐싱하지 않는다.</li>
</ul>
<h2 id="174-기타-캐싱-헤더"><a href="#174-%EA%B8%B0%ED%83%80-%EC%BA%90%EC%8B%B1-%ED%97%A4%EB%8D%94" aria-label="174 기타 캐싱 헤더 permalink"></a>17.4 기타 캐싱 헤더</h2>
<ul>
<li><strong>Expires</strong>: 서버가 파일의 캐시 만료일을 지정하는 응답 헤더</li>
<li><strong>Vary</strong>: 서버가 클라이언트에게 캐시 식별자를 전달하는 헤더</li>
</ul>
<h2 id="175-캐싱-활용-전략"><a href="#175-%EC%BA%90%EC%8B%B1-%ED%99%9C%EC%9A%A9-%EC%A0%84%EB%9E%B5" aria-label="175 캐싱 활용 전략 permalink"></a>17.5 캐싱 활용 전략</h2>
<ul>
<li><strong>HTML이 아닌 파일</strong>: 최대한 길게 캐싱한다.</li>
<li><strong>HTML 파일</strong>: 서버에 캐시 신선도를 확인한다.</li>
<li>파일별로 Cache-Control 캐시 정책을 전달해 브라우져가 네트웍 요청을 최소화 하도록 유도한다.</li>
</ul>
<h2 id="176-중간-정리"><a href="#176-%EC%A4%91%EA%B0%84-%EC%A0%95%EB%A6%AC" aria-label="176 중간 정리 permalink"></a>17.6 중간 정리</h2>
<ul>
<li>브라우져와 서버 간의 캐싱 관련 HTTP 헤더</li>
<li>브라우져와 서버간의 HTTP 캐싱 매커니즘 정리</li>
<li>캐시를 설정할 때는 무척 신중해야 한다.</li>
</ul>
<h3 id="출처"><a href="#%EC%B6%9C%EC%B2%98" aria-label="출처 permalink"></a>출처</h3>
<ul>
<li><a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Caching">HTTP 캐싱 | MDN</a></li>
<li><a href="/2024/02/08/http-caching">HTTP 캐싱 | 김정환블로그</a></li>
<li>HTTP 완벽가이드 &gt; 7장 캐시</li>
<li>리얼월드 HTTP &gt; 2.8 캐시</li>
<li><a href="https://web.dev/articles/http-cache?hl=ko#examples">캐시로 불필요한 네트워크 요청 방지 | web.dev</a></li>
<li><a href="https://web.dev/articles/http-cache?hl=ko">HTTP 캐시로 불필요한 네트워크 요청 방지 | web.dev</a></li>
<li><a href="https://web.dev/articles/codelab-http-cache?hl=ko">HTTP 캐싱 동작 구성 | web.dev</a></li>
</ul></div></article></main></section></div></main></div></div>

김정환 블로그 RSS Feed

김정환

6편 소개 브라우져가 웹 페이지를 렌더링할 때 발생하는 HTTP 요청을 효율적으로 제어하는 다양한 기법 16장. 렌더링 최적화: 외부 리소스의 로드 시점을 제어해 웹 성능을 최적화하는 기술 17장. 캐시: 서버와 브라우저가 HTTP…

[HTTP] 6편. 성능

댓글