Performance Tips for V8 JavaScript

Performance Tips for V8 JavaScript

V8 is one of the fastest JS engines. But you can help it by writing code that is easy to optimize. Here are the top performance tips.

1. Keep Object Shapes Stable (Hidden Classes)

// good: same shape
function Point(x, y) {
  this.x = x;
  this.y = y;
}
const a = new Point(1, 2);
const b = new Point(3, 4);

// bad: different shapes (deoptimization)
const c = { x: 1, y: 2 };
const d = { y: 2, x: 1 }; // different order
const e = { x: 1 };
e.y = 2; // added after construction (new hidden class)
``
Initialize all properties in the constructor, in the same order, for every instance.

### 2. Keep Functions Monomorphic

```js
// good: always same types
function add(a, b) { return a + b; }
add(1, 2); add(3, 4); // monomorphic (numbers)

// bad: mixed types (deoptimization)
add(1, 2); add("a", "b"); // polymorphic (numbers and strings)
``
Pass the same types to a function. Mixed types cause deoptimization.

### 3. Use Dense Arrays

```js
// good: dense (contiguous indices)
const arr = [1, 2, 3, 4, 5];

// bad: sparse (holes)
const arr = [];
arr[0] = 1;
arr[100] = 2; // hole from 1 to 99
``
V8 optimizes dense arrays. Sparse arrays (with holes) use a slower representation.

### 4. Avoid `delete`

```js
// bad: delete changes the hidden class
delete obj.x;

// good: set to undefined or null
obj.x = null;
``
`delete` forces a hidden class transition. Set to `null` or `undefined` instead.

### 5. Avoid `eval` and `with`

`eval` and `with` prevent V8 from optimizing the enclosing function. They are also security risks. Avoid them.

### 6. Use `const` and `let`

Block-scoped variables help V8 reason about the variable's lifetime. Avoid `var` (function-scoped, hoisted with undefined).

### 7. Avoid Long-Running Synchronous Code

```js
// bad: blocks the main thread for 5 seconds
for (let i = 0; i < 1e9; i++) {}

// good: break into chunks
function chunked(items, size = 100) {
  let i = 0;
  function next() {
    const end = Math.min(i + size, items.length);
    for (; i < end; i++) process(items[i]);
    if (i < items.length) setTimeout(next, 0);
  }
  next();
}
``
### 8. Use `requestAnimationFrame` for Animations

```js
function animate() {
  // update DOM
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
``
Syncs with the browser's refresh rate. Better than `setTimeout` for visual updates.

### 9. Debounce and Throttle Rapid Events

```js
const onScroll = throttle(() => updateLayout(), 100);
window.addEventListener("scroll", onScroll);
``
Limit how often expensive handlers run on rapid events (scroll, resize, mousemove).

### 10. Use Web Workers for Heavy Computation

```js
const worker = new Worker("heavy.js");
worker.postMessage(data);
worker.onmessage = (e) => console.log(e.data);
``
Move heavy computation off the main thread. The UI stays responsive.

### The Takeaway

Help V8: keep object shapes stable (same constructor, same order), keep functions monomorphic (same types), use dense arrays, avoid delete/eval/with, use const/let, break long tasks into chunks, use requestAnimationFrame for animations, debounce/throttle rapid events, and use Web Workers for heavy computation.