Progressive Web App ช่วยให้นักพัฒนาแอปสามารถสร้างแอปพลิเคชันระดับใหม่ที่มอบประสบการณ์การใช้งานที่เชื่อถือได้และมีประสิทธิภาพสูง แต่นักพัฒนาแอปจำเป็นต้องเข้าถึงข้อมูลการวัดประสิทธิภาพที่มีความละเอียดสูงเพื่อให้แน่ใจว่าเว็บแอปบรรลุเป้าหมายด้านประสิทธิภาพที่ต้องการ ข้อกำหนดเกี่ยวกับไทม์ไลน์ประสิทธิภาพของ W3C กำหนดอินเทอร์เฟซดังกล่าวสำหรับเบราว์เซอร์เพื่อให้การเข้าถึงแบบเป็นโปรแกรมสำหรับข้อมูลการวัดเวลาระดับต่ำ ซึ่งจะเปิดโอกาสให้ใช้กรณีการใช้งานที่น่าสนใจต่อไปนี้
- การวิเคราะห์ประสิทธิภาพแบบออฟไลน์และแบบกําหนดเอง
- เครื่องมือวิเคราะห์ประสิทธิภาพและการแสดงภาพจากบุคคลที่สาม
- การประเมินประสิทธิภาพที่ผสานรวมไว้ใน IDE และเครื่องมืออื่นๆ สําหรับนักพัฒนาซอฟต์แวร์
การเข้าถึงข้อมูลการวัดเวลาประเภทนี้มีอยู่แล้วในเบราว์เซอร์หลักๆ ส่วนใหญ่สําหรับระยะเวลาในการนําทาง ระยะเวลาในการเรียกใช้ทรัพยากร และระยะเวลาของผู้ใช้ รายการใหม่ที่เพิ่มเข้ามาล่าสุดคืออินเทอร์เฟซเครื่องมือตรวจสอบประสิทธิภาพ ซึ่งโดยพื้นฐานแล้วเป็นอินเทอร์เฟซสตรีมมิงเพื่อรวบรวมข้อมูลการกําหนดเวลาระดับต่ำแบบไม่พร้อมกัน เนื่องจากเบราว์เซอร์เป็นผู้รวบรวมข้อมูล อินเทอร์เฟซใหม่นี้มีข้อดีที่สำคัญหลายประการเมื่อเทียบกับวิธีเข้าถึงไทม์ไลน์ก่อนหน้านี้ ดังนี้
- ปัจจุบันแอปต้องทำการสำรวจและเปรียบเทียบการวัดที่เก็บไว้เป็นระยะๆ ซึ่งทําให้สิ้นเปลือง อินเทอร์เฟซนี้จะเสนอการติดต่อกลับ (กล่าวคือ ไม่ต้องใช้การสำรวจ) ด้วยเหตุนี้ แอปที่ใช้ API นี้จะตอบสนองและมีประสิทธิภาพมากขึ้น
- บัฟเฟอร์นี้ไม่อยู่ภายใต้ขีดจํากัดของบัฟเฟอร์ (บัฟเฟอร์ส่วนใหญ่ตั้งค่าไว้ที่ 150 รายการโดยค่าเริ่มต้น) และหลีกเลี่ยงเงื่อนไขการแข่งขันระหว่างผู้บริโภครายต่างๆ ที่อาจต้องการแก้ไขบัฟเฟอร์
- การแจ้งเตือนเครื่องมือตรวจสอบประสิทธิภาพจะส่งแบบไม่พร้อมกัน และเบราว์เซอร์สามารถส่งการแจ้งเตือนดังกล่าวได้ในช่วงที่ไม่มีการใช้งานเพื่อหลีกเลี่ยงการทำงานกับการแสดงผลที่สำคัญ
ตั้งแต่ Chrome 52 เป็นต้นไป อินเทอร์เฟซเครื่องมือตรวจสอบประสิทธิภาพจะเปิดใช้โดยค่าเริ่มต้น มาดูวิธีใช้กัน
<html>
<head>
<script>
var observer = new PerformanceObserver(list => {
list.getEntries().forEach(entry => {
// Display each reported measurement on console
if (console) {
console.log("Name: " + entry.name +
", Type: " + entry.entryType +
", Start: " + entry.startTime +
", Duration: " + entry.duration + "\n");
}
})
});
observer.observe({entryTypes: ['resource', 'mark', 'measure']});
performance.mark('registered-observer');
function clicked(elem) {
performance.measure('button clicked');
}
</script>
</head>
<body>
<button onclick="clicked(this)">Measure</button>
</body>
</html>
หน้าเว็บง่ายๆ นี้เริ่มต้นด้วยแท็กสคริปต์ที่กําหนดโค้ด JavaScript บางส่วน
- เราสร้างอินสแตนซ์ออบเจ็กต์
PerformanceObserverใหม่และส่งฟังก์ชันตัวแฮนเดิลเหตุการณ์ไปยังคอนสตรัคเตอร์ออบเจ็กต์ ตัวสร้างอินสแตนซ์จะเริ่มต้นวัตถุเพื่อให้เรียกใช้ตัวแฮนเดิลทุกครั้งที่ชุดข้อมูลการวัดชุดใหม่พร้อมประมวลผล (โดยระบบจะส่งข้อมูลการวัดเป็นรายการออบเจ็กต์) ตัวแฮนเดิลที่นี่จะกำหนดเป็นฟังก์ชันนิรนามที่แสดงข้อมูลการวัดผลที่จัดรูปแบบแล้วในคอนโซล ในชีวิตจริง ข้อมูลนี้อาจจัดเก็บไว้ในระบบคลาวด์เพื่อการวิเคราะห์ในภายหลัง หรือส่งไปยังเครื่องมือแสดงภาพแบบอินเทอร์แอกทีฟ - เราลงทะเบียนประเภทเหตุการณ์การจับเวลาที่ต้องการผ่านเมธอด
observe()และเรียกใช้เมธอดmark()เพื่อทําเครื่องหมายเวลาที่ลงทะเบียน ซึ่งเราจะถือว่าจุดนี้เป็นจุดเริ่มต้นของช่วงเวลาการจับเวลา - เรากําหนดตัวแฮนเดิลการคลิกสําหรับปุ่มที่กําหนดไว้ในเนื้อหาหน้าเว็บ ตัวแฮนเดิลการคลิกนี้จะเรียกใช้เมธอด
measure()เพื่อบันทึกข้อมูลการจับเวลาเกี่ยวกับการคลิกปุ่ม
ในเนื้อหาของหน้าเว็บ เราจะกำหนดปุ่ม กำหนดตัวแฮนเดิลการคลิกให้กับเหตุการณ์ onclick และพร้อมใช้งาน
ตอนนี้ หากโหลดหน้าเว็บและเปิดแผงเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome เพื่อดูคอนโซล JavaScript ระบบจะวัดประสิทธิภาพทุกครั้งที่เราคลิกปุ่ม และเนื่องจากเราได้ลงทะเบียนเพื่อสังเกตการณ์การวัดดังกล่าว ระบบจะส่งต่อข้อมูลการวัดผลแบบไม่พร้อมกันไปยังตัวแฮนเดิลเหตุการณ์ของเราโดยไม่ต้องมีการสำรวจไทม์ไลน์ ซึ่งจะแสดงการวัดผลในคอนโซลขณะที่ดำเนินการ
ค่า start แสดงการประทับเวลาเริ่มต้นสําหรับเหตุการณ์ประเภท mark (ซึ่งแอปนี้มีเพียงรายการเดียว) เหตุการณ์ประเภท measure ไม่มีเวลาเริ่มต้นโดยธรรมชาติ แต่แสดงการวัดเวลาซึ่งสัมพันธ์กับเหตุการณ์ mark รายการล่าสุด ดังนั้น ค่าระยะเวลาที่เห็นที่นี่จึงแสดงเวลาที่ผ่านไประหว่างการเรียกใช้ mark() ซึ่งใช้เป็นจุดเริ่มต้นของช่วงเวลาทั่วไป และการเรียกใช้ measure() หลายครั้งในภายหลัง
ดังที่คุณเห็น API นี้ค่อนข้างง่ายและสามารถรวบรวมข้อมูลประสิทธิภาพแบบเรียลไทม์ที่มีความละเอียดสูงซึ่งกรองแล้วได้โดยไม่ต้องใช้การโหวต ซึ่งน่าจะเปิดโอกาสให้ใช้เครื่องมือวัดประสิทธิภาพที่มีประสิทธิภาพมากขึ้นสําหรับเว็บแอป