برنامه‌های وب پیشرفته توسعه‌دهندگان را قادر می‌سازد تا کلاس جدیدی از برنامه‌های کاربردی بسازند که تجربیات کاربر قابل اعتماد و با کارایی بالا را ارائه دهند. اما برای اطمینان از دستیابی یک برنامه وب به اهداف عملکرد مطلوب خود، توسعه دهندگان نیاز به دسترسی به داده های اندازه گیری عملکرد با وضوح بالا دارند. مشخصات W3C Performance Timeline چنین رابطی را برای مرورگرها تعریف می‌کند تا دسترسی برنامه‌ای به داده‌های زمان‌بندی سطح پایین را فراهم کند. این در را به روی موارد استفاده جالب باز می کند:
- تجزیه و تحلیل عملکرد آفلاین و سفارشی
- تجزیه و تحلیل عملکرد شخص ثالث و ابزار تجسم
- ارزیابی عملکرد ادغام شده در IDE ها و سایر ابزارهای توسعه دهنده
دسترسی به این نوع داده‌های زمان‌بندی از قبل در اکثر مرورگرهای اصلی برای زمان‌بندی پیمایش ، زمان‌بندی منابع و زمان‌بندی کاربر در دسترس است. جدیدترین افزونه رابط مشاهده‌گر عملکرد است که اساساً یک رابط استریم برای جمع‌آوری اطلاعات زمان‌بندی سطح پایین به صورت ناهمزمان است، همانطور که توسط مرورگر جمع‌آوری می‌شود. این رابط جدید تعدادی از مزایای حیاتی را نسبت به روش های قبلی برای دسترسی به جدول زمانی ارائه می دهد:
- امروزه، اپلیکیشن‌ها باید به‌طور دوره‌ای اندازه‌گیری‌های ذخیره‌شده را نظرسنجی و متفاوت کنند، که هزینه‌بر است. این رابط به آنها یک تماس پاسخ می دهد. (به عبارت دیگر نیازی به نظرسنجی نیست). در نتیجه برنامه هایی که از این API استفاده می کنند می توانند پاسخگوتر و کارآمدتر باشند.
- مشمول محدودیت‌های بافر نیست (اکثر بافرها به طور پیش‌فرض روی ۱۵۰ آیتم تنظیم شده‌اند)، و از شرایط مسابقه بین مصرف‌کنندگان مختلف که ممکن است بخواهند بافر را تغییر دهند، اجتناب می‌کند.
- اعلان‌های ناظر عملکرد به‌صورت ناهمزمان ارائه می‌شوند و مرورگر می‌تواند آنها را در زمان بی‌حرکتی ارسال کند تا از رقابت با کار رندر حیاتی جلوگیری کند.
از 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>
این صفحه ساده با یک تگ اسکریپت شروع می شود که کدهای جاوا اسکریپت را تعریف می کند:
- ما یک شی
PerformanceObserverجدید را نمونه‌سازی می‌کنیم و یک تابع مدیریت رویداد را به سازنده شی ارسال می‌کنیم. سازنده شی را به گونه‌ای مقداردهی اولیه می‌کند که هر بار که مجموعه جدیدی از داده‌های اندازه‌گیری آماده پردازش می‌شود (با داده‌های اندازه‌گیری به عنوان فهرستی از اشیا ارسال می‌شود)، کنترل‌کننده ما فراخوانی می‌شود. هندلر در اینجا به عنوان یک تابع ناشناس تعریف می شود که به سادگی داده های اندازه گیری فرمت شده را روی کنسول نمایش می دهد. در یک سناریوی دنیای واقعی، این داده ها ممکن است برای تجزیه و تحلیل بعدی در فضای ابری ذخیره شوند یا به ابزار تجسم تعاملی منتقل شوند. - ما برای انواع رویدادهای زمان بندی مورد علاقه خود از طریق
observe()ثبت نام می کنیم و متدmark()برای علامت گذاری لحظه ای که در آن ثبت نام کرده ایم، فراخوانی می کنیم، که شروع فواصل زمانی خود را در نظر می گیریم. - برای دکمه ای که در بدنه صفحه تعریف شده است، یک کنترل کننده کلیک تعریف می کنیم. این کنترل کننده کلیک
measure()meter را فراخوانی می کند تا داده های زمان بندی مربوط به زمانی که دکمه کلیک شده است را بگیرد.
در بدنه صفحه، یک دکمه تعریف می کنیم، کنترل کننده کلیک خود را به رویداد onclick اختصاص می دهیم و آماده حرکت هستیم.
اکنون، اگر صفحه را بارگذاری کنیم و پانل Chrome DevTools را برای تماشای کنسول جاوا اسکریپت باز کنیم، هر بار که روی دکمه کلیک می کنیم، عملکرد اندازه گیری می شود. و از آنجایی که ما برای مشاهده چنین اندازه‌گیری‌هایی ثبت نام کرده‌ایم، آنها به‌صورت ناهمزمان و بدون نیاز به نظرسنجی جدول زمانی به مدیریت رویداد ما ارسال می‌شوند ، که اندازه‌گیری‌ها را به محض وقوع روی کنسول نمایش می‌دهد:
مقدار start نشان‌دهنده مُهر زمانی شروع برای رویدادهایی از نوع mark است (که این برنامه فقط یکی از آنها را دارد). رویدادهای دارای measure نوع، زمان شروع ذاتی ندارند. آنها اندازه گیری های زمان بندی گرفته شده را نسبت به آخرین رویداد mark نشان می دهند. بنابراین، مقادیر مدت زمان که در اینجا مشاهده می‌شوند، نشان‌دهنده زمان سپری شده بین فراخوانی به mark() است که به عنوان نقطه شروع فاصله مشترک عمل می‌کند، و چندین فراخوان بعدی برای measure() .
همانطور که می بینید، این API بسیار ساده است و توانایی جمع آوری داده های فیلتر شده، با وضوح بالا و عملکرد زمان واقعی را بدون نظرسنجی ارائه می دهد، که باید در را برای ابزارهای عملکرد کارآمدتر برای برنامه های وب باز کند.