Writing Optimized Code

What is JS Engine?

muscardinus.tistory.com/171

 

저번 시간에 우리는 JS Engine의 구동원리에 대해서 배웠다. 그리고 마무리하면서 더 빠르고 최적화된 JS Engine의 작동을 돕기 위해서 우리 자신 또한 Optimized Code를 작성해야한다고 하였다. 그렇다면 그 방법에는 어떠한 것이 있을까?

 

우선 해당 항목들의 사용을 자제하는 것을 추천한다.

- eval()

- arguments -> arguments를 직접으로 사용하는 것을 피하고, arguments.length와 arguments[i]의 형식으로 사용하자

- for in문 -> 차라리 Object.key()를 사용하자

- with

- delete

 

자 그러면 이제 시작해보자!

 

Inline Caching

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

findUser(userData);
const userData = {
  firstName: "Brittney",
  lastName: "Postman",
};
// if this findUser(userData) is called multiple times,
// then it will be optimized (inline cached) to just be 'found Brittney Postman'

Inline Caching은 Compiler가 자동적으로 수행하는 기능 중 하나이다. 만약 findUser(userData) 함수가 1억 번 반복적으로 실행된다면, Compiler는 userData객체를 1억 번 찾는 것이 아닌, "found Brittney Postman"로 함수를 대체하여 실행 속도를 대폭 향상시킨다. 

 

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;

대부분의 사람들을 위 코드를 보면서 딱히 문제가 될 것이 없다고 할 것이다. 그렇다. 실행하는 데에는 아무 문제가 없다.

Hidden Classes는 Compiler가 내부적으로 활용하는 기능 중 하나이다. obj1과 obj2를 선언할 때 Compiler는 두 객체가 동일한 hidden Classes를 공유한다고 생각한다. 하지만, 그 이후, obj1과 obj2 객체의 값을 다른 순서로 부여함으로서 Compiler가 헷가려하여, 두 객체가 동일한 Class를 공유한다고 인지하지 않게 되면서 최적화에 문제를 유발 할 수 있다. 또한, delete를 사용하는 것을 조심하라는 이유 또한, hidden Class를 변경한다고 생각하면 된다. 따라서, 최적화를 위해서는 다음과 같이 코드를 변경하는 것이 좋다. 

// more optimized version of the code.
function Animal(x, y) {
  this.a = x;
  this.b = y;
}
const obj1 = new Animal(1, 2);
const obj2 = new Animal(3, 4);

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