اندازه گیری عملکرد در یک کارگر خدماتی

پل کینلان

به غیر از اینکه جیک آرچیبالد نگران پوسیدگی و از بین رفتن مهارت‌های توسعه‌دهنده‌اش بود، او ادعای قوی داشت که با استفاده هوشمندانه از Service Worker می‌توانید عملکرد سایت یا برنامه خود را به شدت بهبود بخشید. برای بررسی کلی ویدیو را تماشا کنید.

اگر می‌خواهید زمان بارگذاری صفحه خود را همانطور که جیک پیشنهاد می‌کند افزایش دهید، واقعاً باید بتوانید درک کنید که کارکنان خدمات چگونه بر درخواست‌های صفحه شما تأثیر می‌گذارند.

Resource Timing و 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;
};

APIهای Resource Timing و User Timing قبل از اینکه Service Worker در چشم مهندسان چشمک بزند ایجاد و پیاده‌سازی شده‌اند و کد بالا نمی‌تواند درک کند که Service Worker چگونه بر آن تأثیر می‌گذارد.

مجموعه‌ای از تغییرات اخیر در Chrome 45 (بتا در ژوئیه 2015) با معرفی توانایی همه اشکال کارگران (کارگر وب و خدمات) برای دسترسی به Resource Timeming و User Timeming APIها به شما کمک می‌کند و بنابراین می‌توانند به شما اجازه دهند. عملکرد شبکه را برای همه کاربران خود حفظ کنید.

دسترسی به معیارهای عملکرد از یک کارگر خدماتی

بزرگترین تغییر، افزودن شیء performance به یک بافت Workers (Web and ServiceWorkers) است که اکنون به شما امکان می‌دهد زمان‌بندی عملکرد همه درخواست‌هایی را که در زمینه کارگر انجام می‌شوند را درک کنید و همچنین به شما امکان می‌دهد علامت‌های خود را تعیین کنید. برای اندازه گیری اجرای JS اگر فقط بتوانید آنچه را که از متن پنجره فعلی اتفاق می‌افتد ببینید، اطلاعات زمان‌بندی حیاتی را از دست خواهید داد:

  • درخواست‌های fetch() در رویداد oninstall سرویس‌کار
  • درخواست‌های fetch() که هنگام ذخیره داده‌ها در یک رویداد onpush ایجاد می‌شوند، اکنون می‌توانند برای درک عملکردی که کاربران شما مشاهده می‌کنند، ردیابی شوند.
  • در نهایت، درخواست fetch() که توسط handler 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 Analytics قبلاً داده‌های سرعت سایت را با استفاده از Navigation Timing API گزارش می‌کنند ، اما باید به‌روزرسانی شوند تا تجزیه و تحلیل عملکرد از یک زمینه Worker را در بر گیرند.

آیا Navigation Timing API به Service Workers می رسد؟

در حال حاضر هیچ برنامه‌ای برای افزودن API زمان‌بندی ناوبری به بافت سرویس‌کار وجود ندارد، زیرا هیچ ناوبری سنتی در یک سرویس‌کار وجود ندارد. نکته جالب این است که برای کارمند سرویس، هر پیمایش در مجموعه صفحات کنترل شده کارگر سرویس مانند واکشی منبع به نظر می رسد. این به تنهایی باعث می‌شود که کارکنان خدمات راهی فوق‌العاده قانع‌کننده برای متمرکز کردن اکثر منطق عملکرد شما در برنامه وب شما باشند.

می توانم ببینم چه چیزی تغییر کرده است؟

من به بحث و مشخصات علاقه مند هستم