[JS] 자바스크립트 코드 최적화 기법 모음

"Optimizing Javascript for fun and for profit"라는 자바스크립트 최적화 관련 글의 영어 원문과 번역본을 바탕으로, 부가적인 설명을 추가하고 이해하기 쉬운 언어로 정리해 봤다. 예시 코드도 조금 더 다듬어서 개선했다.

 

 

문자열 비교 피하기 Avoid string comparisons

---

문자열 비교는 각 문자를 순차적으로 비교해야 하므로 O(n) 시간복잡도를 갖는다. 특히 문자열 enum을 사용하는 것은 성능 최적화 관점에서 피해야 할 패턴 중 하나다.

 

자바스크립트 엔진에서 정수(Integer)는 일반적으로 값으로 전달되며, 비교 연산 시 바로 값을 확인할 수 있어 빠르게 처리할 수 있다. 반면 문자열은 메모리에 저장된 위치(포인터)를 참조해 값을 가져온 후 비교하기 때문에 추가적인 메모리 액세스가 필요하고 이로 인해 더 많은 비용이 발생한다.

// 문자열 enum - 느림
enum Position {
  TOP    = 'TOP',
  BOTTOM = 'BOTTOM',
}

// 정수형 enum - 빠름
enum Position {
  TOP,    // = 0
  BOTTOM, // = 1
}

 

 

다른 형태 피하기 Avoid different shapes

---

함수 파라미터로 객체를 전달할 때, 자바스크립트 엔진은 해당 함수가 항상 동일한 형태(Shape, Hidden Class)를 가진 객체를 전달받는다고 가정하고 최적화를 시도한다. 객체의 속성 개수, 순서, 데이터 타입 등이 일정하게 유지되면 엔진이 최적화된 머신 코드를 생성하여 성능을 극대화할 수 있다.

 

반면, 다른 형태의 객체(예: 속성의 개수나 순서가 다르거나 데이터 타입이 다른 경우)를 전달하면, 엔진은 기존 최적화를 해제하거나 새로운 최적화 전략을 수립해야 한다. 이로 인해 성능 저하가 발생할 가능성이 높아진다.

 

예를 들어 런타임에 아래 함수가 { x: number, y: number } 형태의 두 객체를 전달받는다고 가정해 보자. 엔진은 이 함수가 앞으로도 동일한 형태의 객체를 받을 것이라고 추측하고, 해당 형태에 대해 최적화된 머신 코드를 생성한다.

function add(a, b) {
  return {
    x: a.x + b.x,
    y: a.y + b.y,
  };
}

const point1 = { x: 1, y: 2 };
const point2 = { x: 3, y: 4 };

console.log(add(point1, point2)); // { x: 4, y: 6 }

 

위 함수가 일관된 형태의 객체만 처리한다면 최적화가 유지된다. 하지만 아래처럼 다른 형태의 객체를 전달하면, 엔진은 최적화를 해제하거나 다시 설정해야 하므로 성능 저하가 발생할 수 있다.

const point3 = { x: 1, y: 2, z: 5 }; // 추가 속성 z 포함
console.log(add(point1, point3)); // 최적화 해제 가능

 

또한, 리액트 컴포넌트의 props를 다른 순서나 구조로 작성하는 경우에도 유사한 문제가 발생할 수 있다. 따라서, 객체의 형태를 일관되게 유지하는 것이 중요하다.

 

 

배열/객체 메서드 피하기 Avoid array/object methods

---

함수형 프로그래밍은 코드를 간결하고 가독성 있게 작성할 수 있는 장점이 있다. 그러나 Haskell, OCaml, Rust 등 함수형 코드를 효율적으로 컴파일하는 언어가 아닌 이상 명령형 코드에 비해 성능이 저하되는 경우가 많다.

 

아래 예시에서 함수형 메서드는 각 단계에서 배열의 복사본을 생성하는데, 이 복사본은 가비지 컬렉터에 의해 처리되어야 하므로 메모리 사용량이 증가한다. 또한 각 메서드 호출마다 배열을 반복 처리(N번의 연산에 대해 N번 반복) 해야 하는 단점이 존재한다.

const result = [1.5, 3.5, 5.0]
  .map((n) => Math.round(n))
  .filter((n) => n % 2 === 0)
  .reduce((a, n) => a + n, 0);

 

반면, for 루프를 사용하면 배열을 한 번만 순회하면서 동일한 작업을 수행할 수 있고, 불필요한 배열 복사가 없기 때문에 메모리 할당을 최소화할 수 있다.

