Sử dụng trình nghe thụ động để cải thiện hiệu suất cuộn

Trình nghe sự kiện chạm và di chuyển con lăn chuột rất hữu ích trong việc theo dõi hoạt động tương tác của người dùng và tạo trải nghiệm cuộn tuỳ chỉnh, nhưng trình nghe này cũng có thể trì hoãn việc cuộn trang. Hiện tại, các trình duyệt không thể biết liệu trình nghe sự kiện có ngăn thao tác cuộn hay không. Vì vậy, các trình duyệt luôn đợi trình nghe hoàn tất quá trình thực thi trước khi cuộn trang. Trình nghe sự kiện thụ động giải quyết vấn đề này bằng cách cho bạn biết rằng trình nghe sự kiện sẽ không bao giờ ngăn thao tác cuộn.

Khả năng tương thích với trình duyệt

Hầu hết các trình duyệt đều hỗ trợ trình nghe sự kiện thụ động. Xem Khả năng tương thích với trình duyệt

Cách tính năng kiểm tra trình nghe sự kiện thụ động Lighthouse không thành công

Lighthouse sẽ gắn cờ các trình nghe sự kiện có thể trì hoãn thao tác cuộn trang:

Kiểm tra bằng Lighthouse cho thấy trang không sử dụng trình nghe sự kiện thụ động để cải thiện hiệu suất cuộn

Lighthouse sử dụng quy trình sau để xác định trình nghe sự kiện có thể ảnh hưởng đến hiệu suất cuộn:

  1. Thu thập tất cả trình nghe sự kiện trên trang.
  2. Lọc ra trình nghe không cảm ứng và không sử dụng bánh xe.
  3. Lọc ra những trình nghe gọi preventDefault().
  4. Lọc ra các trình nghe đến từ một máy chủ khác với trang.

Lighthouse lọc ra các trình nghe khỏi các máy chủ khác nhau vì có thể bạn không có quyền kiểm soát các tập lệnh này. Có thể có các tập lệnh của bên thứ ba đang gây hại cho hiệu suất cuộn của trang, nhưng các tập lệnh này không có trong báo cáo Lighthouse.

Cách tạo trình nghe sự kiện thành thụ động để cải thiện hiệu suất cuộn

Thêm cờ passive vào mọi trình nghe sự kiện mà Lighthouse đã xác định.

Nếu chỉ hỗ trợ các trình duyệt có hỗ trợ trình nghe sự kiện thụ động, bạn chỉ cần thêm cờ. Ví dụ:

document.addEventListener('touchstart', onTouchStart, {passive: true});

Nếu đang hỗ trợ các trình duyệt cũ không hỗ trợ trình nghe sự kiện thụ động, thì bạn cần sử dụng tính năng phát hiện tính năng hoặc polyfill. Hãy xem phần Phát hiện tính năng trong tài liệu giải thích về Trình nghe sự kiện thụ động của WICG để biết thêm thông tin.

Tài nguyên