비동기 vs. 연기: 스크립트 로딩에 대한 간단한 설명

웹사이트에 JavaScript를 로드할 때 다양한 로드 방법이 웹사이트의 성능과 동작에 어떤 영향을 미칠 수 있는지 이해하는 것이 중요합니다. JavaScript는 주로 기본 로딩 방법인 async 및 defer를 사용하여 다양한 방법으로 로드할 수 있습니다. 이러한 각 방법에는 고유한 특성과 사용 사례가 있습니다. 이 게시물에서는 프로젝트에 대해 정보에 입각한 결정을 내리는 데 도움이 되는 세 가지 방법을 살펴보겠습니다.

기본 로딩

기본적으로 JavaScript 파일은 HTML 문서에 포함될 때 동기식으로 로드됩니다. 이는 계속하기 전에 브라우저가 JavaScript 파일을 다운로드하고 실행하기 위해 HTML 문서 구문 분석을 일시 중지한다는 것을 의미합니다.

기본 방법을 사용하여 스크립트를 포함하는 일반적인 방법은 다음과 같습니다.

<script src="script.js"></script>

비동기 로딩

비동기 속성을 사용하면 브라우저가 HTML 문서를 계속 구문 분석하는 동안 JavaScript 파일을 비동기적으로 다운로드할 수 있습니다. 스크립트가 다운로드되면 HTML 구문 분석이 완료되기 전에 즉시 실행됩니다.

<script src="script.js" async></script>

로딩 연기

defer 속성도 JavaScript 파일을 비동기적으로 다운로드하지만 중요한 차이점은 HTML 문서가 완전히 구문 분석된 후에만 스크립트가 실행된다는 것입니다.

<script src="script.js" defer></script>

세 가지 방법 비교

빠른 팁

1. 중요하지 않은 스크립트에는 비동기 사용: DOM에 의존하지 않는 분석, 광고 및 기타 타사 통합과 같은 스크립트의 경우.
2. DOM 종속 스크립트에 defer 사용: DOM을 조작하거나 특정 순서로 실행해야 하는 스크립트의 경우.
3. 기본 스크립트 로딩 최소화: 대용량 스크립트나 비동기적으로 로드할 수 있는 스크립트의 경우 기본 동기 로딩을 피하세요.
4. 본문 하단에 스크립트 로드: 기본 로딩 동작을 사용해야 하는 경우