브라우저, DOM, 자바스크립트의 동작

본 게시글은 개인 공부를 하면서 기록 목적으로 작성한 내용입니다.
잘못된 내용이 있다면 제보 부탁드립니다. 🙇‍♂️

---

1. 브라우저의 동작 원리

• HTML 마크업을 처리하고 DOM 트리를 빌드한다. ("무엇을" 그릴지 결정한다.)
• CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. ("어떻게" 그릴지 결정한다.)
• DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. ("화면에 그려질 것만" 결정)
• 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. ("Box-Model" 을 생성한다.)
• 개별 노드를 화면에 페인트한다.(or 래스터화)

2. DOM

• 문서 객체 모델(The Document Object Model)을 뜻하는 말로 웹에서는 수많은 이벤트(Event)가 발생하고 흐른다.
• 브라우저(user agent)로부터 발생하는 이벤트
• 사용자의 행동(interaction)에 의해 발생하는 이벤트
• DOM의 ‘변화’로 인해 발생하는 이벤트
  • 발생하는 이벤트는 그저 자바스크립트 객체일 뿐이다. 브라우저의 Event interface에 맞춰 구현된 객체인 것이다.
  • 여러 DOM Element로 구성된 하나의 웹 페이지는 Window를 최상위로 하는 트리를 생성하게 된다.
  • 결론부터 말하자면 이벤트는 이벤트 각각이 갖게 되는 전파 경로(propagation path)를 따라 전파된다.
  • 그리고 이 전파 경로는 DOM Tree 구조에서 Element의 위상(hierarchy)에 의해 결정이 된다.
• 관련 Reference
  • Naver D2 - 브라우저의 작동 원리
  • Web fundamentals - Critical-rendering-path
  • 브라우저의 Critical path (한글)

3. 자바스크립트 동작 원리

• 자바스크립트가 동작하기 위해서는 브라우저 자체에 내장 되어 있는 자바스크립트 엔진이 필요하다.
• 런타임(자바스크립트 엔진이 동작하는 과정) 시 코드를 한줄 씩 번역해서 실행(인터프리터)한다.
  • 런타임 : 자바스크립트 엔진이 동작하는 과정
  • 인터프리터 : 코드를 한줄 씩 번역해서 실행하는 것을 의미

인터프리터	- 일단, 실행을 해놓고 필요할때마다 코드를 한줄 씩 번역해서 실행한다.
	- 초반 실행하는 속도는 빠르지만, 실행하는 당시에 한줄 씩 번역해야 하기 때문에 실행 속도가 비교적 느릴 수 있다.
컴파일러	- 실행하기 전에 모든 코드를 컴퓨터가 이해할 수 있도록 실행파일을 만들어 번역하는 작업을 진행한다.
	- 처음 실행하기 전 컴파일링 단계에서 시간이 걸린다는 단점이 있지만, 한번 실행 파일을 만들어 두어서 실행속도가 빠르다는 장점이 있다.

• 브라우저 별 JavaScript 엔진

Explorer	Edge	Chrome	Safari	Firefox
Chakra	V8	V8	JavaScript Core	SpiderMonkey

• nodeJS 도 V8 엔진을 사용하며, 브라우저가 아닌 컴퓨터 환경에서도 JavaScript 언어를 사용할 수 있게 해준다.
• 자바스크립트 엔진은 ECMAScript(문법의 규격사항, 표준사항)를 통해서 각각 엔진들이 구현되어 있다.
• ECMAScript : 문법의 규격사항으로 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다.