HTML에서 javascript 동작 순서 기초 정리

티스토리 뷰

Web/HTML

HTML에서 javascript 동작 순서 기초 정리

HAN_PY 2023. 2. 5. 19:31

HTML 작성을 하고, js css를 넣어서 웹을 구성을 한다. 그리고 Reactjs 나 nextjs에서도 라이브러리를 이용해서 데이터를 넣는다. 이때 동기적으로 Javascript 파일을 가지고와서 핸들링을 많이한다. 오늘은 HTML 자체에서 js파일을 불러오는 방식에 대해 알아보도록 하자. 기초지만 쉽게 지나치는 부분이라 할 수 있다.

0. javascript 파일 불러오기

기본적으로 아래와 같이 javscript를 부르는 코드는 아무 위치에서나 사용이 가능하다.

<!DOCTYPE html>
<script src="./test0.js"></script>
<html lang="en" class="demo1">
  <head>
    <script src="./test1.js"></script>
  </head>
  <script src="./test2.js"></script>

  <body>
    <script src="./test3.js"></script>
    <div>Hanpy javascript Test</div>
    <script src="./test4.js"></script>
  </body>
  <script src="./test5.js"></script>
</html>

html 밖에서 사용해도 가능하다. javascript 파일을 불러오는 방식은 위와 같이 src를 사용해서 javascript 코드를 가져올 수 있다.

<script src="javascript경로"></script>

아니면 javascript 코드를 아래와 같이 직접 적어서 가져오는 방식도 가능하다.

<!DOCTYPE html>
<script>
  console.log('test0');
</script>
<html lang="en" class="demo1">
  <head>
    <script>
      console.log('test1');
    </script>
  </head>
  <script>
    console.log('test2');
  </script>

  <body>
    <script>
      console.log('test3');
    </script>
    <div>Hanpy javascript Test</div>
    <script>
      console.log('test4');
    </script>
  </body>
  <script>
    console.log('test5');
  </script>
</html>

상황에 따라 사용을 해주면 된다. 물론 React는 jsx 문법을 사용하기 때문에 위와는 다르다.

1. HTML에서 javascript 파싱 순서

파싱이란, 프로그램을 실행할 수 있도록 내부 포맷에 맞게 분석하고 변환하는 것을 의미한다. 웹 브라우저의 자바스크립트 엔진이 파싱하는 순서는 아래와 같다.

브라우저는 HTML 파일을 열면, 위에서 부터 순차적으로 파싱을 한다.
파싱 중에 <script> 태그를 만나면 HTML 파싱을 멈추고, script 내부의 자바스크립트 코드를 실행한다.
자바스크립트 파일 실행이 완료 되면 다시 HTML파싱을 시작한다.

실행 시간이 오래 걸리는 자바스크립트 코드를 HTML 페이지 중간에 넣으면 렌더링이 오래 걸리고, SEO에 최악의 결과를 가져온다.

2. 일반적인 script 태그 위치

기본적으로 css를 불러오는 link 는 head 요소의 자식으로 들어가고, javascript를 불러오는 script 는 body 요소가 끝나기 직전에 위치한다. css가 head로 들어가는 이유는 stylesheet를 미리 알아야 빠르게 그리는 것이 가능하기 때문에 head에 위치시켜 body를 그리기 전에 우선적으로 불러온다.

Javascript를 불러오는 script 태그를 body 끝 부분에 위치 시키는 이유는 html 관련 내용을 모두 보여준 후에 동적 js를 불러와야 html의 파싱 시간을 짧게 가져갈 수 있다. 쉽게 말하면, head 태그나 중간에 들어가면, js를 읽는 시간이 오려결러 웹페이지가 느리게 느낀다. 또한 HTML 파싱 보다 Javascript 파일이 먼저 실행되면 적용이 안되는 경우도 있다.

3. javascript 받는 시간 변경하기

DOMContentLoaded 이벤트를 사용하여 DOM 생성을 체크하는 로직을 자바스크립트 파일에 넣으면, DOM 생성을 체크해서 파일을 실행 시킬 수 있다.

document.addEventListener("DOMContentLoaded", function() { 
    // DOM생성 이후 콜백 실행
});

async

외부 js 파일을 가져올 떄는 async를 추가한다. 비동기로 가져오기 때문에 HTML 파싱이 계속 진행된다. 이떄, 중요한 것은 서로 결합되어있는 자바스크립트 파일을 async로 비동기로 불러온다면, 순서 상관 없이 실행이 될 수 있기 때문에 에러가 발생할 수 있다.

<script src="js파일 경로" async></script>

defer

async를 비동기 문제를 해결할 수 있다. 즉, 비동기로 작동하더라도 태그의 위치에 따라 순서대로 실행된다. 그리고 defer 은 DOM이 생성 된 이후에 실행하기 때문에 DOM 생성을 체크 할 필요는 없다. 따라서 아무 위치에서나 사용하면 된다.

<script>태그를 </html> 뒤에 넣기

이 방법은 DOM의 생성이 완료 된 이후에 자바스크립트 코드가 실행된다. 따라서 실행은 가능하긴 하지만, 권장하는 방식은 아니다. 위의 순서를 이해하지 못하는 경우에 일단 적어두고 사용하는 경우가 많다.

저작자표시 비영리 변경금지

'Web > HTML' 카테고리의 다른 글

[html] a 태그 (0)	2022.01.08
[html] form 태그 기초 (0)	2021.12.30
[html] 표(테이블) 만들기 (0)	2021.12.24
[html] 비디오(mp4) 영상 태크 (0)	2021.12.19
[html] 이미지 태그 기초 (0)	2021.12.16

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

AI Platform / Web

티스토리 뷰