defer 사용하는 이유

YangJiWon·2021년 3월 5일
0

배경


<head>
  	<script src="hello.js" defer></script>
</head>
<body>
	<script src="hello.js" defer></script>
</body>
  • html 파일을 렌더링 하다가 script 태그를 만나면 서버는 자바스크립트 파일을 가져옵니다.
  • 여기서는 hello.js파일을 가져오고 실행합니다.
  • 하지만 여기서 우리는 body 부분을 모두 실행하지 않았습니다.
  • hello.js가 body에 있는 element들을 접근했다면 에러가 발생할 것 입니다.
  • 이런 에러들을 방지하기 위해 defer속성을 사용해줍니다.

defer

  • defer 속성을 작성함으로써 body까지 렌더링을 끝낸 다음에 자바스크립트 파일을 실행시킵니다.
  • 이렇게 되면 body 안의 elemenet들을 접근해도 문제가 없습니다.
profile
데이터데이터데이터!!

0개의 댓글