測量 Service Worker 中的效能

除了擔心開發人員技能會因缺乏練習而生疏,Jake Archibald 也提出了強而有力的論點,說明只要聰明運用服務工作者,就能大幅提升網站或應用程式的效能。請觀看影片瞭解概況。

如果您打算按照 Jake 的建議超越網頁載入時間,就必須瞭解服務工作者對網頁要求的影響。

Resource TimingUser Timing API 是許多網站 RUM (Real User Monitoring) 基礎架構的重要元件,因為這可讓您全面瞭解所有使用者如何看待網站效能 (另一個用途是偵測內容注入)。簡而言之,這項功能可讓您瞭解網站發出的每個網頁要求的幾乎所有層面,除非您有服務工作者或網路工作者。

以下簡要範例說明如何使用這項功能,取得所有非目前網域的網域要求清單。

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 是在服務工作者還未在工程師眼中閃爍之前建立及實作,因此上述程式碼無法瞭解服務工作者對其造成的影響。

Chrome 45 (2015 年 7 月的 Beta 版) 近期推出一系列變更,可讓所有類型的 worker (網頁和服務 worker) 存取資源時間和使用者時間 API,進而讓您掌握所有使用者的網路效能。

透過服務工作者存取成效指標

最大的變更是將 performance 物件新增至 worker 內容 (Web 和 ServiceWorker),讓您瞭解在 worker 內容中提出的所有要求的效能時間,並設定自己的標記來評估 JS 執行作業。如果您只能從目前視窗的內容查看發生的情況,就會錯過下列重要時間資訊:

  • 在服務工作程的 oninstall 事件中提出的 fetch() 要求
  • 您現在可以追蹤在 onpush 事件中快取資料時發出的 fetch() 要求,瞭解使用者看到的成效。
  • 最後,由 onfetch 處理常式提出並攔截的 fetch() 要求。

最後一點很重要。您可以將服務工作者視為位於網路 UI 和網路之間的 Proxy。window 上的 performance 物件只會看到其所叫用要求的部分時間和資訊,無法得知用戶端和網路之間的服務工作者,因此無法瞭解服務工作者的影響。

如何使用這項功能?

支援離線優先的典型服務工作者會包含安裝步驟,用於下載並儲存所有資產,以供日後使用

舉例來說,您可以使用這項功能記錄及記錄安裝步驟的時間資料,據此做出明智的決策,瞭解如何根據實際使用者行為改善安裝成效。

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 Worker

目前沒有計劃將 Navigation Timing API 新增至服務工作者背景,因為服務工作者中沒有傳統導覽。有趣的是,對 Service Worker 而言,Service Worker 所控管的網頁組合中的每個導覽都會視為資源擷取。這項功能本身就讓 Service Worker 成為非常實用的做法,可將網路應用程式中的大部分效能邏輯集中管理。

能否告訴我有哪些變更?

我對討論和規格有興趣