0Pricing
JavaScript Academy · บทเรียน

เกริ่นนำการทำโปรไฟล์ (Node/DevTools) — นิสัยจับเวลาเล็ก ๆ

ทำโปรไฟล์ทีละขั้น วัดเวลาด้วย console.time/timeEnd และตัวจับเวลาอย่างง่าย ค้นหาโค้ดเส้นทางร้อน เปลี่ยนทีละอย่าง แล้ววัดซ้ำ

เกริ่นนำการทำโปรไฟล์ (Node/DevTools) — นิสัยจับเวลาเล็ก ๆ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

เหตุใดจึงวิเคราะห์ประสิทธิภาพ

เป้าหมาย: วัดผล → เปลี่ยนแปลง → วัดผลอีกครั้ง

  • ใช้ console.time/timeEnd เพื่อจับเวลาอย่างรวดเร็ว
  • ใช้ฟังก์ชันช่วย now() ขนาดเล็กสำหรับจับเวลาเอง
  • มุ่งเน้นเฉพาะ โค้ดที่ทำงานบ่อย
  • เปลี่ยนแปลงทีละอย่าง
เกริ่นนำการทำโปรไฟล์ (Node/DevTools) — นิสัยจับเวลาเล็ก ๆ — ภาพประกอบ 1

ตัวอย่าง console.time

console.time จะแสดงว่าบล็อกที่ติดป้ายกำกับใช้เวลาทำงานนานเท่าใด เป็นจุดเริ่มต้นที่ดี

// Measure a small loop with console.time/timeEnd
console.time("sum");
let s = 0;
for (let i = 0; i < 100000; i = i + 1) {
  s = s + i;
}
console.timeEnd("sum");
console.log("sum value:", s);
เกริ่นนำการทำโปรไฟล์ (Node/DevTools) — นิสัยจับเวลาเล็ก ๆ — ภาพประกอบ 2

ฟังก์ชันช่วยจับเวลาเอง

การจับเวลาเองช่วยให้คุณครอบฟังก์ชันใด ๆ และเปรียบเทียบการทำงานแต่ละครั้งด้วยข้อมูลนำเข้าเดียวกัน

// A tiny now() helper that works in many runtimes
const now = (typeof performance !== "undefined" && performance.now)
  ? function () { return performance.now(); }
  : function () { return Date.now(); };

// Time a function manually
function timeFn(label, fn) {
  const t1 = now();
  const out = fn();
  const t2 = now();
  console.log(label + " ms:", (t2 - t1));
  return out;
}

timeFn("small work", function () {
  let x = 0;
  for (let i = 0; i < 50000; i = i + 1) { x = x + i; }
  return x;
});
เกริ่นนำการทำโปรไฟล์ (Node/DevTools) — นิสัยจับเวลาเล็ก ๆ — ภาพประกอบ 3

ค้นหาโค้ดที่ทำงานบ่อย

ติดตาม การเรียกใช้ และ เวลา เพื่อดูว่าแอปใช้เวลาไปกับงานใด แล้วปรับปรุงฟังก์ชันที่ร้อนที่สุดก่อน

// Count calls and total time to find hot spots
const metrics = { calls: 0, totalMs: 0 };

function hotWork(n) {
  const t1 = now();
  let sum = 0;
  for (let i = 0; i < n; i = i + 1) {
    sum = sum + (i % 3);
  }
  const t2 = now();
  metrics.calls = metrics.calls + 1;
  metrics.totalMs = metrics.totalMs + (t2 - t1);
  return sum;
}

// Simulate usage
for (let k = 0; k < 5; k = k + 1) {
  hotWork(80000);
}
console.log("calls:", metrics.calls, "avg ms:", metrics.totalMs / metrics.calls);
เกริ่นนำการทำโปรไฟล์ (Node/DevTools) — นิสัยจับเวลาเล็ก ๆ — ภาพประกอบ 4

จับเวลาก่อนเทียบกับหลัง

