Performance API

Performance API: วัดประสิทธิภาพเว็บแอปพลิเคชันของคุณ

ในโลกของการพัฒนาเว็บแอปพลิเคชัน ประสิทธิภาพ (Performance) เป็นสิ่งสำคัญอย่างยิ่ง ผู้ใช้คาดหวังว่าเว็บไซต์และแอปพลิเคชันจะโหลดได้อย่างรวดเร็ว ตอบสนองต่อการใช้งานได้อย่างราบรื่น และมอบประสบการณ์ที่ดีโดยรวม Performance API คือชุดของเครื่องมือที่ JavaScript มอบให้ เพื่อช่วยให้นักพัฒนาสามารถวัดและวิเคราะห์ประสิทธิภาพของเว็บแอปพลิเคชันได้อย่างละเอียด ทำให้สามารถระบุจุดที่ต้องปรับปรุงและเพิ่มประสิทธิภาพได้

บทความนี้จะพาคุณไปสำรวจ Performance API ใน JavaScript โดยจะครอบคลุมหัวข้อหลักดังนี้:

• performance.now(): การวัดเวลาที่มีความแม่นยำสูง
• performance.mark() และ performance.measure(): การกำหนดจุดวัดและวัดระยะเวลา
• Resource Timing API: การวิเคราะห์เวลาในการโหลดทรัพยากรต่างๆ

performance.now(): การวัดเวลาที่มีความแม่นยำสูง

performance.now() เป็นฟังก์ชันที่ให้ค่า timestamp เป็นทศนิยม (floating-point number) ที่มีความแม่นยำสูง โดยวัดจากเวลาที่หน้าเว็บเริ่มโหลด (navigation start) ค่าที่ได้จะเป็นหน่วยมิลลิวินาที (milliseconds) ฟังก์ชันนี้มีประโยชน์อย่างมากในการวัดระยะเวลาของส่วนต่างๆ ในโค้ดของคุณได้อย่างแม่นยำ

const startTime = performance.now();

// โค้ดที่ต้องการวัดประสิทธิภาพ
for (let i = 0; i < 1000000; i++) {
  // ทำอะไรบางอย่าง
}

const endTime = performance.now();
const duration = endTime - startTime;

console.log(`ระยะเวลาที่ใช้: ${duration} milliseconds`);

เหตุผลเชิงออกแบบ: ทำไมต้องใช้ performance.now() แทนที่จะใช้ Date.now()? Date.now() ให้ค่า timestamp เป็นจำนวนเต็ม (integer) ซึ่งมีความแม่นยำน้อยกว่า performance.now() ที่ให้ค่าเป็นทศนิยม ทำให้ performance.now() เหมาะสมกว่าสำหรับการวัดระยะเวลาที่ต้องการความแม่นยำสูง เช่น การวัดเวลาในการประมวลผลของฟังก์ชัน หรือการ render หน้าเว็บ

แนวปฏิบัติที่ดี: ควรใช้ performance.now() เสมอเมื่อต้องการวัดระยะเวลาที่ต้องการความแม่นยำสูง และควรหลีกเลี่ยงการใช้ Date.now() ในกรณีดังกล่าว

performance.mark() และ performance.measure(): การกำหนดจุดวัดและวัดระยะเวลา

performance.mark() และ performance.measure() เป็นฟังก์ชันที่ทำงานร่วมกัน เพื่อช่วยให้คุณสามารถกำหนดจุดวัด (mark) ในโค้ดของคุณ และวัดระยะเวลา (measure) ระหว่างจุดวัดเหล่านั้นได้ง่ายขึ้น

• performance.mark(markName): สร้าง mark ที่มีชื่อ markName ใน timeline ของ performance
• performance.measure(measureName, startMark, endMark): สร้าง measure ที่มีชื่อ measureName โดยวัดระยะเวลาจาก startMark ถึง endMark

performance.mark('start');

// โค้ดที่ต้องการวัดประสิทธิภาพ
for (let i = 0; i < 1000000; i++) {
  // ทำอะไรบางอย่าง
}

performance.mark('end');

performance.measure('myMeasurement', 'start', 'end');

const measurement = performance.getEntriesByName('myMeasurement')[0];
console.log(`ระยะเวลาที่ใช้: ${measurement.duration} milliseconds`);

