قياس الأداء في مشغّل الخدمات

بخلاف "جيك أرشيبالد" الذي كان يقلق بشأن تراجع مهاراته في تطوير البرامج أو تراجعها، قدَّم حججًا قويًا بأنّه من خلال استخدام مشغّل الخدمات بذكاء يمكنك تحسين أداء الموقع الإلكتروني أو التطبيق بشكل كبير. يمكنك مشاهدة الفيديو للحصول على نظرة عامة.

إذا كنت تنوي تعزيز وقت تحميل صفحتك كما يقترح "جيك"، يجب أن تكون قادرًا على فهم كيفية تأثير عاملي الخدمة في طلبات صفحتك.

يُعدّ كل من Resource Timing وواجهة برمجة تطبيقات User Timing مكوِّنين مهمين في البنية الأساسية للعديد من المواقع الإلكترونية المستندة إلى RUM (مراقبة المستخدم الفعلي) لأنها تتيح لك فهم كيفية اطّلاع جميع المستخدمين على أداء موقعك الإلكتروني بشكل شامل (هناك حالة استخدام أخرى تتمثل في رصد إدخال المحتوى). باختصار، يتيح لك الموقع فهم كل جانب من جوانب كل طلب ويب يتم إجراؤه من موقعك، إلا إذا كان هناك عامل خدمات أو عامل ويب.

إليك مثال سريع على كيفية استخدام هذا النموذج للحصول على قائمة بجميع الطلبات المُرسَلة إلى نطاق غير النطاق الحالي.

var getThirdPartyRequests = function() {
    var thirdPartyRequests = [];
    var requests = window.performance.getEntriesByType("resource");
    
    var currentHost = window.location.host

    for(var requestIdx = 0; requestIdx < requests.length; requestIdx++) {
    var request = requests[requestIdx];
    var url = new URL(request.name);
    var host = url.host;

    if(host != currentHost) {
        thirdPartyRequests.push(request);
    }
    }
    
    return thirdPartyRequests;
};

تم إنشاء واجهات برمجة تطبيقات توقيت الموارد وتوقيت المستخدم وتنفيذها قبل أن يصبح عامل الخدمة وامضًا في نظر المهندسين ولن يتمكن الرمز البرمجي أعلاه من فهم كيفية تأثير عامل الخدمة عليه.

ستساعدك مجموعة التغييرات الحديثة في Chrome 45 (الإصدار التجريبي في تموز (يوليو) 2015) من خلال إتاحة إمكانية دخول جميع أشكال العاملين (الويب وعاملي الخدمات) إلى واجهات برمجة تطبيقات "وقت الموارد" و"وقت المستخدم" وبالتالي تمكينك من البقاء على اطّلاع على أداء الشبكة لجميع المستخدمين.

الوصول إلى مقاييس الأداء من مشغِّل الخدمات

والتغيير الأكبر يتمثل في إضافة العنصر performance إلى سياق Workers (الويب وServiceWorkers) الذي سيتيح لك الآن فهم توقيتات أداء جميع الطلبات التي يتم إرسالها في سياق العامل، وسيتيح لك أيضًا ضبط العلامات الخاصة لقياس تنفيذ JavaScript. إذا كان بإمكانك الاطّلاع فقط على ما يحدث من سياق النافذة الحالية، لن تظهر لك معلومات مهمّة عن التوقيت:

  • تم إجراء fetch() طلب داخل الحدث oninstall لعامل الخدمات.
  • يمكن الآن تتبُّع طلبات fetch() المقدّمة عند تخزين البيانات مؤقتًا في حدث onpush لفهم الأداء الذي يظهر للمستخدمين.
  • أخيرًا، طلب fetch() الذي يرسله معالج onfetch ويعترضه.

النقطة الأخيرة مهمة. تتمثل إحدى طُرق النظر إلى عامل الخدمة في خادم وكيل يقع بين واجهة مستخدم الويب والشبكة. لا يرى الكائن performance في window سوى التوقيتات والمعلومات الخاصة بجزء الطلب الذي يستدعيه، وليس لديه معرفة بعامل الخدمة في ما بين العميل والشبكة، وبالتالي لا يستطيع فهم تأثير مشغّل الخدمات.

كيف يمكنني استخدام ذلك؟

وبالنسبة إلى مشغّل الخدمات العادي الذي يوفّر خدماته بلا اتصال بالإنترنت أولاً، سيكون هناك خطوة تثبيت تتيح تنزيل جميع مواد العرض وحفظها لاستخدامها لاحقًا

من الأمثلة على هذه الجوانب تسجيل بيانات التوقيت الخاصة بخطوة التثبيت وتسجيلها لتتمكّن من اتخاذ بعض القرارات المقيّمة حول كيفية تحسين أداء عملية التثبيت استنادًا إلى معدّل الاستخدام الفعلي للمستخدم.

self.addEventListener("install", function() {
    var urls = [
    '/',
    '/images/chrome-touch-icon-192x192.png',
    '/images/ic_add_24px.svg',
    '/images/side-nav-bg@2x.jpg',
    '/images/superfail.svg',
    '/scripts/voicememo-core.js',
    '/styles/voicememo-core.css',
    '/third_party/Recorderjs/recorder.js',
    '/third_party/Recorderjs/recorderWorker.js',
    '/third_party/Recorderjs/wavepcm.js',
    '/third_party/moment.min.js',
    '/favicon.ico',
    '/manifest.json'
    ];

    urls = urls.map(function(url) {
    return new Request(url, {credentials: 'include'});
    });

    event.waitUntil(
    caches
        .open(CACHE_NAME + '-v' + CACHE_VERSION)
        .then(function(cache) {
        // Fetch all the URL's and store in the cache
        return cache.addAll(urls);
        })
        .then(function () {
        // Analyze all the requests
        var requests = self.performance.getEntriesByType("resource");
        
        // Loop across all the requests and save the timing data.
        return;
        })
    );
});

تستخدم العديد من المواقع حاليًا RUM لفهم تجربة غالبية المستخدمين لمواقعها. أدوات مثل "إحصاءات Google" تعمل بالفعل على الإبلاغ عن بيانات سرعة الموقع الإلكتروني باستخدام واجهة برمجة تطبيقات التنقل Timing ولكن ستحتاج إلى تحديثها لتضمين تحليل الأداء من سياق العامل.

هل ستصل واجهة برمجة تطبيقات Navigation Timing إلى عاملي الخدمة؟

في الوقت الحالي، ليست هناك خطط لإضافة واجهة برمجة تطبيقات Navigation Timing إلى سياق مشغّل الخدمات، نظرًا لعدم وجود عمليات تنقل تقليدية في مشغّل الخدمات. الشيء المثير للاهتمام هو أن كل عملية تنقّل في مجموعة الصفحات التي يتحكّم فيها عامل الخدمة تبدو وكأنها عملية جلب مورد. وهذا وحده يجعل العاملين في مجال الخدمة طريقة مقنعة بشكل لا يصدق لتحقيق معظم منطق الأداء الخاص بك في تطبيق الويب الخاص بك.

هل يمكنني رؤية التغييرات التي تم إجراؤها؟

أنا مهتم بالمناقشة والمواصفات