1. Javascript Engine

1.1 활용

인간이 자바스크립트로 작성한 파일을 컴퓨터가 읽도록 도와주는 역할

1.2 자바스크립트 엔진구조

• parser : Lexical Analysis(코드를 token 단위로 쪼개 이해가능한 언어로 변경)
• AST : Abstract Syntax Tree, parser에서 분해된 token 들을 tree 구조로 변경한다.
  • AST Explorer(시각화 사이트) : https://astexplorer.net/

변환 방식

• 인터프리터 : 코드를 한 줄 한 줄 읽어내려가며 한 줄씩 bytecode로 변환
• 컴파일러 : 코드를 통째로 묶어 해석하고 파일 전체를 기계어로 컴파일하여 변환

• 기계어 (Machine Code)는 CPU로 입력되어 코드가 실행된다.

• JIT Compiler : 인터프리터와 컴파일러 방식을 혼합한 것으로 v8엔진에서 사용된다.

1. AST를 통해 Tree 구조로 변환된 코드가 최초 인터프리터(Ignition, v8에서 쓰임)에 전달된다. 인터프리터는 Bytecode로 즉시 변환한다.
2. 인터프리터가 코드를 변환하면서 브라우저에게 특정 작업을 지시하는 동안, Profiler는 입력 받은 코드에서 최적화 가능한 부분을 찾아 기록한다.
3. 최적화 가능 부분을 기록한 profiler는 이를 컴파일러에게 전다라고, 컴파일러는 인터프리터에 의해 실시간으로 웹사이트가 구동되는 동안 필요한 부분을 기계어로 변환해 최적화한다.
4. 최적화된 코드를 수행할 차례가 되면, bytecode 대신 컴파일러가 변환한 최적화된 코드가 그 자리를 대체해 실행한다.
-> 이에 의해 코드가 읽으면 읽을수록 중복된 내용은 캐싱처리하여 매우 빨라진다.

• 참고자료 : https://soldonii.tistory.com/52

2. DOM, BOM

<BOM, DOM 구조> 이미지 출처: https://www.splessons.com/lesson/javascript-bom/

2.1 BOM(Browser Object Model)

• 자바스크립트가 웹브라우저와 소통하기 위해 만들어진 모델이다.
• 웹 브라우저의 창, 프레임 등 추상화홰 프로그래밍으로 제어할 수 있도록 제공하는 수단이다. 전역객체인 windows 객체의 프로퍼티, 메소드들을 이용해 제어한다.

• window : 메인 브라우저 윈도우
• window.navigator : 브라우저에 대한 정보(버전정보 etc)
• window.screen : 사용자 화면
• window.history : 현재 url
• window.frames : 브라우저 윈도우를 차지하고 있는 프레임들
• window.document : 메인 브라우저에 표시된 HTML 문서

2.2 DOM(Document Object Model)

• XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스로 문서 객체 모델이라고 한다.
• 브라우저가 웹페이지를 내부적으로 표현하는 모델로 프로그래밍 언어가 문서 내의 각각 요소에 접근하는 방법을 제공해 문서의 구조, 스타일, 내용 등을 변경하도록 돕는다.(BODY안의 내용을 제어한다)

• 출처: https://snd-snd.tistory.com/59 [Formoat's Open Blog]