[javascript] <script defer =“defer”>는 정확히 어떻게 작동합니까?

진정한 답은 연기 할 수 없기 때문입니다.

개념적으로 지연 및 비동기는 다음과 같이 다릅니다.

async를 사용하면 스크립트를 차단하지 않고 백그라운드에서 다운로드 할 수 있습니다. 그런 다음 다운로드가 완료되는 순간 렌더링이 차단되고 해당 스크립트가 실행됩니다. 스크립트가 실행되면 렌더링이 다시 시작됩니다.

연기는 스크립트가 페이지에 지정된 순서대로 실행을 보장하는 주장을 제외하고, 같은 일을, 그들이 문서 후에 실행됩니다 완성 된 구문 분석이있다. 따라서 일부 스크립트는 다운로드가 완료된 후 나중에 다운로드했지만 그 앞에 나타나는 스크립트를 기다렸다가 기다릴 수 있습니다.

불행히도, 실제로 고양이 싸움의 표준으로 인해 연기자의 정의는 사양에 따라 다양하며 최신 사양에서도 유용한 보증을 제공하지 않습니다. 답변으로 여기에 와 이 문제를 보여, 브라우저는 연기 다르게 구현 :

• 특정 상황에서 일부 브라우저에는 defer스크립트 순서 가 잘못 되는 버그가 있습니다.
• 일부 브라우저 DOMContentLoaded는 defer스크립트가로드 될 때까지 이벤트를 지연 시키고 일부는 그렇지 않습니다.
• 일부 브라우저는 순종 defer에 <script>인라인 코드와없는 요소 src속성, 일부는 그것을 무시합니다.

다행히도 스펙은 비동기 오버라이드가 지연되도록 지정합니다. 따라서 모든 스크립트를 비동기로 처리하고 다음과 같이 광범위한 브라우저 지원을 얻을 수 있습니다.

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

전 세계에서 사용중인 브라우저의 98 %와 미국에서 99 %는이 접근 방식으로 차단을 피할 것입니다.

(문서 파싱이 끝날 때까지 기다려야하는 경우 이벤트 DOMContentLoaded이벤트를 듣 거나 jQuery의 편리한 .ready()기능을 사용하십시오. 어쨌든이 기능을 사용 하여 전혀 구현하지 않는 브라우저에서 정상적으로 돌아가고 싶습니다 defer.)

답변

<script defer src="external-script.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
    // Your inline scripts which uses methods from external-scripts.
});
</script>