Ngoài việc lo lắng về việc kỹ năng Nhà phát triển của mình bị hỏng và giảm sút, Jake Archibald còn đưa ra một trường hợp rõ ràng rằng bằng cách sử dụng trình chạy dịch vụ một cách thông minh, bạn có thể cải thiện đáng kể hiệu suất của trang web hoặc ứng dụng. Hãy xem video để biết thông tin tổng quan.
Nếu muốn tăng tốc thời gian tải trang như Jake đề xuất, bạn thực sự cần phải hiểu được cách thức hoạt động của trình chạy dịch vụ ảnh hưởng đến các yêu cầu của trang.
API Thời gian tài nguyên và Thời gian người dùng là các thành phần quan trọng trong cơ sở hạ tầng RUM (Giám sát người dùng thực) của nhiều trang web vì API này cho phép bạn hiểu toàn diện cách tất cả người dùng xem hiệu suất của trang web (Một trường hợp sử dụng khác là phát hiện hoạt động chèn nội dung). Tóm lại, công cụ này cho phép bạn hiểu gần như mọi khía cạnh của mọi yêu cầu web được thực hiện từ trang web của bạn, trừ phi bạn có một worker dịch vụ hoặc worker web.
Dưới đây là ví dụ nhanh về cách sử dụng hàm này để lấy danh sách tất cả các yêu cầu đã được thực hiện cho một miền không phải là miền hiện tại.
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 Thời gian tài nguyên và API Thời gian người dùng được tạo và triển khai trước khi trình chạy dịch vụ xuất hiện trong tâm trí kỹ sư và mã ở trên sẽ không thể hiểu được tác động của Trình chạy dịch vụ đối với API này.
Một loạt thay đổi gần đây trong Chrome 45 (Beta vào tháng 7 năm 2015) sẽ giúp bạn bằng cách giới thiệu khả năng cho tất cả các hình thức worker (Web và worker dịch vụ) có quyền truy cập vào API Thời gian tài nguyên và API Thời gian người dùng, nhờ đó, bạn có thể nắm bắt hiệu suất mạng cho tất cả người dùng.
Truy cập vào các chỉ số hiệu suất từ một Worker dịch vụ
Thay đổi lớn nhất là việc thêm đối tượng performance vào ngữ cảnh Worker (Web và ServiceWorkers). Giờ đây, bạn có thể hiểu được thời gian hiệu suất của tất cả các yêu cầu được thực hiện trong ngữ cảnh của worker, đồng thời có thể đặt các điểm đánh dấu của riêng mình để đo lường quá trình thực thi JS. Nếu chỉ có thể xem những gì xảy ra trong ngữ cảnh của cửa sổ hiện tại, bạn sẽ bỏ lỡ thông tin quan trọng về thời gian từ:
- Các yêu cầu
fetch()được thực hiện bên trong sự kiệnoninstallcủa worker dịch vụ - Giờ đây, bạn có thể theo dõi các yêu cầu
fetch()được thực hiện khi lưu dữ liệu vào bộ nhớ đệm trong một sự kiệnonpushđể hiểu rõ hiệu suất mà người dùng nhìn thấy. - cuối cùng, yêu cầu
fetch()được tạo và chặn bởi trình xử lýonfetch.
Điểm cuối cùng rất quan trọng. Bạn có thể coi trình chạy dịch vụ là một proxy nằm giữa giao diện người dùng web và mạng. Đối tượng performance trên window chỉ thấy thời gian và thông tin cho phần yêu cầu mà đối tượng này gọi, đối tượng này không có thông tin về worker dịch vụ nằm giữa ứng dụng và mạng nên không thể hiểu được tác động của worker dịch vụ.
Làm cách nào để sử dụng tính năng này?
Một worker dịch vụ thông thường hỗ trợ chế độ ngoại tuyến trước tiên sẽ có bước cài đặt, trong đó worker sẽ tải xuống và lưu tất cả tài sản để sử dụng sau này
Ví dụ về trường hợp có thể sử dụng tính năng này là để ghi lại và ghi nhật ký dữ liệu thời gian của bước cài đặt để bạn có thể đưa ra một số quyết định đo lường về cách cải thiện hiệu suất cài đặt dựa trên mức sử dụng thực tế của người dùng.
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;
})
);
});
Ngày nay, nhiều trang web sử dụng RUM để hiểu rõ cách phần lớn người dùng trải nghiệm trang web của họ. Các công cụ như Google Analytics đã báo cáo dữ liệu tốc độ trang web bằng cách sử dụng Navigation Timing API, nhưng cần được cập nhật để đưa vào phân tích hiệu suất từ ngữ cảnh Worker.
Navigation Timing API có được cung cấp cho Worker dịch vụ không
Hiện tại, chúng tôi không có kế hoạch thêm Navigation Timing API vào ngữ cảnh của trình chạy dịch vụ vì không có thao tác điều hướng truyền thống nào trong trình chạy dịch vụ. Điều thú vị là đối với trình chạy dịch vụ, mọi thao tác điều hướng trong nhóm trang do trình chạy dịch vụ kiểm soát đều giống như một lượt tìm nạp tài nguyên. Chỉ điều này thôi cũng khiến trình chạy dịch vụ trở thành một cách vô cùng hấp dẫn để tập trung phần lớn logic hiệu suất trong ứng dụng web.