JavaScript Performance: เทคนิคการเขียน JS ให้เร็วทะลุนรก

const orders = [
  /* 1000 items */
];
const users = [
  /* 1000 items */
];

// วนลูป order (1000 รอบ)
// ข้างในวนหา user (เฉลี่ย 500 รอบ)
// รวม = 500,000 operations!
const result = orders.map((order) => ({
  ...order,
  user: users.find((u) => u.id === order.userId),
}));

// สร้าง Map ทีเดียว (1000 operations)
const userMap = new Map(users.map((u) => [u.id, u]));

// วนลูป order (1000 รอบ) x หาใน map (1 operation)
// รวม = 2,000 operations (เร็วกว่า 250 เท่า!)
const result = orders.map((order) => ({
  ...order,
  user: userMap.get(order.userId),
}));

const box1 = document.getElementById("box1");
const box2 = document.getElementById("box2");

box1.style.width = "100px"; // เขียน
console.log(box1.offsetWidth); // อ่าน -> บังคับ Reflow ทันที!

box2.style.width = "100px"; // เขียน
console.log(box2.offsetWidth); // อ่าน -> บังคับ Reflow อีกรอบ!

// เขียนรวดเดียว (Browser จะ batch การเปลี่ยน style ไว้)
box1.style.width = "100px";
box2.style.width = "100px";

// อ่านทีเดียว (Browser คำนวณ Reflow แค่ครั้งเดียว)
console.log(box1.offsetWidth);
console.log(box2.offsetWidth);

for (let i = 0; i < 10000; i++) {
  // ต้องวิ่งหา config -> settings -> value หมื่นรอบ
  process(app.config.settings.value);
}

// วิ่งหาทีเดียว
const value = app.config.settings.value;

for (let i = 0; i < 10000; i++) {
  process(value); // ใช้ตัวแปรโดยตรง เร็วกว่าเห็นๆ
}

const blockedIds = [/* 10,000 IDs */];
// ต้องไล่เช็คทีละตัวจนกว่าจะเจอ
if (blockedIds.includes(currentId)) { ... }

const blockedSet = new Set(blockedIds);
// เช็คเปรี้ยงเดียวรู้เลย ไม่ว่าข้อมูลจะเยอะแค่ไหน
if (blockedSet.has(currentId)) { ... }