HTML 스크립트 태그에서 비동기 및 지연 속성을 모두 사용할 수 있습니까?

defer및 둘 다 사용하여 다음 JavaScript 코드를로드하고 싶습니다 async.

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

defer는 Internet Explorer 5.5 이상에서 지원 되므로 CanIUse.com 에서 볼 수 있듯이 비동기를 사용할 수없는 경우 지연을 사용하여 정상적으로 폴백하고 싶습니다. 비동기 나는 그것이 사용 가능할 때 사용하는 것이 더 낫다고 생각하지만 Internet Explorer 10까지는 지원되지 않습니다.

내 질문은 위의 코드가 유효한 HTML입니까? 그렇지 않은 경우 JavaScript를 사용 하여이 상황을 만들 수 있습니까?deferasync 사용할 수 없을 때 스크립트 수 있습니까?

사양에서 : https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#attr-script-async

지연 (비동기 아님) 만 지원하는 레거시 웹 브라우저가 기본값 인 동기 차단 동작 대신 지연 동작으로 폴백되도록 비동기 특성이 지정된 경우에도 defer 특성을 지정할 수 있습니다.

문제는 그것이 무엇을 기대하겠습니까? async 와 defer 가 모두 있으면 스크립트가 지연되고 브라우저가 유휴 상태 일 때 DOMContentLoaded 후에 만 ​​실행될 것으로 예상하지만 사양을 올바르게 읽는 경우 async 가 설정되고 스크립트가로드 되면 defer 가 무시되는 것처럼 보입니다. 비동기식으로 사용 가능한 즉시 실행되며 DOMContentLoaded 이전에있을 수 있으며 다른 리소스를 차단할 수 있습니다.

이러한 속성을 사용하여 선택할 수있는 세 가지 모드가 있습니다. async 속성이있는 경우 스크립트는 사용 가능한 즉시 비동기 적으로 실행됩니다. async 속성이 없지만 defer 속성이있는 경우 페이지가 구문 분석을 완료하면 스크립트가 실행됩니다. 속성이 없으면 사용자 에이전트가 페이지 구문 분석을 계속하기 전에 스크립트를 가져 와서 즉시 실행합니다.

https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#attr-script-async

불행히도 지정되면 defer무시됩니다.asyncasync 항상 더 높은 우선 순위를 갖습니다. (적어도 Chrome에서는. 솔직히 다른 브라우저에서는 테스트하지 않았지만 결과는 같을 것이라고 생각합니다.)

그리고 개인적 defer으로 무시 되는 것이 매우 나쁘다고 생각합니다 . 페이지 콘텐츠를로드하기 전에도 JS를 최대한 빨리 초기화하려는 상황을 상상해 봅시다. 그러나 우리는이 스크립트가 필요한 나머지 스크립트보다 먼저 초기화되기를 원합니다. defer대기열 에서 첫 번째 여야합니다 . 그러나 불행히도 이것은 작동하지 않습니다.

<!-- we want "jQuery" ASAP and still in "defer" queue. But defer is ignored. -->
<script src="jquery.min.js" async defer></script>

<!-- this doesn't blocks the content and can wait the full page load, but requires "jQuery" -->
<script src="some_jquery_plugin.min.js" defer></script>

이 샘플에서 "some_jquery_plugin.min.js"는 jQuery를로드하기 전에로드 및 실행할 수 있으며 실패합니다. :(

따라서 문제를 해결하는 방법에는 두 가지가 있습니다. defer지시문 만 사용 하거나 종속 된 모든 자바 스크립트 파일을 단일 JS로 병합하는 것입니다.

예, 유효한 HTML이며 예상대로 작동합니다.

모든 W3C 호환 브라우저는 비동기 속성 을 인식하고 스크립트를 올바르게 처리하는 반면 레거시 IE 버전은 지연 속성 을 인식 합니다.

두 속성 모두 부울 이기 때문에 값 을 할당 할 필요가 없습니다 .