简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

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

Linda Hamilton
풀어 주다： 2024-11-08 08:29:02
원래의
636명이 탐색했습니다.

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

Async vs. Defer: A Simple Explanation of Script Loading

기본 로딩

기본적으로 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>
로그인 후 복사

세 가지 방법 비교

Async vs. Defer: A Simple Explanation of Script Loading

빠른 팁

  1. 중요하지 않은 스크립트에는 비동기 사용: DOM에 의존하지 않는 분석, 광고 및 기타 타사 통합과 같은 스크립트의 경우.
  2. DOM 종속 스크립트에 defer 사용: DOM을 조작하거나 특정 순서로 실행해야 하는 스크립트의 경우.
  3. 기본 스크립트 로딩 최소화: 대용량 스크립트나 비동기적으로 로드할 수 있는 스크립트의 경우 기본 동기 로딩을 피하세요.
  4. 본문 하단에 스크립트 로드: 기본 로딩 동작을 사용해야 하는 경우
    인기 튜토리얼
    더>
    관련 튜토리얼
    인기 추천
    최신 강좌
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！