목차
- 브라우저가 HTML, CSS, JS 등을 읽는 순서
- async
- defer
- use strict
1.브라우저가 HTML, CSS, JS 등을 읽는 순서
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="main.js"></script>
</head>
<body>
</body>
</html>브라우저가 맨위에서 부터 HTML 태그를 하나씩 parsing(분석) 하던 중에 자바스크립트 태그를 만나면 HTML 태그를 parsing 하는 것을 중단(blocked)하고 해당 자바스크립트 태그들을 서버에서 다운(fetching) 받아서 실행(executing)을 한 다음 나머지 HTML 태그들을 parsing 하게 된다.
-> 이렇게 하면 발생할 수 있는 문제점은 무엇일까?
: 다운 받을 JS 파일의 용량이 크고 사용자의 인터넷 환경이 열악하다면, 사용자는 웹사이트를 보는데까지 많은 시간이 걸릴 것이다.
ex) HTML 파싱(1초) -> JS 파일 다운로드(10분) -> JS 파일 실행(1초) -> 나머지 HTML 파싱(1초) -> 사용자에게 해당 페이지를 보여줌
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
<script src="main.js"></script>
</body>
</html>위의 문제점에 대한 해결방법으로 먼저 HTML을 모두 parsing 한 다음 맨 마지막에 JS 파일을 다운로드 받고 실행시키면 사용자가 기본적인 HTML 태그만으로 구성된 페이지는 빨리 볼 수 있다는 장점은 있지만 해당 웹사이트가 자바스크립트에 매우 의존적인 사이트라면 JS 파일을 다운로드 받고 실행하는 과정에서 시간이 걸린다는 단점이 있다.
ex) HTML 전체 파싱(2초) -> JS 파일 다운로드(10분) -> JS 파일 실행(1초) -> 사용자에게 해당 페이지를 보여줌
2. async
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script async src="a.js"></script>
<script async src="b.js"></script>
<script async src="c.js"></script>
</head>
<body>
<div></div>
</body>
</html>HTML을 파싱하다가 자바스크립트에 async가 있으면 병렬처리로 HTML 태그 파싱작업과 해당 자바스크립트의 fetching(다운로드)작업을 하다가 fetching 작업이 끝나면 HTML 파싱하는 것을 멈추고 executing(실행) 한 다음 나머지 HTML 태그들을 파싱한다.
(자바스크립트 태그들의 순서에 상관없이 먼저 다운로드가 끝난 JS 파일이 먼저 실행됨)
-> 이렇게 하면 장단점은 무엇일까?
장점 : HTML을 파싱하는 작업을 하는 동안에 JS 파일을 다운로드 받을 수 있으므로 시간 절약이 가능하다.
단점 : JS 파일 다운로드가 끝나고 JS 태그를 실행 중에 아직 파싱되지 않은 HTML 태그를 조작 할려고 한다면 문제가 발생된다.
3. defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script defer src="a.js"></script>
<script defer src="b.js"></script>
<script defer src="c.js"></script>
</head>
<body>
<div></div>
</body>
</html>HTML 파싱하는 동안 JS 파일을 다운로드 받는 방식으로 HTML 파싱 작업이 모두 끝나고 나서 다운로드 받은 JS 파일을 executing(실행)하게 된다.
(맨 위에 있는 순서대로 차례대로 실행 하게 됨 a.js -> b.js -> c.js )
4. use strict
: ECMA Script 5 부터 추가된 기능으로 JS 파일 맨위에 'use strict'(소문자) 키워드를 넣어주면 비상식 적인 문법을 쓸 수 없게 제한 시켜줌
ex) a = 10 (선언되지 않은 a 라는 변수에 값을 넣음)
'프로그래밍 언어' 카테고리의 다른 글
| 싱글스레드와 멀티스레드의 장단점 (0) | 2022.03.03 |
|---|---|
| 자바에서 지역변수가 초기화 되지 않는 이유? (0) | 2022.03.02 |
| websocket (0) | 2021.03.16 |
| 람다식 (0) | 2021.03.07 |
| 쓰레드 (0) | 2021.03.04 |