เหตุผลเชิงออกแบบ: การใช้ performance.mark() และ performance.measure() ช่วยให้โค้ดของคุณอ่านง่ายขึ้น และสามารถจัดการการวัดประสิทธิภาพได้ดีกว่าการใช้ performance.now() โดยตรง นอกจากนี้ ยังสามารถใช้ DevTools ในเบราว์เซอร์เพื่อวิเคราะห์ marks และ measures ที่สร้างขึ้นได้โดยละเอียด

แนวปฏิบัติที่ดี:

• ใช้ชื่อที่มีความหมายสำหรับ marks และ measures เพื่อให้ง่ายต่อการเข้าใจและการวิเคราะห์
• ใช้ DevTools เพื่อวิเคราะห์ marks และ measures ที่สร้างขึ้น
• พิจารณาใช้ performance.clearMarks() และ performance.clearMeasures() เพื่อล้าง marks และ measures ที่ไม่จำเป็น เพื่อหลีกเลี่ยง memory leaks

Resource Timing API: การวิเคราะห์เวลาในการโหลดทรัพยากรต่างๆ

Resource Timing API เป็นส่วนหนึ่งของ Performance API ที่ช่วยให้คุณสามารถเข้าถึงข้อมูลเกี่ยวกับเวลาในการโหลดทรัพยากรต่างๆ ของหน้าเว็บ เช่น รูปภาพ, สคริปต์, และไฟล์ CSS ข้อมูลนี้มีประโยชน์อย่างมากในการระบุทรัพยากรที่เป็น bottleneck และปรับปรุงประสิทธิภาพในการโหลดหน้าเว็บ

performance.getEntriesByType("resource").forEach(resource => {
  console.log(`Resource: ${resource.name}`);
  console.log(`  - Fetch Start: ${resource.fetchStart}`);
  console.log(`  - Response End: ${resource.responseEnd}`);
  console.log(`  - Duration: ${resource.duration}`);
});

ข้อมูลที่สำคัญที่ได้จาก Resource Timing API:

• name: URL ของทรัพยากร
• startTime: เวลาที่การ request ทรัพยากรเริ่มต้น
• fetchStart: เวลาที่เบราว์เซอร์เริ่ม fetch ทรัพยากร
• responseStart: เวลาที่เบราว์เซอร์เริ่มรับ response จาก server
• responseEnd: เวลาที่เบราว์เซอร์ได้รับ response ทั้งหมดจาก server
• duration: ระยะเวลาทั้งหมดในการโหลดทรัพยากร (responseEnd - startTime)

เหตุผลเชิงออกแบบ: Resource Timing API ช่วยให้นักพัฒนาเข้าใจกระบวนการโหลดทรัพยากรของหน้าเว็บได้อย่างละเอียด ทำให้สามารถระบุปัญหาที่ส่งผลต่อประสิทธิภาพได้ เช่น การโหลดทรัพยากรขนาดใหญ่, การโหลดทรัพยากรจาก server ที่อยู่ไกล, หรือปัญหาเกี่ยวกับ caching

แนวปฏิบัติที่ดี:

• ใช้ Resource Timing API เพื่อวิเคราะห์เวลาในการโหลดทรัพยากรต่างๆ ของหน้าเว็บ
• ระบุทรัพยากรที่เป็น bottleneck และพิจารณาปรับปรุงประสิทธิภาพ เช่น การบีบอัดขนาดไฟล์, การใช้ CDN, หรือการปรับปรุง caching
• ตรวจสอบว่าทรัพยากรต่างๆ ถูกโหลดในลำดับที่เหมาะสม เพื่อให้ทรัพยากรที่สำคัญถูกโหลดก่อน
• ใช้ Lazy Loading สำหรับรูปภาพและทรัพยากรอื่นๆ ที่ไม่จำเป็นต้องโหลดในตอนแรก

สรุป

Performance API เป็นเครื่องมือที่มีประสิทธิภาพอย่างยิ่งในการวัดและวิเคราะห์ประสิทธิภาพของเว็บแอปพลิเคชัน การใช้ performance.now(), performance.mark(), performance.measure(), และ Resource Timing API จะช่วยให้คุณสามารถระบุจุดที่ต้องปรับปรุงและเพิ่มประสิทธิภาพให้กับเว็บแอปพลิเคชันของคุณได้

ในบทความถัดไป เราจะมาเรียนรู้เกี่ยวกับ Animation API ซึ่งเป็นเครื่องมือที่ช่วยให้คุณสร้าง animations ที่มีประสิทธิภาพและราบรื่นในเว็บแอปพลิเคชันของคุณ