Quá trình kết xuất của trình duyệt sẽ chuyển mã của bạn thành trang web mà người dùng sẽ tương tác (interact). Theo mặc định, quá trình kết xuất của luồng chính (main thread) thường xử lý phần lớn mã: nó phân tích cú pháp HTML và xây dựng DOM, phân tích cú pháp CSS và áp dụng các style cụ thể, và phân tích cú pháp (parse), đánh giá (evaluate) cũng như thực thi (excute) JavaScript.
Luồng chính cũng xử lý các sự kiện người dùng (user events). Vì thế, bất cứ khi nào luồng chính bận rộn làm điều gì đó, trang web của bạn có thể không phản hồi tương tác của người dùng, điều này dẫn đến trải nghiệm người dùng tệ hại.
Cách Lighthouse kiểm tra công việc luồng chính có vấn đề
Lighthouse bật cờ cảnh báo với các trang mà có luồng chính bận rộn dài hơn 4 giây trong quá trình tải:
Để giúp bạn xác định các nguồn tải của luồng chính, Lighthouse hiển thị thời gian CPU phải dùng một cách riêng rẽ khi trình duyệt tải trang của bạn.
Cách giảm tải cho công việc của luồng chính
Nhiều hoạt động, chẳng hạn như phân tích cú pháp CSS và lên layout trang có thể làm cho luồng chính bận rộn. Dù vậy, phân tích cú pháp, biên dịch, và thực thi JavaScript mới thường là gánh nặng lớn nhất trên luồng chính.
Bạn nên cân nhắc các chiến thuật sau để cải thiện hiệu suất, tốc độ JavaScript trong suốt quá trình tải trang:
- Chỉ gửi các đoạn mã mà người dùng của bạn cần bằng cách triển khai tách mã (code splitting);
- Tối thiểu hóa và nén mã của bạn;
- Loại bỏ mã không sử dụng;
- Giảm các vòng mạng bằng cách cache mã của bạn bằng mô hình PRPL.
Với những cách cải thiện tốc độ trang khác, bạn hãy tham khảo các bài viết về kiểm tra hiệu suất.
(Dịch từ bài viết Minimize main thread work, trang web[.]dev)