let result = 0;
const numbers = [1.5, 3.5, 5.0];

for (let i = 0; i < numbers.length; i++) {
  const rounded = Math.round(numbers[i]);
  if (rounded % 2 === 0) result += rounded;
}

 

Object.values(), Object.keys(), Object.entries()와 같은 객체 메서드도 내부적으로 추가적인 메모리 할당과 데이터 접근 연산을 요구하므로 성능에 부정적인 영향을 줄 수 있다.

 

 

간접 참조 방지 Avoid indirection

---

간접 참조는 값에 직접 접근하지 않고 중간 매개체(객체, 배열 등)를 통해 접근하는 방식을 의미한다. 반대로 직접 참조는 메모리에서 값을 바로 가져오는 방식이다. 간접 참조는 유연성을 제공하지만 객체를 탐색하고 속성을 조회하는 과정에서 추가적인 메모리 접근과 연산이 발생한다. 이로 인해 루프나 반복 호출이 많은 코드에서 성능 저하를 야기할 수 있다.

 

아래 코드에서 config.maxRetries는 config 객체를 통해 값을 가져오기 때문에 간접 참조 방식이다. 이 과정에서 자바스크립트 엔진은 config 객체를 먼저 탐색한 후 maxRetries 속성을 조회한다.

const config = { maxRetries: 5 };

function retryOperation() {
  // config를 통해 간접적으로 접근
  for (let i = 0; i < config.maxRetries; i++) {
    console.log(`Retry #${i + 1}`);
  }
}

 

위처럼 반복적으로 값(maxRetries)을 참조하는 경우, 해당 값을 지역 변수로 저장하여 직접 참조 방식으로 변경하면 불필요한 객체 탐색 과정을 제거할 수 있다.

const config = {
  maxRetries: 5,
};

function retryOperation() {
  const maxRetries = config.maxRetries; // 지역 변수로 값을 직접 참조
  for (let i = 0; i < maxRetries; i++) {
    console.log(`Retry #${i + 1}`);
  }
}

 

간접 참조로 인한 성능 저하는 중첩 객체를 다룰 때 더욱 두드러진다. 아래 코드에선 app 객체에 있는 theme 값을 얻기 위해 여러 단계를 탐색하고 있다.

const app = {
  settings: {
    ui: {
      theme: 'dark',
    },
  },
};

function applyTheme() {
  console.log(app.settings.ui.theme); // 여러 단계를 거쳐 간접 참조
}

 

이 경우, 중첩된 값(theme)을 지역 변수로 저장하면 탐색 비용을 줄일 수 있고 코드 가독성도 향상된다.

const app = {
  settings: {
    ui: {
      theme: 'dark',
    },
  },
};

function applyTheme() {
  const theme = app.settings.ui.theme; // 중첩된 값을 지역 변수에 저장
  console.log(theme); // 지역 변수를 직접 참조
}

 

 

캐시 누락 방지하기 Avoid cache misses

---

CPU는 데이터를 빠르게 처리하기 위해 캐시라는 고속 메모리 공간을 사용한다. 캐시는 RAM보다 빠르지만 용량이 제한적이다. 만약 CPU가 요청한 데이터가 캐시에 없으면, 더 느린 RAM에서 데이터를 가져와야 하는 캐시 누락(Cache Miss) 현상이 발생하며 이는 성능 저하로 이어질 수 있다.

 

캐시 누락을 줄이고 CPU 성능을 극대화하기 위해 데이터 접근 방식을 최적화하거나 프리페칭(Prefetching) 같은 기술이 활용된다.

 

프리페칭 Prefetching

프리페칭은 CPU가 데이터를 미리 가져오는 전략으로, 데이터 접근 패턴이 예측 가능할 때 효과적으로 작동한다. 예를 들어, CPU가 1번 데이터를 요청했을 때, “2번 데이터도 곧 필요할 것”이라고 예상하고 미리 가져오는 방식이다. 이 방식은 캐시 누락을 줄일 수 있고, 특히 데이터를 순차적으로 접근할 때 더 빠르게 처리할 수 있다.

const K = 1024;
const length = 1 * K * K;

// length 길이의 배열을 생성하고 각 요소의 값을 순차적으로 초기화
const points = new Array(length);
for (let i = 0; i < points.length; i++) {
  points[i] = { x: 42, y: 0 };
}

// 배열을 복사한 뒤 요소 순서를 무작위로 섞음 (셔플된 배열 생성)
const shuffledPoints = shuffle(points.slice());

