[드림코딩] html에 js를 링크하는 여러가지 방법들

1. head 내부에 작성

<head>
    <script src ="main.js"></script>
</head>

위에서부터 HTML을 읽는다 (parsing html)

-> blocked 된 상태에서 js를 읽는다. (fetching/executing js)

-> 다시 HTML을 읽는다.

이 방법은 js가 용량이 크다면 웹사이트를 불러오는데까지 많은 시간이 소요된다.

<head>
</head>
<body>
    <script src ="main.js"></script>
</body>

parsing html

-> 페이지가 완료된 상태에서 js를 읽는다. (fetching/executing js)

사용자가 js가 적용되지 않은 웹사이트 (데이터나 DOM 요소가 꾸며지지 않은 상태) 를 js가 받아지기 전까지 보게 된다.

<head>
    <script asyn src ="main.js"></script>
</head>
<body>
</body>

parsing하다가 js링크를 만나면 parsing과 병렬로 js를 읽다가 js가 받아지면(fetching) 실행(executing)

-> 마저 parsing html

다운로드받는 시간을 절약할 수 있으나 js가 fetching되는 순서대로 executing되기 때문에 의도한 순서와 상관없이 js가 실행되어 순서에 의존적인 js의 경우 예상치 못한 오류를 낼 수 있다.

<head>
    <script defer src ="main.js"></script>
</head>
<body>
</body>

parsing하다가 js링크를 만나면 parsing과 병렬로 js를 fetching

-> HTML parsing이 끝나면 js를 순서대로 executing

다운로드 시간을 절약할 수 있고, js 또한 순서대로 실행되어 가장 많이 사용된다.

[코딩앙마 외] 객체 리터럴과 객체 접근법, 그리고 생성자 함수 (0)	2022.04.14
[코딩앙마 외] 객체(Object)와 프로퍼티(property) (0)	2022.04.14
[코딩앙마] 함수선언문과 함수표현식, 그리고 화살표함수 (추가) (0)	2022.04.14
[드림코딩/코딩앙마] scope와 hoisting, 그리고 TDZ (추가) (0)	2022.04.14
[드림코딩/코딩앙마] strict모드와 var/let/const (0)	2022.04.14