반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="valina.js"></script>
<!-- js 파일 용량이 크거나 용량이 큰 경우 화면이 나오는 데 까지 속도가 느리다.-->
<!-- parsing HTML → block(fetching js | executing js) → parsing HTML -->
<script async src="valina.js"></script>
<!-- 비동기 처리로 js 다운 받는데 시간 절약을 할 수 있지만 아직 파싱중인데 중간에 멈춰버리거나
해당 DOM 요소가 만들어지지 않았는데 그걸 가지고 조작하는 함수가 있는 경우 치명적이다. -->
<!-- parsing HTML →→→→→→→→→ block (executing js) → parsing HTML -->
<!-- | fecthing js | -->
<script defer src="valina.js"></script>
<!-- 비동기 처리로 js 다운 받고 HTML 다 그려진 후에 js를 실행 시키기 때문에 비동기적으로 다운 시간 절약과
async의 문제도 해결할 수 있다. (가장 추천) -->
<!-- parsing HTML →→→→→→→→→→→→→→→→ block (executing js) -->
<!-- | fecthing js | -->
</head>
<body>
<script src="valina.js"></script>
<!-- 화면을 빨리 볼 수 있는 장점은 있지만 js로 구현한 이벤트 핸들러는 다운 받을 때까지 사용 불가 -->
<!-- parsing HTML → NonBlock(fetching js | executing js) -->
</body>
</html>
출처 : 드림코딩
반응형