[속성공부] 페이지 로드 후, 읽을 script는 defer로! 주의사항까지 속성 정리!

defer는?

웹 페이지의 스크립트 실행을 지연시키는 데 사용한다.

이를 통해 HTML 문서의 파싱이 진행되는 동안 스크립트가 실행되지 않고, 문서의 구성이 완료된 후에 스크립트가 실행되어 페이지 로딩 성능을 향상시키고, 스크립트의 실행이 다른 자원들에 미치는 영향을 최소화하는 데 도움이 된다.

 

사용 방법

<script defer src="example.js"></script>

 

defer 사용 유무 차이점

사용하지 않을 때,

• 스크립트가 문서 파싱 중에 다운로드되고 실행되기 때문에, 스크립트의 실행이 완료될 때까지 페이지의 로딩이 중단된다.
• 스크립트가 실행되는 동안에는 페이지에서 다른 동작이 차단될 수 있다.

사용하게 되면,

• 스크립트가 문서 파싱 중에 비동기적으로 다운로드되지만, 파싱이 완료된 후에 순서대로 실행된다.
• 페이지의 로딩이 중단되지 않으며, 스크립트가 실행되는 동안에도 다른 자원들과 병렬로 로딩이 가능하다.

 

비동기라면, async는...?

async 와 defer 의 차이점

async

• 스크립트가 문서 파싱 중에 비동기적으로 다운로드되지만, 파싱이 완료된 후에 순서대로 실행된다.
• 페이지의 로딩이 중단되지 않으며, 스크립트가 실행되는 동안에도 다른 자원들과 병렬로 로딩이 가능하다.

defer

• 스크립트는 문서 파싱 중에 비동기적으로 다운로드되지만, 파싱이 완료된 후에 실행된다.
• 스크립트 간에 실행 순서가 보장된다.

 

defer 사용 시, 주의 사항!

스크립트 의존성

• defer를 사용할 때는 스크립트 간의 의존성을 고려해야 한다.
• 만약 스크립트 간에 의존성이 있는 경우, 실행 순서에 유의해야 한다.

IE에서의 동작

• Internet Explorer에서는 defer 속성이 지원되지 않는 경우가 있으므로, 해당 브라우저를 고려하여 대안을 고려해야 할 수 있다.

문서의 크기

• 큰 스크립트 파일의 경우, defer를 사용하더라도 다운로드에 시간이 걸릴 수 있다.
• 사용자 경험을 최적화하기 위해 파일 크기를 최소화하는 것이 중요하다.

 

[Link] 더 많은 정보를 위한 w3schools

HTML script defer Attribute