개발공부 임고미

[JavaScript] script 로드하기 (async 와 defer) 본문

퍼블리싱/html css js

[JavaScript] script 로드하기 (async 와 defer)

임고미 2020. 12. 21. 18:04
728x90
300x250

1. head에 로드

2.body에 하단에 로드

3. head 안에 async 와 defer

브라우저는 한줄 한줄 읽어 내려가므로,

1. head

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./main.css">
  <script src="./javascript/main.js"></script>
 
  <title>Document</title>
</head>


head에 로드를 하게 되면 script의 크기가 커졌을때 로드가 느려지므로, 사용자는 페이지를 느리게 볼 수 밖에 없음

2. body 하단

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./main.css">
    <script src="./javascript/main.js"></script>
 
    <title>Document</title>
  </head>
  <body>
    <p>본문입니다.</p>
  	<script src="./javascript/main.js"></script>
  </body>
</html>

 하단에 로드를 하게되면, 페이지는 빨리 읽어질 순 있겠으나, 스크립트를 통해 불러오는 부분같은건 여전히 느리게 보임

3-1. Head 안에 script async  
병렬로 다운 

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link rel="stylesheet" href="./main.css">
  <script async src="./javascript/main1.js"></script>
  <script async src="./javascript/main2.js"></script>
  <script async src="./javascript/main3.js"></script>
 
  <title>Document</title>
</head>

- 전제) 스크립트의 크기 : main2 > main1 > main3
- 다운로드 완료 순서 및 실행순서: main2 > main1 > main3

*  병렬적으로 다운받아 다운받는 속도는 줄이겠지만, 해당 스크립트에서 뒤에 로드되는 html 부분을 선택하고 있었다면 ,
아직 정의 되어있지 않아 부분이므로 오류가 날것입니다.

*  스크립트가 다운되기만하면 실행됩니다.
따라서, a, b, c 가 서로 의존적인 스크립트였다면, 크기가 작은 거부터 로드 완료 -> 실행
이었기 때문에 서로 정의가 안맞아서 오류가납니다.

 

 

3-2. Head 안에 script defer 
병렬로 다운 

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link rel="stylesheet" href="./main.css">
  <script defer src="./javascript/main1.js"></script>
  <script defer src="./javascript/main2.js"></script>
  <script defer src="./javascript/main3.js"></script>
 
  <title>Document</title>
</head>

- 전제) 스크립트의 크기 : main2 > main1 > main3
- 다운로드 완료 순서 및 실행순서: main1 > main2> main3

html이 다 다운이 되면 스크립트를 실행해줍니다. - (가장 좋은 방법)

다운 완료된 시점이 달라도, 내가 정의해준 순서에 맞게 실행을 시켜줍니다.

 

 

728x90
300x250

'퍼블리싱 > html css js' 카테고리의 다른 글

[JavaScript] null과 undefined  (0) 2020.12.21
[JavaScript] 호이스팅  (0) 2020.12.21
[JavaScript] toLocaleString() 활용하기  (0) 2020.12.21
[CSS] 언어별 폰트 다르게 적용하기 ( unicode-range )  (0) 2020.12.20
[Javascript] parseInt() / Number()를 알아보자  (0) 2020.10.06
'퍼블리싱/html css js' Related Articles more
Comments