Tác vụ dài là mã JavaScript độc quyền luồng chính trong thời gian dài, khiến giao diện người dùng "đóng băng".
Trong khi trang đang tải, Tác vụ dài có thể liên kết luồng chính và khiến trang không phản hồi hoạt động đầu vào của người dùng, ngay cả khi trang có vẻ đã sẵn sàng. Các thao tác nhấp và nhấn thường không hoạt động vì các tính năng tương tác như trình nghe sự kiện và trình xử lý lượt nhấp chưa được đính kèm vào các thành phần trên giao diện người dùng. Do đó, Tác vụ dài có thể tăng đáng kể Thời gian phản hồi.
Giờ đây, Chrome DevTools có thể hình ảnh hoá các Tác vụ dài, giúp bạn dễ dàng xem những tác vụ cần tối ưu hoá.
Nhiệm vụ dài là gì?
Tác vụ dài gây hao tổn CPU là do công việc phức tạp mất nhiều thời gian hơn 50 ms. Mô hình RAIL đề xuất bạn xử lý các sự kiện đầu vào của người dùng trong 50 ms để đảm bảo phản hồi rõ ràng trong vòng 100 ms và duy trì kết nối giữa hành động và phản ứng.
Điểm chính: Mặc dù mô hình RAIL đề xuất cung cấp phản hồi hình ảnh cho hoạt động đầu vào của người dùng trong vòng 100 mili giây, nhưng ngưỡng của chỉ số Tương tác đến lượt vẽ tiếp theo (INP) cho phép tối đa 200 mili giây để đặt kỳ vọng có thể đạt được hơn, đặc biệt là đối với các thiết bị chậm hơn.
Trang của tôi có Tác vụ dài nào có thể làm chậm khả năng tương tác không?
Cho đến nay, bạn cần phải tìm "khối màu vàng dài" của tập lệnh có thời lượng trên 50 mili giây trong Chrome DevTools hoặc sử dụng Long Tasks API để tìm hiểu những tác vụ nào đang làm chậm khả năng tương tác.
Để giúp bạn dễ dàng thực hiện quy trình kiểm tra hiệu suất, DevTools hiện trực quan hoá các Tác vụ dài. Việc cần làm (hiển thị bằng màu xám) có cờ đỏ nếu đó là Việc cần làm dài hạn.
Cách sử dụng công cụ trực quan hoá mới:
- Ghi lại dấu vết trong Bảng điều khiển hiệu suất khi tải một trang web.
- Tìm cờ màu đỏ trong chế độ xem luồng chính. Bạn sẽ thấy các việc cần làm hiện được đánh dấu bằng màu xám và gắn nhãn Việc cần làm.
- Giữ con trỏ chuột trên thanh màu xám. Bạn sẽ thấy một hộp thoại cho biết thời lượng của tác vụ và liệu tác vụ đó có được coi là Tác vụ dài hay không.
Điều gì gây ra tác vụ dài?
Để tìm hiểu nguyên nhân của một tác vụ dài, hãy chọn thanh Task (Việc cần làm) màu xám. Trong ngăn bên dưới, hãy chọn Dưới lên và Nhóm theo hoạt động. Điều này cho phép bạn xem những hoạt động đóng góp nhiều nhất (tổng cộng) vào việc khiến tác vụ mất nhiều thời gian để hoàn tất. Trong ví dụ sau, nguyên nhân gây ra độ trễ có vẻ như là một tập hợp các truy vấn DOM tốn kém.
Có những cách phổ biến nào để tối ưu hoá Tác vụ dài?
Tập lệnh lớn thường là nguyên nhân chính gây ra Tác vụ dài. Hãy cân nhắc việc chia các phần đó ra. Ngoài ra, hãy chú ý đến các tập lệnh của bên thứ ba. Các tập lệnh này cũng có thể chứa các Tác vụ dài làm chậm quá trình nội dung chính trở nên tương tác.
Chia toàn bộ công việc của bạn thành các phần chạy trong vòng < 50 mili giây và chạy các phần này ở đúng vị trí và thời điểm. Một số trong số đó có thể nằm ngoài luồng chính, trong một worker dịch vụ. Để biết hướng dẫn về cách chia nhỏ các tác vụ dài, hãy xem bài viết Tối ưu hoá tác vụ dài và bài viết Rảnh cho đến khi khẩn cấp của Phil Walton.
Giữ cho trang của bạn thích ứng. Việc giảm thiểu Tác vụ dài là một cách hay để đảm bảo người dùng có trải nghiệm thú vị khi truy cập vào trang web của bạn. Để biết thêm thông tin về Tác vụ dài, hãy tham khảo bài viết Chỉ số hiệu suất tập trung vào người dùng.