비동기 대 Javascript에서 지연
<script> 태그를 적어도 한 번은 접하게 될 것입니다.The
<script>tag is used to embed a client-side script (JavaScript). It either contains scripting statements, or it points to an external script file through the src attribute.
이 기사에서는
<script> 태그의 async & defer 속성에 대해 설명합니다. 그러나 그 전에 웹 페이지를 로드할 때 브라우저에서 일어나는 일에 대해 논의하겠습니다.다음 개념을 다룰 것입니다.
<script> 태그시작하자🚀🚀!!
소개
웹 페이지를 로드하면 브라우저에서 두 가지 주요 작업이 발생합니다.
스크립트 로드에는 두 부분이 포함됩니다.
<script> 요소에는 외부 파일을 가져오고 실행하는 방법과 시기를 더 잘 제어할 수 있는 async 및 defer라는 두 가지 특성이 있습니다.async and defer are boolean attributes that are used along with the
<script>tag to load the external scripts efficiently into your webpage.
일반 <script> 태그
브라우저가 HTML을 구문 분석하다가
<script> 태그를 발견했다고 가정해 보십시오.<html>
<head> ... </head>
<body>
...
<script src="script.js">
....
</body>
</html>
일반
<script> 태그의 경우 다음 단계가 수행됩니다.
비동기 속성
async 속성은 스크립트 파일이 비동기적으로 실행될 수 있음을 브라우저에 표시하는 데 사용됩니다.
<script async src="script.js">
지연 속성
defer 속성은 HTML 문서가 완전히 구문 분석된 후에만 스크립트 파일을 실행하도록 브라우저에 지시합니다.
<script defer src="script.js">
연기의 경우:
어느 것을 사용할 것인가?
async attribute does not guarantee the order of execution of scripts but defer does.
서로 의존하는 스크립트 태그에 여러 비동기 속성을 넣는 경우 비동기 속성은 이러한 스크립트가 특정 순서로 실행되는 것을 보장하지 않습니다. 코드를 깨뜨릴 수 있습니다. 따라서 이 경우 지연을 선호할 것입니다.
defer attribute is not supported in an old browser
이를 위해 HTML 파일의
<script> 태그 바로 앞에 <body> 태그를 사용하는 대체 솔루션을 사용할 수 있습니다.마무리!!
시간 내 주셔서 감사합니다 !! 함께 배우고 성장하기 위해 연결합시다.
Reference
이 문제에 관하여(비동기 대 Javascript에서 지연), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/anuradha9712/async-vs-defer-in-javascript-4k8b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
