Ep5. <script> 작성 방법

hyobin·2022년 5월 19일

JavaScript frontend script web 자바스크립트

자바스크립트 기초

목록 보기

5/16

안녕하세요😎

이번 시간에는 자바스크립트 코드는 어느 위치에 삽입하고 어떻게 작성해야 하는지에 대해 자세하게 배워보도록하겠습니다.

script 태그

지난 시간, 우리는 자바스크립트로 작성한 프로그램을 '스크립트' 라고 부르며,
스크립트는 HTML 파일 내부에 작성 가능하다고 배웠습니다.

이번 시간에는 이 스크립트를 어떻게 작성하고, 어느 위치에 작성해야하는지에 대해 알아보겠습니다.

내부 스크립트

스크립트는 <script> (script 태그) 를 이용해 HTML 문서의 대부분의 위치에 삽입할 수 있습니다.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div>JAVASCRIPT</div>
        <script>
            alert("HELLO WORLD!");
        </script>
    </body>
</html>

script 태그 에는 위의 예제와 같이 자바스크립트 코드가 들어가며, 브라우저는 script 태그를 만나면 안에 작성된 자바스크립트 코드를 자동으로 처리합니다.

이렇게 script 태그에 자바스크립트 코드를 작성하는 방법도 있지만, 자바스크립트 코드의 양이 많아지게 되면 가독성 뿐만아니라 코드 수정 삭제 등 코드의 변경에 문제가 생기게 됩니다.

외부 스크립트

자바스크립트 코드의 양이 많은 경우, 자바스크립트 코드를 script 태그 안에 전부 작성하기 보다는 여러개의 자바스크립트 파일로 기능별로 나누어 작성해서 관리하는 것이 편리합니다.

별도의 파일로 작성된 자바스크립트 파일은 다음과 같이 HTML에 삽입할 수 있습니다.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div>JAVASCRIPT</div>
        <script src="main.js"></script>
    </body>
</html>

src 속성은 자바스크립트 파일이 위치한 경로를 나타냅니다.
src 값으로는 절대경로, 상대경로 뿐만아니라 URL 전체를 작성하는 것도 가능합니다.

script 로딩 전략

이렇게 스크립트는 위에서 배운 것과 같이 HTML에 삽입 가능합니다.

그럼, 스크립트는 HTML의 어느 위치에 삽입해야 문제없이, 적절한 시점에 불러올 수 있을까요?

이에 대한 답을 얻기 위해서는 브라우저의 동작 방식을 이해하고 있어야합니다.
첫번째 시간에 배웠던 브라우저 렌더링 순서를 다시 되짚어 보겠습니다.

HTML 을 전달받으면 HTML 파서를 통해 DOM 트리 형성
Style Sheets 파싱 후 스타일 규칙 생성
DOM 트리와 생성된 스타일 규칙 Attachment
Render 트리 형성 후 Layout, Painting
Display

스크립트의 삽입 위치는 브라우저의 렌더링 첫 번째 순서인 브라우저가 HTML을 전달받으면 HTML 파싱 후 DOM 트리를 생성하는 시점과 관련이있습니다.

<!DOCTYPE html>
<html>
    <head> </head>
    <body>
        <div></div>
    </body>
</html>

브라우저 렌더링 첫 번째 순서를 주목하면서, 위의 HTML 코드를 예시로 스크립트를 HTML의 중간과 맨 마지막에 넣어보고 렌더링 과정을 비교해보겠습니다.

HTML 중간에 위치

먼저, 위의 그림처럼 HTML 태그들을 읽어나가는 도중 script 태그를 만난다면,
브라우저는 HTML 파싱을 중단하고 자바스크립트 파일을 로드 후 실행하는 작업을 하게됩니다.

즉, HTML을 읽어오는 과정에서 자바스크립트 파일을 로드 후 실행하는 작업을 위해 HTML 파싱작업이 중단되어,
최종단계인 Display 단계까지 지연이 발생하게 됩니다.