// 순차적 접근: 배열을 처음부터 끝까지 읽으면서 x값 합산 (빠름 / 100%)
let sequentialSum = 0;
for (let i = 0; i < points.length; i++) {
  sequentialSum += points[i].x;
}

// 무작위 접근: 셔플된 배열의 요소를 랜덤한 순서로 읽으면서 x값 합산 (느림 / 26%)
let randomSum = 0;
for (let i = 0; i < shuffledPoints.length; i++) {
  randomSum += shuffledPoints[i].x;
}

 

위 코드에서 순차적 접근은 캐시를 효율적으로 사용하므로 빠르게 실행된다. 반면, 무작위 접근은 CPU가 데이터를 예측하지 못해 캐시 누락이 더 자주 발생해서 상대적으로 느리다.

 

L1/L2/L3 캐싱

캐시는 속도와 크기에 따라 계층화되어 있다. 도서관으로 비유해 보면, 자주 참고하는 책은 책상 위에(L1 캐시), 덜 참고하는 책은 서가에(L2/L3 캐시), 그리고 나머지는 창고에(RAM) 보관한다.

 

• L1 캐시: 가장 작고 빠르며 CPU에 가장 가까운 캐시
• L2 캐시: L1보다 크고 느리지만 여전히 빠름
• L3 캐시: L2보다 크지만 상대적으로 느림
• RAM: 캐시보다 훨씬 크고 느림

 

캐시는 자주 사용하는 데이터를 저장하여 CPU가 빠르게 접근할 수 있도록 돕는다. 하지만 데이터가 캐시 크기를 초과하면 RAM에서 데이터를 가져와야 하므로 성능 저하가 발생한다.

 

🔍 Int8Array는 자바스크립트의 TypedArray 중 하나로 8비트 정수형 배열을 나타낸다. TypedArray는 이진 데이터를 효율적으로 다루기 위해 설계된 배열로, 일반 배열과 달리 고정된 크기와 단일 데이터 타입만을 허용한다. 이러한 특성 덕분에 TypedArray는 연속된 메모리 공간을 사용하여 캐시 효율성, 메모리 접근 속도, 메모리 관리 측면에서 뛰어난 성능을 제공한다.

 

Int8Array의 각 요소는 8비트 정수값(-128~127)만 저장할 수 있다. 8비트는 말 그대로 8개의 비트로 구성되며, 가장 왼쪽 비트는 부호 비트로 사용된다. 부호 비트는 숫자의 양수(0) 또는 음수(1) 여부를 나타낸다.

• 음수(2의 보수 방식): 11111111(-1)부터 10000000(-128)
• 양수: 00000000(0)부터 01111111(+127)

 

아래는 캐시와 RAM 간의 접근 속도 차이를 시뮬레이션한 코드. L1 캐시 접근이 가장 빠르고, 계층이 내려갈수록(L2, L3, RAM) 접근 속도가 점점 느려진다.

// 기본 단위 정의 (바이트 단위)
const KB = 1024 // 1킬로바이트 = 1024바이트
const MB = 1024 * KB // 1메가바이트 = 1024킬로바이트

// 대략 적인 캐시 크기와 RAM 크기 정의 (바이트 단위)
const L1  = 256 * KB // L1 캐시 크기
const L2  =   5 * MB // L2 캐시 크기
const L3  =  18 * MB // L3 캐시 크기
const RAM =  32 * MB // RAM 크기

// RAM 크기에 맞는 배열 생성 및 초기화
const buffer = new Int8Array(RAM);
buffer.fill(42);

const random = (max) => Math.floor(Math.random() * max)

// L1 캐시 접근 (가장 빠름 / 100%, 작은 크기)
let r = 0; 
for (let i = 0; i < 100000; i++) { r += buffer[random(L1)] }

// L2 캐시 접근 (L1보다 느림 / 78%, 더 큰 크기)
let r = 0; 
for (let i = 0; i < 100000; i++) { r += buffer[random(L2)] }

// L3 캐시 접근 (L2보다 느림 / 65%, 더 큰 크기)
let r = 0; 
for (let i = 0; i < 100000; i++) { r += buffer[random(L3)] }

// RAM 접근 (가장 느림 / 29%, 가장 큰 크기)
let r = 0; 
for (let i = 0; i < 100000; i++) { r += buffer[random(RAM)] }

 