วัดผลก่อนและหลังการเปลี่ยนแปลง ใช้ ข้อมูลนำเข้าเดียวกัน และเปรียบเทียบเฉพาะตัวเลข

// Compare two approaches with the same input
const hay = [];
for (let i = 0; i < 2000; i = i + 1) { hay.push(String(i)); }

const needles = [];
for (let i = 0; i < 1000; i = i + 1) { needles.push(String(i * 2)); }

function slowIncludes() {
  let count = 0;
  for (const n of needles) {
    if (hay.includes(n)) { count = count + 1; }
  }
  return count;
}

function fastSet() {
  const set = new Set(hay);
  let count = 0;
  for (const n of needles) {
    if (set.has(n)) { count = count + 1; }
  }
  return count;
}

const c1 = timeFn("includes run", slowIncludes);
const c2 = timeFn("set.has run", fastSet);
console.log("counts:", c1, c2);
เกริ่นนำการทำโปรไฟล์ (Node/DevTools) — นิสัยจับเวลาเล็ก ๆ — ภาพประกอบ 5

แนวปฏิบัติที่ดีในการจับเวลา

เคล็ดลับ:

  • ใช้ ข้อมูลนำเข้าเดียวกัน ในการทำงานแต่ละครั้ง
  • วอร์มอัปหนึ่งครั้ง แล้วจึงวัดผล
  • ลดการบันทึกระหว่างจับเวลา
  • เปลี่ยนแปลง ทีละอย่าง แล้ววัดผลอีกครั้ง
  • DevTools และเครื่องมือสำหรับรัน JavaScript มีเครื่องมือบันทึก ให้เริ่มจาก console.time แบบง่าย
เกริ่นนำการทำโปรไฟล์ (Node/DevTools) — นิสัยจับเวลาเล็ก ๆ — ภาพประกอบ 6

แบบทดสอบพื้นฐาน console.time

ตรวจสอบอย่างรวดเร็ว: เครื่องมือจับเวลาอย่างรวดเร็ว

เกริ่นนำการทำโปรไฟล์ (Node/DevTools) — นิสัยจับเวลาเล็ก ๆ — ภาพประกอบ 7

สรุปทบทวน

สรุปทบทวน: เริ่มจาก console.time และฟังก์ชันช่วย now() ขนาดเล็ก ค้นหาโค้ดที่ทำงานบ่อย เปลี่ยนแปลงอย่างง่าย แล้ว วัดผลอีกครั้ง ด้วยข้อมูลนำเข้าเดิม

เกริ่นนำการทำโปรไฟล์ (Node/DevTools) — นิสัยจับเวลาเล็ก ๆ — ภาพประกอบ 8

คำถามที่พบบ่อย

บทเรียน “เกริ่นนำการทำโปรไฟล์ (Node/DevTools) — นิสัยจับเวลาเล็ก ๆ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เกริ่นนำการทำโปรไฟล์ (Node/DevTools) — นิสัยจับเวลาเล็ก ๆ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เกริ่นนำการทำโปรไฟล์ (Node/DevTools) — นิสัยจับเวลาเล็ก ๆ”

ทำโปรไฟล์ทีละขั้น วัดเวลาด้วย console.time/timeEnd และตัวจับเวลาอย่างง่าย ค้นหาโค้ดเส้นทางร้อน เปลี่ยนทีละอย่าง แล้ววัดซ้ำ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน

บทเรียน “เกริ่นนำการทำโปรไฟล์ (Node/DevTools) — นิสัยจับเวลาเล็ก ๆ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. พื้นฐาน Big-O เส้นทางร้อนกับเส้นทางเย็น (ประโยชน์สำหรับผู้เริ่มต้น)
  2. การหลีกเลี่ยงหน่วยความจำรั่ว — คลอเชอร์ ตัวจับเวลา และการอ้างอิง
  3. เกริ่นนำการทำโปรไฟล์ (Node/DevTools) — นิสัยจับเวลาเล็ก ๆ
← กลับไปที่ JavaScript Academy