뿐만아니라, 브라우저가 DOM 트리를 형성하기 전에 자바스크립트 파일이 로드되었기 때문에
형성되지 않은 DOM 트리의 조작을 시도하게 될 경우 오류가 발생할 수 있습니다.

HTML 맨 마지막에 위치

그렇다면 이번엔 위의 그림과 같이 body 태그 하단에 script 태그가 위치한 경우를 살펴보겠습니다.

브라우저는 자바스크립트 파일을 받아오기 전에 HTML을 전부 파싱하기 때문에 지연 없이 Display 가능해, 사용자가 빠르게 화면을 볼 수 있게 됩니다.

또한 DOM 트리를 생성한 후 자바스크립트 파일을 로드하기 때문에 생성되지 않은 DOM 트리를 조작할 가능성이 없어 오류가 발생하지 않습니다.

결론적으로 스크립트 파일은 body 태그의 맨 마지막에 넣어야하며 이유는 다음과 같습니다.

HTML 파싱이 중단되지 않아 지연없이 Display 된다.

생성되지 않은 DOM 트리를 조작할 일이 없다.

이렇게 일반적으로 스크립트 요소를 HTML 본문의 맨 마지막 (</body> 앞) 에 배치하면 문제가 발생하지 않지만,
많은 자바스크립트 파일을 포함하는 사이트의 경우에는 성능 저하 문제가 발생할 수도 있습니다.

모든 HTML을 읽은 후 스크립트를 불러와서 즉, DOM을 모두 불러오기 전에는 스크립트의 로딩과 실행이 완전하게 중단되기 때문입니다.

자바스크립트 파일이 많이 포함된 사이트의 성능 저하 문제를 해결하기 위해서는 script의 async와 defer라는 두 가지 속성이 있습니다.

하나씩 살펴보겠습니다.

async

async 속성은 비동기적으로 여러 스크립트를 로드하고 실행합니다.

위의 그림과 같이, async 속성이 적용된 스크립트는 스크립트 로딩이 완료되는 즉시 DOM 생성을 멈추고 비동기적으로 불러온 스크립트 파일을 해석합니다.

이러한 특성 때문에 async 스크립트는 불러오는데 서로 다른 시간이 걸리는 async 스크립트가 있다면, 먼저 로드가 완료되는 스크립트가 먼저 실행이 됩니다.

따라서 DOM에 접근하는 스크립트를 async 방식으로 불러오는 것은 권장하지 않으며, 스크립트의 실행 순서를 조정하지 못하므로 실행순서가 서로 영향이 있는 스크립트들을 사용할때는 주의해야합니다.

때문에 async 는 DOM 에 직접 접근하지 않거나 다른 스크립트에 의존하지 않는 스크립트들을 독립적으로 실행해야할 때 효과적으로 사용됩니다.

defer

다음은 defer 속성을 살펴보겠습니다.

defer 스크립트 또한 async 스크립트와 마찬가지로 HTML 파싱과 동시에 스크립트 로드가 이루어집니다.

async 스크립트와 다른점은 스크립트가 로드된 즉시 실행되는 것이 아니라 모든 DOM 이 생성된 후 실행되고,
스크립트가 선언된 순서대로 실행이 되기 때문에 실행 순서가 보장된다는 점 입니다.

defer 속성이 적용된 스크립트는 기본적으로 DOM의 모든 요소에 접근 가능하고 스크립트 실행 순서가 보장되어 있어, 유용하게 사용할 수 있습니다.

이번시간에는 스크립트를 HTML 문서 어느 위치에 넣어야 할지, 그리고 웹 페이지에 따라 어떤 속성값을 적용시켜 작성해야 하는지에 대해 알아보았습니다.

다음시간에는 자바스크립트의 변수와 상수에 대해 배워보도록 하겠습니다.

감사합니다🤗

🙏참고 & 출처
https://ko.javascript.info/script-async-defer
https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript#%EC%9B%B9_%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90_javascript%EB%A5%BC_%EC%96%B4%EB%96%BB%EA%B2%8C_%EB%84%A3%EB%82%98%EC%9A%94