결국 캐시를 효과적으로 활용하고 캐시 누락을 방지하려면 데이터를 순차적으로 접근할 수 있는 방식으로 설계하고, 데이터 크기를 캐시 크기에 맞게 조정하는 것이 중요하다.

 

 

큰 객체 피하기 Avoid large objects

---

자바스크립트 엔진은 객체의 형태(Shape)를 기반으로 최적화를 수행한다. 하지만 객체 속성 개수가 지나치게 많아지거나 구조가 복잡해지면, 엔진은 이러한 최적화를 유지하지 못하고 일반적인 해시맵(Map) 형태로 전환한다.

 

이 경우, 캐시 누락(Cache Miss) 문제가 발생할 가능성이 높아진다. 해시맵 기반 데이터 접근은 메모리 상에서 데이터를 무작위로 분산 저장하므로 캐시 적중률(Cache Hit)이 낮아지고, 이는 곧 성능 저하로 이어질 수 있다.

 

🔍 캐시 적중률: 필요한 데이터가 캐시에 이미 저장되어 있어 빠르게 접근할 수 있는 비율을 나타냄. 적중률이 높을수록 데이터 접근 속도가 빠르다고 볼 수 있음.

 

아래 코드에서 Object.keys를 사용하는 방식은 키 배열을 생성한 뒤 다시 객체를 참조하므로 추가적인 메모리 할당과 반복 작업이 필요하다. 반면 Object.values는 객체의 값 배열을 바로 반환하여 배열 생성의 오버헤드가 적어 상대적으로 더 효율적이다.

// 사용자 데이터 설정
const USERS_LENGTH = 1_000;
const byId = {};
Array.from({ length: USERS_LENGTH }).forEach((_, id) => {
  byId[id] = { id, name: "John" };
});

// 데이터 접근
let _ = 0;
// 1. key를 사용한 간접 접근 (느림 / 43%)
Object.keys(byId).forEach((id) => {
  _ += byId[id].id;
});

// 2. value를 사용한 직접 접근 (빠름 / 100%)
Object.values(byId).forEach((user) => {
  _ += user.id;
});

 

객체 크기를 100,000으로 늘리면 이러한 성능 차이는 더욱 두드러진다. 따라서 큰 객체를 자주 인덱싱하는 대신, 데이터를 미리 배열로 변환해 두는 것이 성능 개선에 유리하다.

// 사용자 데이터를 배열로 변환
const users = Array.from({ length: USERS_LENGTH }, (_, id) => ({
  id,
  name: "John",
}));

// 데이터 접근
let _ = 0;
users.forEach((user) => {
  _ += user.id;
});

 

위처럼 데이터를 특정 ID를 기준으로 자주 참조해야 하는 경우, 동일성(ID)을 가지도록 데이터를 구성하면, 별도의 키맵을 참조하지 않고도 Object.values를 활용할 수 있는 장점이 있다.

 

동일성이란 데이터에서 각 항목을 고유하게 식별할 수 있는 ID를 활용해 데이터를 조회하거나 조작하는 방식을 의미한다. 동일성을 보장하면 데이터의 일관성을 유지하면서 탐색 비용을 최소화할 수 있다.

// 동일성을 보장하는 예
const users = [
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
];

 

 

문자열 신중하게 사용하기 Use strings carefully

---

문자열은 단순해 보이지만 데이터가 클수록 데이터 복사로 인해 성능에 큰 영향을 줄 수 있다. 현대적인 엔진은 이를 최적화하기 위해 참조 기반의 문자열 연결 방식을 사용한다.

 

+ 연산자를 이용해 문자열을 연결할 때 데이터 복사가 이루어진다고 생각할 수 있지만, 실제로는 복사 대신 참조(포인터)를 활용해 각 문자열 요소를 가리킨다. 이는 불필요한 데이터 복사를 방지하기 위한 지연 평가 전략이다.

 

아래는 타입스크립트로 이 동작을 모델링한 예시.

abstract class CustomString {
  abstract value(): string[];
}

class BytesString extends CustomString {
  constructor(private bytes: string[]) {
    super();
  }

  value() {
    return this.bytes;
  }
}

class ConcatenatedString extends CustomString {
  constructor(
    private left: CustomString,
    private right: CustomString,
  ) {
    super();
  }

  value(): string[] {
    return [...this.left.value(), ...this.right.value()];
  }
}

function concat(left: CustomString, right: CustomString): ConcatenatedString {
  return new ConcatenatedString(left, right);
}

const first = new BytesString(['H', 'e', 'l', 'l', 'o', ' ']);
const second = new BytesString(['w', 'o', 'r', 'l', 'd']);

