비동기 vs. 연기: 웹 사이트를 가장 잘 최적화하는 HTML5 스크립트 로딩 속성은 무엇입니까?

Async 및 Defer: HTML5에서 스크립트 로딩 최적화

Async 및 Defer 이해

async 및 defer 속성은 다음을 제공합니다. HTML5에서 외부 스크립트의 로드 및 실행 순서를 제어하는 ​​메커니즘

비동기 속성

• 비동기 스크립트는 로드 시 즉시 실행됩니다.
• 실행 순서는 보장되지 않습니다. 예를 들어 나중에 추가된 스크립트는 이전에 추가된 스크립트보다 먼저 실행될 수 있습니다.
• 다른 스크립트 실행에 의존하지 않는 비차단 스크립트에 유용합니다.

속성 연기

• defer가 있는 스크립트도 비동기식으로 로드되지만 초기 HTML 구문 분석 후에만 실행됩니다. 완료되었습니다.
• 실행 순서가 페이지에 나타나는 순서와 일치하는지 확인합니다.
• 페이지 렌더링에 중요하지 않은 스크립트에 적합합니다.

사이트 로드 속도에 미치는 영향

하단 페이지:

• 페이지 하단의 스크립트에 비동기를 추가하면 스크립트를 동시에 로드할 수 있으므로 로드 속도가 약간 향상될 수 있습니다.

맨 위 페이지:

• 비동기 또는 연기로 스크립트 이동 <머리> 다른 작업을 위해 메인 스레드를 확보하여 렌더링 속도를 높일 수 있습니다.
• 그러나 HTML4 브라우저에서는 지연이 발생할 수 있습니다.

페이지 하단 배치 지연

• 내부에서 defer 사용 앞에 스크립트를 배치하는 것과 유사한 결과를 얻을 수 있습니다.
• defer는 실행 순서를 보장하지만 문서 끝에 배치된 스크립트는 그렇지 않습니다.

사용 여러 스크립트를 사용하는 비동기

• 비동기를 사용하는 스크립트를 다운로드할 수 있습니다.
• 그러나 실행 순서는 보장되지 않으므로 스크립트가 서로 의존하는 경우 잠재적인 문제가 발생할 수 있습니다.
• 스크립트에 종속성이 없거나 잠재적인 경쟁 조건을 처리하지 않는지 확인하세요.

지연 vs. 비동기 vs. 상태 Quo

• Defer는 실행 순서를 유지하므로 대부분의 경우에 적합합니다.
• Async는 약간 더 빠른 로딩을 제공하지만 순서가 지정되지 않은 실행이 발생할 가능성이 있습니다.
• HTML5가 널리 채택될 때까지 HTML4 브라우저의 호환성 문제를 피하기 위해 구현을 연기하는 것이 좋습니다.

위 내용은 비동기 vs. 연기: 웹 사이트를 가장 잘 최적화하는 HTML5 스크립트 로딩 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!