Tăng tốc sự kiện cuộn với trình xử lý sự kiện thụ động
Được rồi, hãy để tôi giải quyết chuyện này thật nhanh. Tôi ghét các trang web đính kèm các sự kiện wheel (hoặc touchstart và touchmove ) vào một trang. Hoàn toàn ghét họ. Lý do chính là hiệu suất kết quả tồi tệ, đặc biệt là trên thiết bị di động. Bạn thấy đấy, trình duyệt phải đợi để vẽ lại trang cho đến khi trình xử lý sự kiện kết thúc quá trình thực thi, vì sự kiện có thể bị hủy. Nếu sự kiện của bạn chạy trên mỗi lần cuộn, thì việc cuộn trang sẽ trở nên vô cùng phức tạp, đặc biệt nếu bạn không xóa các sự kiện. Rất may, bây giờ có một giải pháp: Người nghe sự kiện thụ động .
Trình xử lý sự kiện thụ động cho phép bạn đính kèm các trình xử lý không thể hủy bỏ vào các sự kiện, cho phép trình duyệt tối ưu hóa xung quanh trình xử lý sự kiện của bạn. Sau đó, trình duyệt có thể tiếp tục cuộn ở tốc độ root mà không cần đợi trình xử lý sự kiện của bạn hoàn thành việc thực thi.
Mặc dù chúng là một bổ sung tương đối mới cho thông số kỹ thuật, chúng đã được hỗ trợ bởi hầu hết những người chơi lớn . (Về cơ bản, tất cả mọi người ngoại trừ IE, Edge và Opera Mini.)
Ngoài ra, việc sử dụng chúng sao cho chúng không thực sự phá vỡ hành vi hiện có. Nếu bạn cần hỗ trợ các trình duyệt khác, bạn có thể sử dụng polyfill này.
Sử dụng
Thật không may, việc sử dụng các sự kiện bị động là khá phức tạp.
Giả sử mã root của bạn giống như sau:
// Really, if you're using wheel, you should instead be using the 'scroll' event, as it's passive by default.
document.addEventListener('wheel', (evt) => {
// ... do stuff with evt
}, true)
Bạn cần thay thế nó bằng cái này:
document.addEventListener('wheel', (evt) => {
// ... do stuff with evt
}, {
capture: true,
passive: true
})
Vâng. Tôi biết. Hầu như không thể quấn quanh đầu của bạn. 😉
Hãy để tôi cố gắng giải thích.
Vì vậy, thường khi đăng ký các sự kiện cuộn, bạn thêm tham số cuối cùng, true , để cho biết rằng sự kiện của bạn sẽ chạy trong giai đoạn bắt. (tức là. từ trên xuống thay vì từ dưới lên)
Một trong những tính năng mới cho phép các sự kiện thụ động là thông số EventListenerOptions . Nghe có vẻ đáng sợ, nhưng nó thực sự chỉ là tùy chọn thay thế boolean chụp đó bằng một đối tượng có một vài thuộc tính. Trong trường hợp này, ta có thể đặt capture thành true để nhận được kết quả giống như ví dụ đầu tiên, sau đó đặt passive thành true để làm cho sự kiện bị động.
Để cải thiện hiệu suất hơn nữa, hãy đảm bảo bạn đang điều chỉnh hoặc gỡ lỗi các sự kiện của bạn . :)
Sử dụng
Các sự kiện với hình phạt hiệu quả nhận thức lớn nhất (nói rằng năm lần nhanh) trên điện thoại di động đang di chuyển, bánh xe, touchstart, và touchmove. Theo mặc định, Scroll đã bị động, do đó sẽ loại bỏ một sự kiện ra khỏi phương trình. Kể từ Chrome 55, cảm ứng khởi động và cảm ứng cũng thụ động.
Vì vậy, nếu bạn đang xử lý bất kỳ sự kiện nào trong số bốn sự kiện đó trên thiết bị di động, bạn không thể bỏ qua polyfill nhỏ bé đó và thêm { passive: true } vào các sự kiện đó. 99% thời gian bạn sẽ không cần phải hủy các sự kiện đó nữa và việc sử dụng { passive: true } có thể tăng hiệu suất đáng kể. Vậy tại sao không?
Các tin liên quan