// 두 문자열을 연결하지만, 데이터 복사는 이루어지지 않음
const message = concat(first, second);
// 연결된 데이터를 사용할 때만(value() 호출) 문자 배열 생성
console.log(message.value()); // ['H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

 

위처럼 참조 기반 설계는 데이터가 실제로 필요해지는 시점에만 평가를 수행하므로 CPU와 메모리 사용량을 최소화한다. 슬라이스 연산 역시 원본 데이터를 복사하지 않고 특정 범위를 참조를 생성한다. 실제 데이터는 필요해지는 순간에만 평가된다.

class SlicedString extends CustomString {
  constructor(
    private source: CustomString,
    private start: number,
    private end: number,
  ) {
    super();
  }

  value(): string[] {
    return this.source.value().slice(this.start, this.end);
  }
}

function substring(source: CustomString, start: number, end: number): SlicedString {
  return new SlicedString(source, start, end);
}

// 0~2 인덱스 범위를 가리키는 참조 생성
const firstTwoLetters = substring(message, 0, 2);
// 참조된 범위를 평가하여 실제 문자 배열 반환
console.log(firstTwoLetters.value()); // ['H', 'e']

 

이러한 참조 기반 설계는 데이터가 불변(immutable)일 때 효과적이다. 만약 문자열 데이터를 변경한다면 복사 비용이 발생하기 시작하여 성능이 저하될 수 있다. 아래 예제에서 trimEnd() 메서드는 원본 데이터를 보호하기 위해 복사본을 먼저 생성한 후, 공백 제거 작업을 수행하고 있다.

abstract class CustomString {
  abstract value(): string[];

  trimEnd() {
    const bytes = this.value();

    // 원본 배열을 직접 수정하지 않기 위해 복사본 생성
    const result = bytes.slice();
    while (result.at(-1) === ' ') result.pop();
    return new BytesString(result);
  }
}

 

mutation과 concatenation의 성능 차이를 비교해 보면, 원본 데이터를 복사하여 데이터를 수정하는 mutation 방식이 훨씬 느리게 동작한다.

const classNames = ["primary", "selected", "active", "medium"];

// mutation 방식 (느림 / 37%)
const result = classNames
  .map((c) => `button--${c}`)
  .join(" ");

// concatenation 방식 (빠름 / 100%)
const result = classNames
  .map((c) => "button--" + c)
  .reduce((acc, c) => acc + " " + c, "");

 

자바스크립트에선 trim(), replace() 같은 메서드가 내부적으로 mutation 작업을 수행한다. 만약 대량의 문자열 처리가 필요한 경우, 이러한 메서드 사용을 피하는 게 성능에 유리할 수 있다.

 

 

전문화 사용하기 Use specialization

---

특정 사용 사례의 제약 조건에 맞게 로직을 조정하는 것을 전문화라고 한다. 특정 조건이 해당 사례에서 더 자주 발생할 가능성을 파악하고, 이를 기반으로 해당 조건에 맞게 코드를 최적화하는 것을 의미한다.

 

예를 들어, 판매자가 제품 목록에 태그를 추가해야 하는 상황을 생각해 보자. 태그가 대부분 비어있는 경우가 많다는 사실을 알고 있다면, 이 정보를 활용해 코드를 최적화할 수 있다.

// 예제 데이터
const descriptions = ["apples", "oranges", "bananas", "seven"]; // 제품 설명 목록
// 특정 제품에 대한 태그
const someTags = { apples: "::promotion::" };
// 태그가 없는 경우
const noTags = {};

// 제품 설명과 태그를 문자열로 변환하는 기본 함수
function productsToString(description, tags) {
  let result = "";
  description.forEach((product) => {
    result += product; // 제품 이름 추가
    if (tags[product]) result += tags[product]; // 태그 있으면 추가
    result += ", "; // 구분자 추가
  });
  return result;
}

// 태그가 없는 경우를 최적화한 전문화된 함수
function productsToStringSpecialized(description, tags) {
  // 태그가 없을 때 최적화된 로직 실행
  if (Object.keys(tags).length === 0) {
    let result = "";
    description.forEach((product) => {
      result += product + ", "; // 태그 없이 제품 이름만 추가
    });
    return result;
  }

  // 태그가 있을 경우 기본 함수 사용
  return productsToString(description, tags);
}

