TIL : Javascript 실행 방법 총정리!

군밤먹으면서코딩·2021년 5월 14일

javascript

목록 보기

4/16

javascript 포함 방법

<!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="main.js"></script>
    </head>
    <body></body>
</html>

브라우저가 html파일을 다운받을 때, 위에서 부터 한 줄 한 줄 읽으면서 내려오게 된다. 이 때, script 부분을 만나면 javascript를 다운로드 받게 된되는 것.
이렇게 한 줄, 한 줄 읽으면서 이해한 것(parsing하는 것)을 css와 결합하여 dom 요소를 생성하게 된다.
그런데, <script> 부분을 위와 같이 입력해 주었을 경우, 문제점이 생길 수 있다. 만약 내가 작성한 js 파일이 어어어어ㅓㅓㅓㅁ청 크다면!?
js파일을 다운 받는 시간이 길어지면서 사용자에게 노출되는 시간도 그만큼 지연될 것이다!!!
왜냐면 필요한 js 파일을 서버에서 모두 다운 받고 실행(fetching -> excuting) 한 이후에 parsing을 계속 이어가기 때문이다!

따라서 이와 같이 header에 <script>를 추가하는 것은 좋지 않다!

body 끝 부분에 추가

<!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>
  </head>
  <body>
      <div>blah~ blah</div>
      <script src="main.js"></script>
  </body>
</html>

요렇게 하면 어떨까!!
브라우저가 html을 다운받아 쭈우욱~ parsing 하면서, page가 준비된 이후에 js를 다운 받는 방식!
여기서도 단점이 존재! 사용자가 페이지(html)을 빠르게 볼 수 있는 이점은 존재하지만, 역시나 javascript를 fetching(가져오고) excuting 하기 까지는 여전히 시간이 소요된다. ( 내가 의도한 페이지를 온전히 보여주기 까지는 여전히 딜레이가 걸릴 가능성이 존재한다는 것!)

따라서 이 방법도 Nope!!

async

<!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" />
      <script async src="main.js"></script>
      <title>Document</title>
  </head>
  <body>
      <div>blah~ blah</div>
  </body>
</html>

async는 boolean 타입으로 선언만 해주면 true로 인식!
이 방식은 브라우저가 html을 쭈욱 parsing 하다가 async를 만나는 순간 병렬적으로 이를 실행한다!
javascript파일을 다운받아!! 해놓고 계속 자기 할 일을 하는 것(parsing)
이 때, javascript 파일을 모두 다운 받은 이후 parsing을 멈추고 javasciprt를 실행시킨다.
javasciprt를 모두 실행한 이후, 다시 html 마저 parsing!

장단점

이 방식에도 단점이 존재한다.
body태그 하단에 <script>를 위치시키는 것 보다 시간은 단축 시킬 수 있다는 장점!
그러나 html parsing을 중단하고 js를 실행시키는 것이기 때문에 미처 html로 정의하지 못한 부분을 js가 호출하는 경우가 발생 할 수 있다! (아래와 같은 경우!)
또한 여러 js 파일을 다운로드 받을 경우, 순서가 보장되지 않는 단점도 존재한다.
순서가 아닌, 먼저 다운로드 완료된 js파일을 먼저 실행 시켜 버린다!

  document.querySelector()

그리고 body태그 하단에 위치한 것 보다 나을 뿐이지 여전히 사용자가 의미 있는 페이지를 보기 까지는 딜레이 발생 가능성 존재

defer

  <!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" />
        <script defer src="main.js"></script>
        <title>Document</title>
    </head>
    <body>
        <div>blah~ blah</div>
    </body>
</html>

async 대신에 defer를 넣는 경우!
async 처럼 js파일을 모두 다운 받은 경우 parsing을 멈추지 않는다!
병렬적으로 js파일을 다운로드 시키고 html파일을 모두 받은 이후 js 파일을 실행!
또한, 여러 js파일을 다운받더라도 모두 다운받고 순차적으로 실행을 하기 때문에 async에서는 보장받지 못한 js파일의 실행 순서도 보장할 수 있다!