html을 동적으로 만드는 방법은 바로 자바스크립트를 사용하는 것입니다.
그래서 자바스크립트 사용하기 위한 선언을 하는데요
이 선언 방법에 따라 전체적인 페이지 로드 속도가 좌우될 수 있는 부분이 존재합니다.
그래서 이번시간은 스크립트 선언방법과 스크립트 속성인 async 와 defer 에 대해서도 알아보겠습니다.
우선 브라우져에서 페이지 로드되는 순서를 알아보도록 하겠습니다.
1. 클라이언트 웹 페이지 접속 시 서버로 요청을 보낸다. (클라이언트는 웹 브라우저)
2. 서버에서 html파일을 응답하고 클라이언트는 html파일을 파싱한다.
3-1. DOM(Document Object Model)트리를 생성한다.
3-2. html 파싱에서 <link>의 css파일 요청이 있다면 서버에 css 파일을 요청합니다.
(스크립트 관여 부분)
3-3. 서버에서 css파일을 응답하고 클라이언트는 이를 파싱하여 CSSOM(CSS Object Model)트리를 생성합니다.
3-4. 서버에 js파일을 요청하고 서버는 이를 전송합니다.
(스크립트 관여 부분)
3-5. 클라이언트는 js파일을 파싱하여 syntax 트리를 생성합니다.
4. 생성된 DOM과 CSSOM은 결합되어 Render 트리를 만든다.
5. 디스플레이에 보여지게 된다.
대략적으로 이와같은 순서대로 로드되어 페이지가 완성하게 됩니다.
만약 전통적인 방식으로 스크립트 선언을 하는 경우 페이지 로드가 문제가 된다면 아래와 같은 몇가지 방법으로 회피할 수 있겠습니다.
1) 스크립트 선언 위치를 변경해라
위에서 말한 전통적인 방식은 <head> 와 </head> 사이에 선언하는 것을 의미하는 것이며
여기서의 위치를 </body>마지막 부분으로 변경해라 입니다.
<body>
<script>
alert('test');
</script>
<script src="/js/javascript.js"></script>
<script src="turtlecoding.org/lib/common.js"></script>
</body>
</html>
2) style의 속성인 async 와 defer 를 이용해라
다음 방법으로는 script를 선언할 때, async 속성 이나 defer 속성을 이용하는 것입니다.
그중에 defer 방식을 추천드리는데요
이방식은 아래와 같이 선언을 하며
페이지로드시에 JS 스크립트 선언부분을 만나도 JS 다운로드를 시작하지만
기존의 HTML 파서의 파싱작업은 멈추지 않습니다. 끝까지 파싱작업 완료되면
그때서야 해당되는 JS 스크립트 작업을 수행하게 됩니다.
<head>
<script defer src="/js/javascript.js"></script>
</head>
async 방식은 유사하지만 큰 차이가 있습니다.
<head>
<script async src="/js/javascript.js"></script>
</head>
defer 와 유사하게 페이지 HTML 파싱작업이 하향식으로 실행되면서
JS 스크립트를 만나게되면 JS를 다운로드 시작해도 페이지 파싱작업은 멈추지 않습니다
그러나 JS 다운로드가 끝나게 되면 HTML 파싱작업은 멈추게 되고 JS 실행을 완료한 후에
다시 HTML파싱작업을 진행하게 됩니다.
결국 페이지 로드 속도를 고민하고 고려한다면
해당 되는 스크립트 선언 위치는
(1) </body> 가 끝나는 바로 앞에서 선언하는 것
(2) 스크립트의 defer 속성을 이용해 선언하는 것
2가지 방법이 안전할 것입니다.
'테크노트 > html' 카테고리의 다른 글
| html 폼(form)태그의 GET방식과 POST방식 (0) | 2022.01.28 |
|---|---|
| html 테이블(table)태그와 리스트(list)태그를 알아보자 (0) | 2022.01.28 |
| html에서 블록(block) 태그와 인라인(inline) 태그의 차이점 (0) | 2022.01.26 |
| HTML doctype tag 선언 방법 (html 4.01, xhtml 1.0, html 5) (0) | 2022.01.25 |
| html5와 웹표준 (0) | 2022.01.25 |
댓글