Trình xử lý đầu vào có thể là nguyên nhân tiềm ẩn gây ra vấn đề về hiệu suất trong ứng dụng của bạn, vì chúng có thể chặn không cho các khung hình hoàn thành, cũng như gây ra những thao tác bố cục bổ sung không cần thiết.
Trình xử lý đầu vào là nguyên nhân tiềm ẩn gây ra các vấn đề về hiệu suất trong ứng dụng, chẳng hạn như chúng có thể chặn khung hình hoàn thành và có thể gây ra bố cục.
Tóm tắt
- Tránh các trình xử lý đầu vào chạy trong thời gian dài; chúng có thể chặn thao tác cuộn.
- Đừng thay đổi kiểu trong trình xử lý đầu vào.
- Gỡ bỏ trình xử lý; lưu trữ các giá trị sự kiện và xử lý các thay đổi về kiểu trong lệnh gọi lại requestAnimationFrame tiếp theo.
Tránh các trình xử lý đầu vào chạy trong thời gian dài
Trong trường hợp nhanh nhất có thể, khi một người dùng tương tác với trang, chuỗi trình tổng hợp của trang có thể lấy thông tin nhập bằng cách chạm của người dùng và chỉ cần di chuyển nội dung xung quanh. Bạn không cần phải làm gì theo luồng chính, nơi đã thực hiện JavaScript, bố cục, kiểu hoặc tô màu.
Tuy nhiên, nếu bạn đính kèm một trình xử lý đầu vào, chẳng hạn như touchstart, touchmove hoặc touchend, thì luồng tổng hợp phải đợi trình xử lý này thực thi xong vì bạn có thể chọn gọi preventDefault() và ngừng thao tác cuộn bằng thao tác chạm. Ngay cả khi bạn không gọi preventDefault(), trình tổng hợp vẫn phải đợi và thao tác cuộn của người dùng sẽ bị chặn. Điều này có thể dẫn đến tình trạng kết xuất gián đoạn và bỏ lỡ khung hình.
Tóm lại, bạn phải đảm bảo rằng mọi trình xử lý đầu vào mà bạn chạy sẽ thực thi nhanh chóng và cho phép trình tổng hợp thực hiện công việc của mình.
Tránh thay đổi kiểu trong trình xử lý đầu vào
Các trình xử lý đầu vào, chẳng hạn như trình xử lý thao tác cuộn và chạm, được lên lịch chạy ngay trước mọi lệnh gọi lại requestAnimationFrame.
Nếu bạn thay đổi hình ảnh bên trong một trong các trình xử lý đó, thì ở đầu requestAnimationFrame, sẽ có những thay đổi về kiểu đang chờ xử lý. Nếu sau đó bạn đọc các thuộc tính hình ảnh khi bắt đầu lệnh gọi lại requestAnimationFrame, thì theo lời khuyên trong bài viết "Tránh tình trạng đơ bố cục và bố cục lớn, phức tạp", bạn sẽ kích hoạt bố cục đồng bộ bắt buộc!
Gỡ bỏ trình xử lý cuộn
Giải pháp cho cả hai vấn đề trên là như nhau: bạn phải luôn đưa ra các thay đổi hình ảnh đối với lệnh gọi lại requestAnimationFrame tiếp theo:
function onScroll (evt) {
// Store the scroll value for laterz.
lastScrollY = window.scrollY;
// Prevent multiple rAF callbacks.
if (scheduledAnimationFrame)
return;
scheduledAnimationFrame = true;
requestAnimationFrame(readAndUpdatePage);
}
window.addEventListener('scroll', onScroll);
Thao tác này cũng có thêm lợi ích là giữ cho trình xử lý đầu vào của bạn luôn sáng. Điều này thật tuyệt vì giờ đây bạn không chặn những hoạt động như cuộn hoặc chạm vào mã tính toán tốn kém!