Trình xử lý đầu vào có thể gây ra các vấn đề về hiệu suất trong ứng dụng của bạn, vì chúng có thể chặn khung hình hoàn tất, cũng như có thể gây thêm tác vụ bố cục bổ sung và không cần thiết.
Trình xử lý đầu vào có thể là nguyên nhân tiềm ẩn gây ra các vấn đề về hiệu suất trong ứng dụng của bạn, vì chúng có thể chặn khung hình hoàn thành, cũng như có thể khiến bố cục phải thực hiện thêm và không cần thiết.
Tóm tắt
- Tránh các trình xử lý đầu vào chạy trong thời gian dài vì các trình xử lý này có thể chặn thao tác cuộn.
- Không thay đổi kiểu trong trình xử lý đầu vào.
- Gỡ bỏ trình xử lý của bạn; lưu trữ 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 người dùng tương tác với trang, chuỗi trình tổng hợp của trang có thể tiếp nhận thao tác 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. Việc này không yêu cầu luồng chính đã 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 của trình 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à dừ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. Khi đó, 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 nên đảm bảo mọi trình xử lý đầu vào mà bạn chạy đều phải 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ư các trình xử lý cuộn và chạm, được lên lịch để chạy ngay trước bất kỳ lệnh gọi lại requestAnimationFrame nào.
Nếu bạn thay đổi hình ảnh bên trong một trong các trình xử lý đó, thì khi bắt đầu requestAnimationFrame, các 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, như lời khuyên trong phần "Tránh bố cục lớn, phức tạp và tình trạng đơ bố cục" cho thấy, bạn sẽ kích hoạt một bố cục đồng bộ bắt buộc!
Huỷ 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 khắc phục các thay đổi về hình ảnh cho 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);
Việc này cũng mang lại lợi ích bổ sung khi đảm bảo trình xử lý đầu vào nhẹ nhàng. Điều này thật tuyệt vì giờ đây, bạn không chặn các hoạt động như cuộn hoặc chạm vào mã tính toán tốn kém!