HTML5 defer와 async의 차이점을 간략하게 소개합니다.

아래 편집기에서는 HTML5 연기와 비동기의 차이점에 대해 간략하게 설명합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다.

HTML 페이지에 Javascript를 삽입하는 주요 방법은 3f1c4e4b6b16bbbd69b2ee476dc4f83a 이 요소는 Netscape에서 생성되었으며 Netscape Navigator 2에서 처음 구현되었습니다. 나중에 이 요소는 공식 HTML 사양에 추가되었습니다. HTML4.01은 defer 및 async를 포함하여 3f1c4e4b6b16bbbd69b2ee476dc4f83a에 대해 6개의 속성 을 정의합니다. defer와 async는 모두 선택 사항이며 외부 스크립트 파일에만 유효합니다.

1. 브라우저가 defer 또는 async 없이 스크립트를 구문 분석하는 경우:

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

브라우저가 로드되고 실행됩니다. "즉시"는 스크립트 태그 아래에 문서 요소를 렌더링하기 전을 의미하며, 이는 문서 요소의 후속 로드를 기다리지 않고 읽자마자 로드하고 실행함을 의미합니다.

2. 브라우저가 스크립트를 구문 분석하고 비동기가 있는 경우:

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

브라우저가 즉시 다운로드합니다. 하지만 다른 리소스를 다운로드하거나 다른 스크립트가 로드되기를 기다리는 등 페이지의 다른 작업을 방해하지는 않습니다. 후속 문서 요소를 로드하고 렌더링하는 프로세스는 main.js의 로드 및 실행과 병렬로(비동기적으로) 발생합니다.

async는 스크립트가 나타나는 순서대로 실행을 보장하지 않습니다. 따라서 두 스크립트가 서로 의존하지 않도록 사전에 확인하는 것이 매우 중요합니다. 페이지의 다른 콘텐츠에 대해서는 비동기 스크립트가 로드 중에 DOM을 수정하지 않는 것이 좋습니다.

비동기 스크립트는 반드시 페이지의 load 이벤트 전에 실행되지만 DOMContentLoaded 이벤트가 트리거되기 전이나 후에 실행될 수도 있습니다. 비동기 스크립트를 지원하는 브라우저에는 Firefox 3.6, Safari 5 및 Chrome이 있습니다.

3. 브라우저가 스크립트를 구문 분석하고 defer가 있는 경우:

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

는 스크립트가 지연된다는 의미입니다. 문서가 완전히 구문 분석되어 표시될 때까지 실행되지 않습니다. 후속 문서 요소를 로드하는 프로세스는 main.js 로드와 동시에(비동기적으로) 수행됩니다. HTML5 사양에서는 스크립트가 나타나는 순서대로 실행되도록 요구하므로 첫 번째 지연된 스크립트가 두 번째 지연된 스크립트보다 먼저 실행되고 두 스크립트 모두 DOMContentLoaded 이벤트 전에 실행됩니다. 실제로 지연 스크립트는 반드시 순서대로 실행되는 것은 아니며 DOMContentLoaded 이벤트가 트리거되기 전에 반드시 실행되는 것도 아니므로 지연 스크립트를 하나만 포함하는 것이 가장 좋습니다.

IE4~IE7도 내장 스크립트에 대한 defer 속성을 지원하지만, IE8 이상 버전에서는 HTML5에서 지정한 동작을 완벽하게 지원합니다.

IE4, Firefox 3.5, Safari 5 및 Chrome은 defer 속성을 지원하는 최초의 브라우저입니다. 다른 브라우저는 이 속성을 무시하고 스크립트를 정상적으로 처리합니다. 이러한 이유로 지연된 스크립트를 페이지 하단에 배치하는 것이 여전히 최선의 선택입니다.

파란색 선은 네트워크 읽기를 나타내고 빨간색 선은 실행 시간을 나타내며 둘 다 스크립트에 대한 것입니다.

이 그림은 다음 사항을 알려줍니다.

defer와 async는 네트워크 읽기(다운로드)에서 동일하고 둘 다 비동기(비교)입니다. HTML 구문 분석)

두 가지의 차이점은 스크립트를 다운로드한 후 실행하는 시점에 있습니다. 확실히 defer는 애플리케이션 스크립트 로드 및 실행에 대한 요구 사항에 가장 가깝습니다.

defer와 관련하여 이 내용은 무엇입니까? 그림에서는 로딩 순서대로 스크립트를 실행한다는 점을 활용해야 합니다.

비동기는 비순차적 실행의 대가입니다. 실행은 밀접하게 연결되어 있으므로 선언 순서에 관계없이 로드되는 한 즉시 실행됩니다.

신중하게 생각해 보세요. 비동기는 애플리케이션 스크립트에 그다지 유용하지 않습니다. (가장 낮은 수준의 순차 실행이라도) 종속성을 전혀 고려하지 않지만 어떤 스크립트에도 의존하지 않거나 가장 일반적인 예: Google Analytics

위 내용은 HTML5 defer와 async의 차이점을 간략하게 소개합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!