defer, async 스크립트

자바스크립트

자바스크립트 삽입방식

자바스크립트를 실행하는 방법은 문서안에 <script> 태그를 이용해 작성하거나 외부의 스크립트 파일을 링크하는 방식 2가지가 존재한다.

<script type="text/javascript"> //코드내용 </script>
<script type="text/javascript" src="링크주소"></script>

type="text/javascript" 부분은 HTML5에서는 생략할 수 있다.
문서의 어느 곳이든 스크립트 배치에 제한을 두지 않는다.
전자의 경우는 간단한 스크립트의 경우이거나 해당 문서에만 적용되는 코드들, 초기화등에 자주 사용된다.
후자의 경우는 반복사용되는 코드들을 파일별로 저장해두고 필요에 따라 링크해 사용되곤 한다. 이와 같은 방식이 코드의 가독성과 실행순서, 의존성들을 확인하기에 수월하기 때문에 추천되는 방식이다.

브라우저는 HTML의 구조와 CSS 스타일을 렌더링하는 도중 자바스크립트를 만나게 되면 이에 대한 해석과 구현이 완료이 완료될때까지 브라우저 렌더링을 멈추게 된다.

자바스크립트의 삽입 위치에 따라 스크립트 실행순서와 브라우저 렌더링에 영향을 미친다

<head> 
  <script> //코드내용 </script> 
</head>

브라우저 렌더링에 방해가 되어 무거운 스크립트가 실행되는 경우 오랫동안 완성되지 못한 화면을 노출하게 된다.
문서를 초기화하거나 설정하는 가벼운 스크립트들이 자주 사용된다.
문서의 DOM(Document Object Model) 구조가 필요한 스크립트의 경우 document.onload와 같은 로드 이벤트가 추가되어야 에러없이 작동된다.

...
 <script> //코드내용 </script> 
</body>

기본적으로 <script>는 인라인 코드의 경우 즉시 해석되고 실행될 수 있지만 그렇지 않은 경우는 해당 파일을 가져올 때까지 HTML 문서의 구문 분석을 중단한다.

async 속성은 브라우저에 스크립트 파일이 비동기적으로 실행될 수 있음을 나타내기 위해 사용된다.

HTML 구문 분석기는 스크립트 태그에 도달한 지점에서 스크립트를 가져오고 실행하기 위해 일시 중지 할 필요가 없다.

따라서 HTML 구문 분석과 병행하여 스크립트를 가져온 후 스크립트가 준비 될 때마다 즉시 실행이 가능하다.

그러므로 실행의 순서가 다운로드 완료 시점의 결정되므로 실행 순서가 중요한 스크립트들에 async를 사용할 때는 유의해야 한다(HTML5 spec에 async=false 속성 지정시 호출 순서대로 실행되도록 추가됨(default : true)).

<script async src="script.js">

defer 속성은 HTML 구문 분석이 완전히 완료되면 스크립트 파일을 실행하도록 브라우저에 지시한다.

<script defer src="script.js">

비동기적으로 로드된 스크립트와 마찬가지로, HTML 구문 분석이 실행되는 동안 파일을 다운로드 할 수 있다.

HTML 구문 분석이 완료되기 전에 스크립트 다운로드가 완료 되더라도 구문 분석이 완료 될 때까지 스크립트는 실행되지 않는다.

async와는 다르게 호출된 순서대로 실행된다.

이 문제에 관하여(defer, async 스크립트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gunu/defer-async-스크립트

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다