// 전문화되지 않은 함수 성능 테스트 (느림 / 85.71%)
for (let i = 0; i < 100; i++) {
  productsToString(descriptions, someTags); // 태그가 있을 때
  productsToString(descriptions, noTags); // 태그가 없을 때
  productsToString(descriptions, noTags);
  productsToString(descriptions, noTags);
  productsToString(descriptions, noTags);
}

// 전문화된 함수 성능 테스트 (빠름 / 100%)
for (let i = 0; i < 100; i++) {
  productsToStringSpecialized(descriptions, someTags); // 태그가 있을 때
  productsToStringSpecialized(descriptions, noTags); // 태그가 없을 때
  productsToStringSpecialized(descriptions, noTags);
  productsToStringSpecialized(descriptions, noTags);
  productsToStringSpecialized(descriptions, noTags);
}

 

이러한 최적화는 얼핏 보면 효과가 미미해 보일 수도 있지만, 반복적으로 실행될수록 효과가 점차 누적된다.

 

 

데이터 구조 Data structures

---

적절한 데이터 구조 선택은 프로그램 성능에 직접적인 영향을 미친다. 예를 들어, 배열은 순차적인 데이터 접근이나 크기가 작은 데이터 집합에선 효율적이지만, 데이터 크기가 커질수록 검색이나 포함 여부 확인 작업의 성능이 급격히 저하된다. 반면, Set은 내부적으로 해시 테이블을 사용하여 빠른 조회 속도를 제공하므로 검색 작업에 매우 유리하다.

 

올바른 데이터 구조를 선택하기 위해 다음과 같은 요소를 고려할 수 있다:

1. 데이터 크기와 구조
2. 작업의 빈도와 종류 (검색, 삽입, 삭제 등)
3. 메모리 사용량과 성능 간의 트레이드오프

 

잘못된 데이터 구조를 선택하면 특정 작업에서 불필요한 연산이 반복될 수 있으며, 특히 대규모 집합에선 심각한 성능 저하로 이어질 수 있다. 따라서 데이터 구조의 기본 특성을 명확히 이해하고, 요구 사항에 맞는 구조를 신중히 선택하는 것이 중요하다.

 

아래는 Array.includes와 Set.has의 성능을 비교하는 코드. 데이터셋 크기가 증가함에 따라 성능 격차가 더욱 커지는 것을 확인할 수 있다.

const measurePerformance = (label, callback, iterations = 10) => {
  const timings = [];
  for (let i = 0; i < iterations; i++) {
    const start = process.hrtime.bigint();
    callback();
    const end = process.hrtime.bigint();
    timings.push(end - start);
  }

  const total = timings.reduce((sum, t) => sum + t);
  const average = total / BigInt(iterations);

  const timingNumbers = timings.map(Number);
  const min = Math.min(...timingNumbers);
  const max = Math.max(...timingNumbers);

  console.log(`${label}: 평균 ${average}ns, 최솟값 ${min}ns, 최댓값 ${max}ns`);
};

const sizes = [1_000, 10_000, 100_000, 1_000_000, 10_000_000];

sizes.forEach((size) => {
  const userIds = Array.from({ length: size }, (_, i) => i);
  const adminIdsArray = userIds.slice(0, size / 10);
  const adminIdsSet = new Set(adminIdsArray);

  const targetValues = [0, Math.floor(size / 2), Math.floor(Math.random() * size), size - 1];

  console.group(`데이터 크기: ${size}`);
  measurePerformance('Array.includes', () => {
    for (const value of targetValues) {
      adminIdsArray.includes(value);
    }
  });
  measurePerformance('Set.has', () => {
    for (const value of targetValues) {
      adminIdsSet.has(value);
    }
  });
  console.groupEnd();
});

 

 

process.hrtime.bigint()는 Node.js 환경에서 제공하는 함수로 프로세스가 시작된 이후의 경과 시간을 나노초 단위의 BigInt를 반환한다. 브라우저에서 사용하는 performance.now()와 유사하지만 더 높은 정밀도 제공한다. 참고로 시간 단위는 초, 밀리초 외에도 마이크로초, 나노초, 피코초, 펨토초, 아토초, 젭토초 등이 있다. 각 단위는 이전 단위의 1/1000이다.

 

• 1초 (s) = 1000 밀리초 (ms)
• 1밀리초 (ms) = 1000 마이크로초 (µs)
• 1마이크로초 (µs) = 1000 나노초 (ns)
• 1나노초 (ns) = 1000 피코초 (ps)
• …

 

 

레퍼런스

---

Optimizing Javascript for fun and for profit

 

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요