وتعمل تطبيقات الويب التقدّمية على تمكين المطوّرين من إنشاء فئة جديدة من التطبيقات التي تقدّم للمستخدمين تجارب عالية الأداء وموثوقة. ولكن للتأكُّد من تحقيق تطبيق ويب لأهداف الأداء المرجوّة، يحتاج مطوِّرو البرامج إلى الوصول إلى بيانات قياس أداء عالية الدقة. تحدد مواصفات المخطط الزمني لأداء W3C هذه الواجهة للمتصفّحات لتوفير إمكانية الوصول الآلي إلى بيانات الوقت المنخفض المستوى. وهذا يفتح المجال على بعض حالات الاستخدام المثيرة للاهتمام:
- تحليل مخصّص وبلا اتصال بالإنترنت
- أدوات تحليل الأداء ومؤثرات العرض التابعة لجهات خارجية
- يتم دمج تقييم الأداء في بيئة التطوير المتكاملة (IDE) وأدوات المطوّرين الأخرى.
ويمكن الوصول إلى هذا النوع من بيانات التوقيت في معظم المتصفحات الرئيسية من أجل توقيت التنقّل وتوقيت المورد وتوقيت المستخدم. أحدث إضافة هي واجهة مراقب الأداء، وهي في الأساس واجهة بث لجمع معلومات ذات مستوى منخفض بشكل غير متزامن، كما يجمعها المتصفح. توفر هذه الواجهة الجديدة عددًا من المزايا المهمة التي تفوق الأساليب السابقة للوصول إلى المخطط الزمني:
- في الوقت الحالي، يتعين على التطبيقات إجراء استبيان دوري واختلاف القياسات المخزنة، وهو أمر مكلف. وتوفر لهم هذه الواجهة معاودة الاتصال. (بعبارة أخرى، لا توجد حاجة للاستطلاع). نتيجةً لذلك، يمكن للتطبيقات التي تستخدم واجهة برمجة التطبيقات هذه أن تكون أكثر استجابة وكفاءة.
- لا تخضع لحدود التخزين المؤقت (يتم تعيين معظم الموارد الاحتياطية على 150 عنصرًا افتراضيًا)، وتتجنب ظروف التعارض بين مختلف المستهلكين التي قد ترغب في تعديل المورد الاحتياطي.
- يتم تسليم إشعارات مراقب الأداء بشكل غير متزامن ويمكن للمتصفح إرسالها أثناء وقت عدم النشاط لتجنب التنافس مع أعمال العرض المهمة.
اعتبارًا من الإصدار 52 من Chrome، يتم تفعيل واجهة "مراقبة الأداء" تلقائيًا. دعنا نلقي نظرة على كيفية استخدامها.
<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().
كما يتّضح مما سبق، تتميّز واجهة برمجة التطبيقات هذه بالبساطة وتتيح جمع بيانات الأداء في الوقت الفعلي المفلترة والعالية الدقة بدون إجراء استطلاع، ما سيفتح المجال أمام أدوات أكثر كفاءة لأداء تطبيقات الويب.