브라우저가 html을 해석하는 과정
1. Loading : 불러오고
2. Parsing : html을 분석하고 DOM( Document Object Model) 트리를 만들어서 데이터를 자료 구조화함
-> 렌더링 트리 만들기
**DOM은 HTML 문서에 대한 인터페이스, java scripts로 수정 가능
3. CSS 스타일을 결정하고
4. Layout : 렌더링 트리가 생성될 때, 각 (Render)객체가 위치와 크기를 갖게 됨
5. Painting : 렌더링 트리를 탐색하면서 메모리 공간에 RGB값을 채워감
HTML안에 JS파일 불러오는 위치
어디서 불러오냐에 따라 스크립트 실행 순서와 브라우저 렌더링에 영향을 미칠 수 있다.
1. <head>에서 불러오기
html을 위에서부터 한줄씩 쭉 해석하면서 파싱을 하는데
자바 스크립트를 불러올 때 헤드에서 불러온다면
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="main.js"></script>
</head>Parsing -> 어 자바스크립트네? parsing을 멈춤 -> 필요한 자바스크립트 다운, 실행) -> 마저 Parsing
문제점 : 자바스크립트 파일이 클 경우 사용자가 오랫동안 완성되지 못한 화면을 볼 수 있음
2. </body> 앞에서 불러오기
일반적으로 쓰는 방법
<body>
<script src="main.js"></script>
</body>Parsing (페이지 준비 완료) -> 자바스크립트 다운, 실행
페이지는 빨리 볼 수 있으나
문제점 : 웹사이트가 자바스크립트에 의존적이라면 문제가 발생
3. <head> + async
자바스크립트를 만나면 병렬로 다운받고 다운이 완료되면 실행한다
실행하는 동안 Parsing을 멈추게 됨
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async src="main.js"></script>
</head>
다운받는 시간을 절약할 수 있다
문제점 :
자바스크립트가 DOM 요소를 조작한다면(쿼리 셀렉트 등) 문제 발생
페이지를 보는 데 시간이 오래 걸릴 수 있음
4. <head> + defer
Parsing을 하다가 자바 스크립트가 있으면 다운만 받고 파싱 완료 이후 실행함
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="main.js"></script>
</head>
5. 여러 스크립트를 불러올 경우
1) async
정의된 스크립트 순서에 상관없이 먼저 다운받은 스크립트를 실행한다.
a->b->c 순서로 실행해야하는데
b->a->c 순서가 될 수도 있다.
2) defer
페이지 로드가 끝나면 그때 순서대로 실행한다.
바닐라 자바 스크립트 이용시
상단에 'use strict';를 써준다
선언 안한 변수에 값을 넣는 .. 그런 flexible한 코드들을 막아준다
ECMA Script 5부터 추가되어졌다고 함.
더 빨라지고 성능 개선도 가능하다고 함
참고한 유튜브
'Web > HTML CSS JS' 카테고리의 다른 글
| Java Script - Class (0) | 2020.09.24 |
|---|---|
| Java Script - function (2) | 2020.09.23 |
| Java Script 변수타입 및 기본예제 따라하기 (0) | 2020.09.23 |
| CSS 기본 (0) | 2020.09.22 |
| HTML - 구조 및 기본 (0) | 2020.09.22 |