Trình xử lý đầu vào có thể là nguyên nhân gây ra các vấn đề về hiệu suất trong ứng dụng, 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.
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, 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 các tác vụ bố cục bổ sung và không cần thiết.
Tóm tắt
- Tránh dùng các trình xử lý đầu vào chạy trong thời gian dài vì 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ý của bạn; 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 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ỳ công việc nào, nơi JavaScript, bố cục, kiểu hoặc sơn đượ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 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 đề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ý 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);
Việc này cũng có thêm lợi ích là giúp trình xử lý đầu vào của bạn nhẹ hơn. Điều này thậ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ã có tính toán tốn kém!