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