HTML 스크립트 태그에서 비동기 및 지연 속성을 모두 사용할 수 있습니까?
defer및 둘 다 사용하여 다음 JavaScript 코드를로드하고 싶습니다 async.
<script defer async src="/js/somescript.js"></script>
defer는 Internet Explorer 5.5 이상에서 지원 되므로 CanIUse.com 에서 볼 수 있듯이 비동기를 사용할 수없는 경우 지연을 사용하여 정상적으로 폴백하고 싶습니다. 비동기 나는 그것이 사용 가능할 때 사용하는 것이 더 낫다고 생각하지만 Internet Explorer 10까지는 지원되지 않습니다.
내 질문은 위의 코드가 유효한 HTML입니까? 그렇지 않은 경우 JavaScript를 사용할 수 없을 defer때 스크립트 에서 사용하도록 정상적으로 폴백하는 JavaScript를 사용하여 이러한 상황을 만들 async수 있습니까?
사양에서 : https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#attr-script-async
defer 특성은 비동기 특성이 지정된 경우에도 지정 될 수 있으며, 이는 지연 만 지원하고 비동기가 아닌 레거시 웹 브라우저가 기본값 인 동기 차단 동작 대신 지연 동작으로 대체되도록합니다.
문제는 그것이 무엇을 기대하겠습니까? 두 경우 비동기 및 연기가 존재하는 I 스크립트가 연기 기대하고 브라우저가 유휴 상태 인 경우에만 DOMContentLoaded 후에 실행,하지만 난 사양을 읽고 있어요 경우 바로 그것처럼 보이는 연기 하면 무시됩니다 비동기를 설정하고 스크립트가로드 비동기식으로 사용 가능한 즉시 실행되며 DOMContentLoaded 이전 일 수 있으며 다른 리소스를 차단할 수 있습니다.
이러한 속성을 사용하여 선택할 수있는 세 가지 가능한 모드가 있습니다. async 속성이있는 경우 스크립트는 사용 가능한 즉시 비동기 적으로 실행됩니다. async 속성이 없지만 defer 속성이있는 경우 페이지가 구문 분석을 완료하면 스크립트가 실행됩니다. 속성이 없으면 사용자 에이전트가 페이지 구문 분석을 계속하기 전에 스크립트를 가져 와서 즉시 실행합니다.
https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#attr-script-async
예, 유효한 HTML이며 예상대로 작동합니다.
모든 W3C 호환 브라우저는 비동기 속성 을 인식하고 스크립트를 올바르게 처리하는 반면 레거시 IE 버전은 지연 속성 을 인식 합니다.
두 속성 모두 부울 이기 때문에 값 을 할당 할 필요가 없습니다 .
불행히도 지정되면 defer무시 async되며 async항상 더 높은 우선 순위를 갖습니다. (적어도 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로 병합하는 것입니다.
'Programing' 카테고리의 다른 글
| 키보드 단축키를 사용하여 Intellij에서 파일을 닫는 방법은 무엇입니까? (0) | 2020.12.15 |
|---|---|
| 자바의 FIFO 클래스 (0) | 2020.12.15 |
| PostgreSQL에서 외래 키가있는 행 삭제 (0) | 2020.12.15 |
| Get path and query string from URL using javascript (0) | 2020.12.15 |
| PHPStorm 새 파일 브랜딩 비활성화 (0) | 2020.12.15 |