웹 사이트 리소스를 비동기적으로 로드하는 방법

브라우저는 기본적으로 웹 사이트 리소스를 동기식으로 로드합니다.

이는 웹 브라우저가 한 번에 한 가지 작업만 수행할 수 있음을 의미합니다. 무언가를 로드(다운로드 및 실행)하면 다른 것의 로드가 차단됩니다.

1. 개념

1.1. 비동기

async를 사용하면 브라우저가 다른 작업을 수행하는 동안 지정된 JS 리소스를 다운로드한 다음 다운로드가 완료된 직후 해당 리소스를 실행할 수 있습니다.

메모

<script src="app.js" async>

독자 차단 문제를 해결하기 위해

스크립트를 최대한 빨리 실행해야 함

종속 리소스에 주의하십시오

.

1.2. 연기하다

defer를 사용하면 브라우저가 다른 작업을 수행하는 동안 지정된 JS 리소스를 다운로드한 다음 HTML 파일 렌더링이 완료된 후 해당 리소스를 실행할 수 있습니다.

메모

<script src="app.js" defer>

독자 차단 문제를 해결하기 위해

DOM에 액세스하는 스크립트에 이상적

종속 리소스에 적합함

1.3. 예압

HTML 사전 로드는 웹 페이지를 로드하는 데 곧 필요하게 될 리소스/파일(예: CSS, JS, 이미지 등)에 대한 히트를 웹 브라우저에 제공하는 데 사용되는 시스템입니다. preload 힌트는 필요한 리소스의 요소에 rel 속성 값으로 preload를 추가하여 제공됩니다.

메모

<link href="app.css" rel="preload">

접은 내용물 위에 로드하려면

글꼴, CSS, JS, 이미지, ...에 사용할 수 있습니다.

많은 콘텐츠 미리 로드

정상


예압

1.4. 서버 푸시

HTTP/2 서버 푸시를 사용하면 브라우저가 다른 작업을 수행하는 동안 지정된 리소스를 다운로드한 다음 필요할 때 해당 리소스를 실행할 수 있습니다.

메모

접은 내용물 위에 로드하려면

글꼴, CSS, JS, 이미지, ...에 사용할 수 있습니다.

서버 많은 콘텐츠 푸시

2. 비교

2.1. 비동기, 지연, 사전 로드 및 서버 푸시 간

유사점

그들은 모두 웹 사이트 리소스의 비동기 다운로드를 허용합니다.
그들은 모두 브라우저가 다른 작업을 수행할 때 지정된 리소스를 동시에 다운로드할 수 있도록 합니다.

차이점
다운로드한 파일은 다른 순서로 실행됩니다.

비동기 파일은 다운로드 직후 실행됩니다.

HTML 문서의 구문 분석이 완료된 후 지연 파일이 실행됩니다.

사전 로드 및 HTTP/2 서버 푸시 파일은 필요할 때 실행됩니다.

2.2. 사전 로드와 서버 푸시 사이

유사점

동시 다운로드

파일이 필요할 때만 실행됨

접은 내용물

위에 로드

여러 파일 형식 지원 - JS, CSS, 이미지 등

차이점

사전 로드가 웹 서버에서 해당 리소스를 다운로드하도록 요청함

서버 푸시는 이러한 요청을 할 필요가 없습니다. 이를 통해 웹 서버는 기본 웹 페이지(HTML 파일)와 함께 이러한 파일을 자동으로 보낼 수 있습니다

.

2.3. (비동기 및 지연) 대 (사전 로드 및 서버 푸시) 사이

차이점

ㅏ. 지원되는 파일 형식

비동기, 지연: JS 파일만 해당

미리 로드, 서버 푸시: CSS, JS, 이미지 등

비. 목적

async, defer: 렌더링 차단 문제를 해결하기 위해 파일 로드 방법 제어

사전 로드, 서버 푸시: 리소스를 조기에 다운로드

읽어 주셔서 감사합니다!