เกริ่นนำการทำโปรไฟล์ (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() ขนาดเล็กสำหรับจับเวลาเอง
- มุ่งเน้นเฉพาะ โค้ดที่ทำงานบ่อย
- เปลี่ยนแปลงทีละอย่าง

ตัวอย่าง 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);

ฟังก์ชันช่วยจับเวลาเอง
การจับเวลาเองช่วยให้คุณครอบฟังก์ชันใด ๆ และเปรียบเทียบการทำงานแต่ละครั้งด้วยข้อมูลนำเข้าเดียวกัน
// 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;
});

ค้นหาโค้ดที่ทำงานบ่อย
ติดตาม การเรียกใช้ และ เวลา เพื่อดูว่าแอปใช้เวลาไปกับงานใด แล้วปรับปรุงฟังก์ชันที่ร้อนที่สุดก่อน
// 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);

จับเวลาก่อนเทียบกับหลัง
วัดผลก่อนและหลังการเปลี่ยนแปลง ใช้ ข้อมูลนำเข้าเดียวกัน และเปรียบเทียบเฉพาะตัวเลข
// 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);

แนวปฏิบัติที่ดีในการจับเวลา
เคล็ดลับ:
- ใช้ ข้อมูลนำเข้าเดียวกัน ในการทำงานแต่ละครั้ง
- วอร์มอัปหนึ่งครั้ง แล้วจึงวัดผล
- ลดการบันทึกระหว่างจับเวลา
- เปลี่ยนแปลง ทีละอย่าง แล้ววัดผลอีกครั้ง
- DevTools และเครื่องมือสำหรับรัน JavaScript มีเครื่องมือบันทึก ให้เริ่มจาก console.time แบบง่าย

แบบทดสอบพื้นฐาน console.time
ตรวจสอบอย่างรวดเร็ว: เครื่องมือจับเวลาอย่างรวดเร็ว

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

คำถามที่พบบ่อย
บทเรียน “เกริ่นนำการทำโปรไฟล์ (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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐาน Big-O เส้นทางร้อนกับเส้นทางเย็น (ประโยชน์สำหรับผู้เริ่มต้น)
- การหลีกเลี่ยงหน่วยความจำรั่ว — คลอเชอร์ ตัวจับเวลา และการอ้างอิง
- เกริ่นนำการทำโปรไฟล์ (Node/DevTools) — นิสัยจับเวลาเล็ก ๆ