웹 브라우저?
현대 정보화 시대에서 엄청난 정보의 양을 얻을 수 있기 위해선 전 세계 어느 컴퓨터에나 브라우저가 깔려있다. 물론 IE는 사라져 마땅하다. 브라우저의 핵심 기능은 클라이언트의
Request가 발생하면 서버의 Response를 받아 이를 브라우저에 표시한다. 아주 간단하지만 현대 웹 시장에서는 사용자가 더욱 많고 다양한 데이터를 보기 원한다. 그에 따라 웹환경은 하루가 멀다하고 빠른 발전을 이어나가고 있다.
브라우저의 동작 방식
- 클라이언트가 서버에 Request 한다.
- 서버는 다시 브라우저에 요청받은 정보를 브라우저에게 Response 한다.
- 브라우저가 서버로부터 받은 HTML, CSS, Javascript, image 파일 등을 받게 된다.
- 렌더링 엔진의Parser를 이용해 HTML, CSS데이터를 파싱하고,DOM, CSSOM을 합쳐 렌더 트리를 만든다. 만들어진 렌더 트리를 기반으로 브라우저가 페이지를 표시해준다.
그럼 자바스크립트 코드는?
1.자바스크립트 코드는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다.
2. HTML파서가 script태그를 만나면 파싱을 중단하고 자바스크립트 엔진으로 제어권한을 넘긴다.(렌더링 엔진 -> 자바스크립트 엔진 )
3.이에 실행된 자바스크립트 코드를 로드하고 파싱해서 실행한다. 자바스크립트가 실행 완료되면 다시 자바스크립트 엔진 -> 렌더링 엔진 으로 권한을 넘기고, 다시 파싱을 이어 나간다.
예제
자주 하는 실수
<html>
<head>
<title>DO NOT USE IE!</title>
<!-- CSS 파일 로딩 -->
<link href="/style.css" rel="stylesheet">
<!-- 자바스크립트 로딩 -->
<sciprt src="/app.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
이 코드에서 예전의 당신과 내가 하던 실수가 밝혀지게 된다.
잘 살펴보면 파서는 위에서부터 아래로 쭈욱 파싱을 하게 된다.
그렇다면 만약 app.js에 h1태그를 클릭하는 순간, alert('헬로 월드!')라는 이벤트를 발생하게 했다면,
자바스크립트 입장에서는 h1이라는 클래스가 없는데, 뭘 조작하라는 거야? 하고 에러를 탁 내뱉는다.
예제2
<html>
<head>
<title>DO NOT USE IE!</title>
<!-- CSS 파일 로딩 -->
<link href="/style.css" rel="stylesheet">
</head>
<body>
<h1>Hello World!</h1>
<!-- 자바스크립트 로딩 -->
<sciprt src="/app.js"></script> 이렇게 body의 하단에 script를 배치하기.
</body>
</html>
만약 이렇게 사용한다면 위에서 문제가 되던 에러가 해결 될 것이다.
여기서 우리가 알아야 할 점은 브라우저는 동기적으로 작동한다. 그저 순서대로 파싱을 하게 때문에 body의 하단 부분에 script를 배치해서 에러를 예방했다.
물론 이처럼 무조건 script가 하단에 위치하는 것만도 좋은 방법이 아니다.
만약 자바스크립트의 이펙트가 큰 웹이라면 HTML이 다 파싱되기 전에 자바스크립트를 실행해야 할 경우도 많이 있다. 이에 대해서 나온게 Async & defer 이다.
Async랑 defer는 또 뭐야?
defer
일반적으로 우리가 <script.>태그를 쓴다면 그냥 인터프리터 방식으로 한 줄씩 읽게 되지만,
defer를 사용한다면 파싱을 막지않고 </html.>태그를 만났을 때 실행한다.
defer 사용법
<script src="/defer/test.js" defer></script>
async
async 속성을 가진 스크립트는 <script.>, <script. defer>와 마찬가지로 브라우저가 해당 요소를 만났을 때 스크립트 소스를 다운한다. defer와 마찬가지로 다운로드 중에 HTML 파싱을 막지 않지만 다운로드가 완료되면 즉시 실행하고 실행하는 동안 브라우저는 HTML 파싱을 멈춘다.
async 사용법
<script src="/async/test.js" async></script>
참고하면 좋은 자료
