Cách nhân viên web và nhân viên dịch vụ có thể cải thiện hiệu suất trang web của bạn và thời điểm sử dụng nhân viên web so với nhân viên dịch vụ.
Phần tổng quan này giải thích cách trình chạy web và trình chạy dịch vụ có thể cải thiện hiệu suất của trang web cũng như thời điểm nên sử dụng trình chạy web so với trình chạy dịch vụ. Hãy xem phần còn lại của loạt bài viết này để biết các mẫu giao tiếp cụ thể của cửa sổ và trình chạy dịch vụ.
Cách nhân viên có thể cải thiện trang web của bạn
Trình duyệt sử dụng một luồng duy nhất (luồng chính) để chạy tất cả JavaScript trong một trang web, cũng như thực hiện các thao tác như hiển thị trang và thu gom rác. Việc chạy quá nhiều mã JavaScript có thể chặn luồng chính, làm chậm trình duyệt thực hiện các tác vụ này và dẫn đến trải nghiệm người dùng kém.
Trong quá trình phát triển ứng dụng iOS/Android, một mẫu phổ biến để đảm bảo luồng chính của ứng dụng vẫn miễn phí để phản hồi các sự kiện của người dùng là giảm tải hoạt động cho các luồng khác. Trên thực tế, trong các phiên bản Android mới nhất, việc chặn luồng chính quá lâu sẽ dẫn đến sự cố trong ứng dụng.
Trên web, JavaScript được thiết kế xoay quanh khái niệm về một luồng và thiếu các tính năng cần thiết để triển khai mô hình đa luồng như các ứng dụng có, chẳng hạn như bộ nhớ dùng chung.
Mặc dù có những hạn chế này, bạn vẫn có thể đạt được một mẫu tương tự trên web bằng cách sử dụng trình thực thi để chạy tập lệnh trong các luồng ở chế độ nền, cho phép chúng thực hiện các tác vụ mà không can thiệp vào luồng chính. Worker là toàn bộ phạm vi JavaScript chạy trên một luồng riêng biệt mà không có bất kỳ bộ nhớ dùng chung nào.
Trong bài đăng này, bạn sẽ tìm hiểu về hai loại worker (trình thực thi trên web và service worker), những điểm tương đồng và khác biệt giữa hai loại trình thực thi này, cũng như các kiểu phổ biến nhất khi sử dụng trình thực thi này trên các trang web chính thức.
Trình chạy web và trình chạy dịch vụ
Điểm tương đồng
Trình thực thi web và trình chạy dịch vụ là hai loại trình thực thi có sẵn cho trang web. Chúng có một số điểm chung:
- Cả hai đều chạy trong một luồng phụ, cho phép mã JavaScript thực thi mà không chặn luồng chính và giao diện người dùng.
- Các trình xử lý này không có quyền truy cập vào các đối tượng
WindowvàDocumentnên không thể tương tác trực tiếp với DOM và có quyền truy cập hạn chế vào các API của trình duyệt.
Điểm khác biệt
Bạn có thể nghĩ rằng hầu hết mọi thứ có thể được uỷ quyền cho một trình chạy web đều có thể được thực hiện trong một trình chạy dịch vụ và ngược lại, nhưng có những điểm khác biệt quan trọng giữa chúng:
- Không giống như trình thực thi web, trình chạy dịch vụ cho phép bạn chặn các yêu cầu mạng (thông qua sự kiện
fetch) và theo dõi các sự kiện của API Đẩy ở chế độ nền (thông qua sự kiệnpush). - Một trang có thể tạo nhiều trình chạy web, nhưng một trình chạy dịch vụ sẽ kiểm soát tất cả các thẻ đang hoạt động trong phạm vi mà trang đó đã được đăng ký.
- Vòng đời của trình chạy web được liên kết chặt chẽ với thẻ chứa nó, trong khi vòng đời của trình chạy dịch vụ thì độc lập với nó. Do đó, việc đóng thẻ nơi một trình chạy web đang chạy sẽ chấm dứt thẻ đó, trong khi một trình chạy dịch vụ có thể tiếp tục chạy trong nền, ngay cả khi trang web không có thẻ đang hoạt động nào đang mở.
Trường hợp sử dụng
Sự khác biệt giữa hai loại trình thực thi này cho thấy trong những trường hợp mà một trình thực thi có thể cần sử dụng một trong hai trình thực thi này:
Các trường hợp sử dụng cho trình thực thi trên web thường liên quan hơn đến việc giảm tải công việc (chẳng hạn như các phép tính nặng) sang một luồng phụ để tránh chặn giao diện người dùng.
- Ví dụ: nhóm phát triển trò chơi điện tử PROXX muốn để lại luồng chính miễn phí nhất có thể để xử lý hoạt động đầu vào và ảnh động của người dùng. Để đạt được điều đó, họ đã sử dụng trình thực thi web để chạy logic trò chơi và bảo trì trạng thái trên một luồng riêng.
Nhiệm vụ của trình chạy dịch vụ thường liên quan nhiều hơn đến việc hoạt động như một proxy mạng, xử lý tác vụ trong nền và những tác vụ như lưu vào bộ nhớ đệm và ngoại tuyến.
Ví dụ: Trong PWA podcast, có thể người dùng muốn cho phép người dùng tải các tập hoàn chỉnh xuống để nghe khi không có mạng. Bạn có thể sử dụng một trình chạy dịch vụ và đặc biệt là API Tìm nạp trong nền cho mục đích đó. Bằng cách đó, nếu người dùng đóng thẻ khi tập đang tải xuống, thì tác vụ sẽ không bị gián đoạn.
Công cụ và thư viện
Có thể triển khai hoạt động giao tiếp qua cửa sổ và worker bằng cách sử dụng các API cấp thấp hơn. May mắn là có nhiều thư viện giúp tóm tắt quy trình này để xử lý các trường hợp sử dụng phổ biến nhất. Trong phần này, chúng tôi sẽ đề cập đến hai phần tử tương ứng giúp xử lý cửa sổ cho trình chạy web và trình chạy dịch vụ: Comlink và Workbox.
Comlink
Comlink là một thư viện RPC nhỏ (1,6k) xử lý nhiều thông tin chi tiết cơ bản khi xây dựng trang web sử dụng Web Worker. API này đã được dùng trong các trang web như PROXX và Squoosh. Bạn có thể xem một bản tóm tắt về động lực và mã mẫu tại đây.
Workbox
Workbox là một thư viện phổ biến để xây dựng các trang web sử dụng trình chạy dịch vụ. Mô-đun này đóng gói một tập hợp các phương pháp hay nhất về những tính năng như lưu vào bộ nhớ đệm, khi không có mạng, đồng bộ hoá nền, v.v. Mô-đun workbox-window mang đến một cách thuận tiện để trao đổi tin nhắn giữa trình chạy dịch vụ và trang.
Các bước tiếp theo
Phần còn lại của loạt bài này tập trung vào các mẫu giao tiếp giữa cửa sổ và nhân viên dịch vụ:
- Hướng dẫn lưu vào bộ nhớ đệm ngụ ý: Gọi một trình chạy dịch vụ từ trang vào bộ nhớ đệm trước (ví dụ: trong các trường hợp tìm nạp trước).
- Thông tin cập nhật truyền tin: Gọi trang từ trình chạy dịch vụ để thông báo về các thông tin cập nhật quan trọng (ví dụ: có phiên bản mới của trang web).
- Giao tiếp hai chiều: Uỷ quyền một nhiệm vụ cho một nhân viên dịch vụ (ví dụ: tải nhiều tệp xuống) và luôn thông báo cho trang về tiến trình.
Để biết các mẫu giao tiếp giữa cửa sổ và trình chạy web, hãy tham khảo bài viết: Sử dụng web worker để chạy JavaScript ra khỏi luồng chính của trình duyệt.