Javascript Engine

자바스크립트 엔진은 컴퓨터가 이해할 수 있도록 javascript 파일을 변환합니다.

V8 engine

  1. parse the code(Parser)
  2. form Abstract syntax tree(AST) https://astexplorer.net/
  3. interpreter(바로 bytecode를 만듬, bytecode는 기계어가 아님, bytecode는 바로 실행할 때 필요함)
  4. profiler (monitor, 어떻게 최적화할지 살펴 봄)
  5. compiler
  6. optimized code (run faster)

javscript가 interpreter 언어인지 compile 언어인지는 구현에 달려있다.

최적화 방법

최적화 방해 요소(사용 주의)
https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments

  1. eval()
  2. arguments
  3. for in
  4. with
  5. delete

V8 엔진 최적화 방법

  1. Hidden classes
  2. Inline caching

Inline caching

function findUser(user) {
  return `${user.firstName}, ${user.lastName}`;
}

const userData {
  firstName: "jinsu"
  lastName : "Sang"
}

findUser(userData)
findUser(userData) // 앞에서 실행한 결과를 가져옴

Optimizing dynamic Javascript with inline caches
https://github.com/sq/JSIL/wiki/Optimizing-dynamic-JavaScript-with-inline-caches

hidden classes

function Animal(x, y) {
  this.x = x;
  this.y = y;
}
const obj1 = new Animal(1, 2);
const obj2 = new Animal(3, 4);

// 새로운 속성 추가
obj1.a = 30;
obj1.b = 100;

obj2.b = 30;
obj2.a = 100;

// 속성 삭제
delete obj1.a;

obj1은 [x, y, a, b] 순서로 값을 가지고 obj2는 [x, y, b, a] 순서로 값을 가집니다. 자바스크립트는 동적 언어로 런타임 도중 값이 변할 수 있습니다. 그래서 히든 클래스를 사용해 이전 데이터 구조를 저장해 놓습니다. 히든 클래스 예시에서 히든 클래스는 obj1, obj2에 다른 속성을 부여하면서 분기합니다.

참조
https://meetup.toast.com/posts/78
https://richardartoul.github.io/jekyll/update/2015/04/26/hidden-classes.html

WebAssembly

웹 어셈블리는 표준 이진 실행 포맷입니다. 웹 어셈블리는 고성능 애플리케이션을 웹 페이지나 다른 환경에서도 실행될 수 있도록 하였다.

Call Stack, Memory Heap

const number = 610; // allocate memory for number
const string = 'text'; // allocate memory for a string
const human = {
  // allocate memory for an object and its values
  first: 'jinsu',
  last: 'jinsu',
};

// Heap Memory에 정렬되지 않은 형태로 저장합니다.

function subtractTwo(num) {
  return num - 2;
}

function calculate() {
  const sum = 4 + 5;
  return subtractTwo(sum);
}

calculate();

// call stack in memory
/*
2. subtractTwo
1. calcuate
*/

Stack Overflow

function inception() {
  inception();
}
inception();
// output: Uncaught RangeError: Maximum call stack size exceeded

Garbage Collection and Memory Leaks

가비지 콜렉션은 사용하고 쓸모없어진 메모리를 청소하는 역할을 합니다. 자바스크립트에서는 mark and sweep 알고리즘을 사용한다. 메모리 주소를 참조하고 있는 객체나 변수과 해당 객체나 변수를 참조하고 있는 객체나 변수를 mark하고 mark되지 않은 객체나 변수를 sweep 합니다.

// Memory Leaks example
let array = [];
for (let i = 3; i > 0; i++) {
  array.push(i--);
}
// 구글 크롬에서 실행시 오류가 발생합니다.

// Memory Leaks 전역변수
var a = 1;
var b = 2;
var c = 3;

// 이벤트 리스너 (페이지 종료시 이벤트 리스너를 삭제하지 않으면 이벤트 리스너를 위해 필요한 메모리를 페이지에 들어올 때마다 확보하게 됩니다.)
var element = document.getElementById('button');
element.addEventListener('click', onClick);

// setInterval
setInterval(() => {
  // setInterval가 주기적으로 실행되면서 계속 메모리를 추가 확보합니다.
});

싱글 스레드

싱글스레드는 한 명령 집합만을 한번에 실행한다는 것이다. call stack 하나를 소유해서 여러 작업을 동시에 하지 못하고 한번에 한 작업만을 수행합니다. 그러므로 자바스크립트는 동기적(Synchronous)으로 움직입니다.

javascript runtime

WebAPI는 웹이 기기 하드웨어나 데이터 저장소에 접근할 수 있도록 하는 기기 호환과 API모음을 나타내는 단어입니다. webAPI는 비동기적(Asynchronous)으로 움직입니다.
https://developer.mozilla.org/ko/docs/WebAPI

console.log('1');
setTimeout(() => {
  console.log('2');
}, 1000); // 0 ms 여도 결과는 같다!!
console.log('3');
// 1
// 3
// 2

자바스크립트 런타임 예시 사이트
http://latentflip.com/

자바스크립트 런타임 작동 방식을 보면 call stack에 작업이 동기적으로 쌓이지만 Web Apis 에게 수행하는 작업을 맡기고 call stack에 쌓인 작업들을 마무리합니다. Web Apis가 끝낸 작업은 Callback Queue에 들어가고 Call Stack이 비어있는 상태인지 확인하고 Call stack에 쌓이게 됩니다.

function a() {
  b();
}

function b() {
  c();
}

function c() {
  setTimeout(d, 5000);
  setTimeout(d, 5000);
  setTimeout(d, 5000);
}

function d() {
  console.log('Hi');
  setTimeout(e, 5000);
  setTimeout(e, 5000);
}

function e() {
  console.log('hello');
}

a();

Node.js

자바스크립트 엔진과 런타임은 다릅니다. 클래식에 비유하면 자바스크립트 코드는 악보, 엔진은 지휘자, 런타임은 지휘자, 악보, 악기 등을 포함한 악단이라고 생각하면 쉽습니다.
Node.js는 브라우저 자바스크립트 런타임과 비슷하지만 브라우저에서 사용하는 window가 아닌 global을 사용함으로서 브라우저를 벗어나 서버에서도 자바스크립트가 작동할 수 있도록 합니다.
Node.js는 non-blocking event driven asynchronous I/O 기반 서버 사이드 플랫폼입니다.

node.js 런타임 이해를 위한 자료

How does JavaScript work in the browser and node?
A visualization of JavaScript runtime, callback queue, and event loop, and Web APIs. Nothing major technical here. - Uday Hiwarale
https://medium.com/jspoint/how-javascript-works-in-browser-and-node-ab7d0d09ac2f

Philip Roberts: 어쨌든 이벤트 루프는 무엇입니까?
https://www.youtube.com/watch?time_continue=38&v=8aGhZQkoFbQ&feature=emb_title

Jake Archibald: 루프 속
https://www.youtube.com/watch?v=cCOL7MC4Pl0

'Javascript' 카테고리의 다른 글

javascript) this에 대해서  (0) 2020.09.13

+ Recent posts