Trình xử lý đầu vào là một 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ể ngăn các khung hình hoàn tất và có thể gây ra thêm công việc bố cục không cần thiết.
Trình xử lý đầu vào là một 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 các khung hình hoàn tất và có thể gây ra thêm công việc bố cục 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; chúng có thể chặn thao tác cuộn.
- Không thay đổi kiểu trong trình xử lý đầu vào.
- Loại bỏ các trình xử lý trùng lặp; 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 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, luồng trình kết hợp của trang có thể nhận dữ liệu đầu vào cảm ứng 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 bất kỳ thao tác nào, trong đó JavaScript, bố cục, kiểu hoặc thao tác vẽ được thực hiện.
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 trình kết 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ăn hoạt động cuộn bằng thao tác chạm diễn ra. Ngay cả khi bạn không gọi preventDefault(), trình kết hợp vẫn phải đợi và do đó, 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.
Nói tóm lại, bạn nên đảm bảo rằng mọi trình xử lý dữ liệu đầu vào mà bạn chạy đều thực thi nhanh chóng và cho phép trình kết 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ý cho 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 thực hiện thay đổi về giao diện trong một trong các trình xử lý đó, thì khi bắt đầu requestAnimationFrame, sẽ có các thay đổi về kiểu đang chờ xử lý. Nếu sau đó đọc các thuộc tính trực quan 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à bố cục bị giật" đề xuất, bạn sẽ kích hoạt bố cục đồng bộ bắt buộc!
Giảm tần suất gọi trình xử lý thao tác cuộn
Giải pháp cho cả hai vấn đề trên đều giống nhau: bạn phải luôn loại bỏ 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 có thêm lợi ích là giúp các trình xử lý đầu vào của bạn hoạt động nhẹ nhàng, điều này rất tuyệt vời vì giờ đây bạn không chặn các thao tác như cuộn hoặc chạm vào mã tốn nhiều tài nguyên tính toán!