Udemy_JavaScript: The Advanced JavaScript Concepts (2021) 강의를 바탕으로 메모한 내용입니다.

Browser Structure

Web API
브라우저에서 자바스크립트 엔진과 함께 연동되어 돌아가는 web의 일부분이다.

• DOM 관련 document
• window 관련 setTimeout, setInterval 등
• AJAX 요청 관련 fetch, XMLHttpRequest 등

또한 Event Loop, Callback(Task) Queue, Job(Micro) Queue등이 있다.

JavaScript Engine
자바스크립트를 코드를 이해하고 실행하기 위한 소프트웨어로써,
대표적으로 V8엔진이 크롬브라우저와 안드로이드에 탑재된 자바스크립트 엔진이다.

아래에서 V8엔진의 작동원리에 대해서 더 이야기하겠다.

V8 Engine

best most optimum way to run the JavaScript engine.
mix and mathces. Just In Time

구글이 주도하여 만든 C++로 작성된 고성능의 자바스크립트 & 웹 어셈블리 엔진으로써, 브라우저 뿐만 아니라 Node.js의 런타임으로도 사용할 수 있다.

V8엔진의 작동원리: Interpreter & Compiler

Parser코드를 token단위로 잘게 쪼개서

AST(Abstract Syntax Tree) 트리구조를 만든다.

Interpreter가 트리를 한 줄 한 줄씩 읽으면서 Byte code로 변환한다.

동일한 코드가 반복되서 Interpreter가 처리하기에는 비효율적인 코드다 싶으면 브라우저가 컴파일러에게 일을 맡긴다.

Profiler 가 구석에서 코드를 최적화할 수 있는 방법을 기록하고 있다가 Compiler 에게 이를 전달해준다.

Compiler는 오케이! 내가 최적화해줄게 하면서,
Profiler가 넘겨준 정보를 토대로, 파일 전체를 읽은 다음에 몽땅 기계어로 변환한다.

⇒ interpreter 즉시 실행(Byte code) + Compiler 최적화(Optimized code)

하지만 Compiler는 불완전해서 역할을 반대로 수행할 수도 있다.
그래서 우리가 처음부터 최적화코드로 작성할 줄 알아야 한다.

---

Inerpreter

interpreter will take this code line by line and spit out bite code

한 줄 한 줄 읽으면서 변환한다. # high-level language

장점

There's no compilation step before you can start running your code.

An interpreter is a natural fit for something like Javascript.

And we want that JavaScript to execute right away because our users are going to be waiting on the web.

So being able to interpret javascript and run it as fast as possible.

단점

optimization 최적화 X

a lot of javascript but it'll get slower and slower and slower

when you're running the same code more than once.

even though it gives us the same result it can get really really slow

//ex
function someCalculation(x, y) {
  return x + y;
}

for (let i = 0; i < 10000; i++) {
  someCalculation(5, 3);
}
                        

Compiler

compiler might take this code and go through this and spit out machine code

file전체를 기계어로 번역한 다음 변환한다.

장점

자바스크립트의 단점을 보완할 수 있다. ⇒ optimization 최적화

Well it can actually just simplified this code and instead of calling this function multiple times

a compiler doesn't need to repeat the translation for each pass

단점

즉시 실행이 아니라 전체를 다 읽어야 하기 때문에,
초기 속도가 느리다.

Babel + TypeScript

다른 언어로 변환하는 역할을 한다.

---

Babel

is a Javascript compiler that takes your modern JS code and returns  browser compatible JS (older JS code).

Typescript

is a superset of Javascript that compiles down to Javascript.