หน้านี้ได้รับการแปลโดย Cloud Translation API

การวัดประสิทธิภาพใน Service Worker

Paul Kinlan

Twitter GitHub Glitch Mastodon หน้าแรก

นอกจาก Jake Archibald ยังกังวลเกี่ยวกับทักษะนักพัฒนาซอฟต์แวร์ที่เสื่อมสลายและหายไปแล้ว เขายังสร้างประเด็นที่ดีที่เมื่อคุณใช้โปรแกรมทำงานของบริการอย่างชาญฉลาดคุณจะสามารถเพิ่มประสิทธิภาพเว็บไซต์หรือแอปได้มาก ดูวิดีโอสำหรับภาพรวม

หากคุณต้องการเพิ่มพลังให้กับเวลาในการโหลดหน้าเว็บตามที่เจตน์แนะนำ คุณต้องเข้าใจจริงๆ ว่าโปรแกรมทำงานของบริการมีผลต่อคำขอของหน้าเว็บอย่างไร

Resource Timing และ User Timing API เป็นองค์ประกอบสำคัญในโครงสร้างพื้นฐานของเว็บไซต์ RUM (Real User Monitoring) เนื่องจากช่วยให้คุณเข้าใจได้ว่าผู้ใช้ทั้งหมดเห็นประสิทธิภาพของเว็บไซต์อย่างไร (กรณีการใช้งานอีกอย่างคือการตรวจหาการแทรกเนื้อหา) พูดง่ายๆ ก็คือช่วยให้คุณเข้าใจทุกแง่มุมของคำขอเว็บทุกรายการที่มาจากเว็บไซต์ของคุณ เว้นแต่คุณจะมี Service Worker หรือ Web Worker ไว้

ต่อไปนี้เป็นตัวอย่างสั้นๆ เกี่ยวกับวิธีใช้เพื่อดูรายการคำขอทั้งหมดที่ส่งไปยังโดเมนที่ไม่ใช่โดเมนปัจจุบัน

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 API คือการสร้างและใช้ก่อนที่ Service Worker จะเป็นประกายในสายตาวิศวกร และโค้ดด้านบนจะไม่เข้าใจว่า Service Worker ส่งผลกระทบต่อการทำงานดังกล่าวอย่างไร

การเปลี่ยนแปลงล่าสุดใน Chrome 45 (เบต้าในเดือนกรกฎาคม 2015) จะช่วยคุณ โดยแนะนำความสามารถของผู้ปฏิบัติงานทุกรูปแบบ (Web และ Service Worker) ให้เข้าถึง Resource Timing และ User Timing API อยู่เสมอ ทำให้คุณติดตามประสิทธิภาพของเครือข่ายสำหรับผู้ใช้ทั้งหมดได้

การเข้าถึงเมตริกประสิทธิภาพจาก Service Worker

การเปลี่ยนแปลงที่ใหญ่ที่สุดคือการเพิ่มออบเจ็กต์ performance ลงในบริบทของ Workers (Web และ ServiceWorkers) ซึ่งตอนนี้จะช่วยให้คุณเข้าใจช่วงเวลาประสิทธิภาพของคำขอทั้งหมดที่เกิดขึ้นในบริบทของผู้ปฏิบัติงาน และยังให้คุณกำหนดเครื่องหมายของคุณเองสำหรับการวัดการดำเนินการ JS ได้ด้วย ถ้าคุณเห็นเฉพาะสิ่งที่เกิดขึ้นจากบริบทของหน้าต่างปัจจุบัน คุณจะพลาดข้อมูลสำคัญเกี่ยวกับช่วงเวลาต่อไปนี้

คำขอ fetch() รายการที่ส่งภายในเหตุการณ์ oninstall ของ Service Worker
ตอนนี้คุณสามารถติดตามคำขอ fetch() รายการที่สร้างขึ้นเมื่อแคชข้อมูลในเหตุการณ์ onpush ได้เพื่อทำความเข้าใจประสิทธิภาพที่ผู้ใช้เห็น
ในที่สุดก็มีคำขอ fetch() ที่สร้างขึ้นและสกัดกั้นโดยแฮนเดิล onfetch

ประเด็นสุดท้ายคือสิ่งสำคัญ ถ้ามองแค่ว่า Service Worker เป็นเหมือนพร็อกซี ที่อยู่ระหว่าง UI ของเว็บกับเครือข่าย ออบเจ็กต์ performance บน window จะเห็นเฉพาะช่วงเวลาและข้อมูลสำหรับส่วนของคำขอที่คำขอเรียกใช้ ออบเจ็กต์ไม่มีส่วนทราบว่ามี Service Worker อยู่ระหว่างไคลเอ็นต์กับเครือข่าย ดังนั้นจึงไม่เข้าใจผลกระทบของโปรแกรมทำงานของบริการ

ฉันจะใช้สิ่งนี้ได้อย่างไร

Service Worker ทั่วไปที่รองรับการทำงานออฟไลน์ก่อนจะมีขั้นตอนการติดตั้งซึ่งจะดาวน์โหลดและบันทึกเนื้อหาทั้งหมดไว้ใช้ในภายหลัง

ตัวอย่างกรณีที่สามารถใช้คือการบันทึกข้อมูลเวลาของขั้นตอนการติดตั้ง เพื่อให้คุณสามารถตัดสินใจเกี่ยวกับวิธีปรับปรุงประสิทธิภาพของการติดตั้งจริงตามการใช้งานจริงของผู้ใช้ทั่วไป

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 อยู่แล้ว แต่จะต้องได้รับการอัปเดตเพื่อรวมการวิเคราะห์ประสิทธิภาพจากบริบทของผู้ปฏิบัติงานไว้ด้วย

Navigation Timing API จะมาถึง Service Worker ไหม

ขณะนี้ยังไม่มีแผนที่จะเพิ่ม Navigation Timing API ในบริบทของ Service Worker เนื่องจากไม่มีการนำทางแบบเดิมในโปรแกรมทำงานของบริการ สิ่งที่น่าสนใจคือสำหรับโปรแกรมทำงานของบริการ การนำทางทุกรายการในชุดหน้าเว็บที่ควบคุมของโปรแกรมทำงานของบริการจะมีลักษณะเหมือน การดึงข้อมูลทรัพยากร วิธีนี้ทำให้โปรแกรมทำงานของบริการเป็นวิธีที่น่าสนใจอย่างไม่น่าเชื่อในการรวมตรรกะประสิทธิภาพส่วนใหญ่ไว้ในเว็บแอป

การวัดประสิทธิภาพใน Service Worker

การเข้าถึงเมตริกประสิทธิภาพจาก Service Worker

ฉันจะใช้สิ่งนี้ได้อย่างไร

Navigation Timing API จะมาถึง Service Worker ไหม

ฉันสามารถดูสิ่งที่เปลี่ยนแปลงไปได้หรือไม่

ฉันสนใจการพูดคุยและข้อมูลจำเพาะ