Hello Javascript (2)

브라우저 동작 원리

• 구글의 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임 환경인 Node.js의 등장으로 Javascript는 웹 브라우저를 벗어나 서버 사이드 어플리케이션 개발에서도 사용되는 Full stack 개발 언어가 되었다. 하지만 Javascript가 가장 많이 사용되는 분야는 역시 웹 브라우저 환경에서 동작하는 웹 페이지/애플리케이션이다.
• 대부분의 프로그래밍 언어는 운영체제(Operating System, OS) 위에서 실행되지만 웹 애플리케이션의 Javascript는 브라우저의 틀 안에서 HTML, CSS와 함께 실행된다. 따라서 Javascript는 브라우저 환경을 고려할 때 보다 효율적 프로그래밍이 가능하다.
• 브라우저의 주요 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 응답(Response)을 받아 브라우저에 표시하는 것이다. 브라우저는 서버로부터 HTML, CSS, Javascript 파일을 응답받는다. HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다.
• HTML 파서는 script 태그를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진에 제어 권한을 넘긴다. 자바스크립트 엔진의 실행이 완료된 후 브라우저가 중지했던 시점부터 DOM 생성을 재개한다. 이것은 script 태그의 위치에 의해 DOM의 생성이 지연될 수 있음을 의미한다.
• 브라우저는 아래와 같이 실행할 것이다.
1. script 요소를 만나면 웹페이지의 파싱을 잠시 중단한다.
2. src 어트리뷰트에 정의된 자바스크립트 파일을 로드한 후 파싱하고 실행한다.
3. 중단된 웹페이지의 파싱을 계속 진행한다.
• body 요소의 가장 아래에 스크립트를 위치시키는 것은 좋은 아이디어이다.
• 그 이유는 다음과 같다.
1. HTML 요소들이 스크립트 로딩 지연으로 인행 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.
2. DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생한다.

script 태그의 async/defer 어트리뷰트

• 이와같이 스크립트 로딩 지연으로 인한 병목 현상을 근본적으로 방지하기 위해 HTML5부터 script 태그에 async와 defer 어트리뷰트가 추가되었다.

<script async src="extern.js"></script>

<script defer src="extern.js"></script>

• async - 웹페이지 파싱과 외부 스크립트 파일의 다운로드가 동시에 진행된다. 스크립트는 다운로드 완료 직후 실행된다.
• defer - 웹페이지 파싱과 외부 스크립트 파일의 다운로드가 동시에 진행된다. 스크립트는 웹페이지 파싱 완료 직후 실행된다.
• async와 defer 어트리뷰트는 웹페이지 파싱과 외부 스크립트 파일의 다운로드가 동시에 진행된다는 면에서는 동일하지만 스크립트의 실행 시점이 다르다.

참고자료

• http://poiemaweb.com/js-syntax-basics