تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

Paul Kinlan

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

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

إنّ واجهتَي برمجة التطبيقات Resource Timing API وUser Timing API هما مكوّنان مهمّان في بنية مراقبة المستخدمين الفعليين (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;
};

تم إنشاء واجهات برمجة التطبيقات Resource Timing وUser Timing وتنفيذها قبل أن يبدأ مهندسو Google في التفكير في استخدام تطبيقات الخدمة، ولن يتمكّن الرمز أعلاه من فهم مدى تأثير تطبيقات الخدمة فيه.

ستساعدك مجموعة من التغييرات الأخيرة في الإصدار 45 من Chrome (الإصدار التجريبي في تموز/يوليو 2015) من خلال توفير إمكانية وصول جميع أشكال مهام Worker (مهام Web وService Worker) إلى واجهات برمجة التطبيقات Resource Timing وUser Timing، ما يتيح لك بالتالي تتبُّع أداء الشبكة لجميع المستخدمين.

الوصول إلى مقاييس الأداء من خلال Worker

أكبر تغيير هو إضافة العنصر performance إلى سياق Workers (Web Worker وServiceWorker)، ما سيتيح لك الآن فهم أوقات أداء جميع الطلبات التي يتم إجراؤها في سياق Worker، وسيتيح لك أيضًا ضبط علاماتك الخاصة لقياس تنفيذ 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"تُبلغ حاليًا عن بيانات سرعة الموقع الإلكتروني باستخدام Navigation Timing API، ولكنّها ستحتاج إلى التحديث لتضمين تحليل الأداء من سياق Worker.

هل ستتوفّر واجهة برمجة التطبيقات Navigation Timing API في مهام الخدمة؟

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

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

الوصول إلى مقاييس الأداء من خلال Worker

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

هل ستتوفّر واجهة برمجة التطبيقات Navigation Timing API في مهام الخدمة؟

هل يمكنني الاطّلاع على التغييرات؟

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