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