Categories Tối ưu JavaScript

Giảm thời gian thực thi JavaScript

Khi JavaScript mất nhiều thời gian thực thi, nó sẽ làm chậm hiệu suất, tốc độ của trang theo một số cách:

  • Mạng: Nhiều byte hơn đồng nghĩa với thời gian tải dài hơn.
  • Phân tích cú pháp và biên dịch: Phân tích cú pháp và biên dịch diễn ra trong luồng chính. Khi luồng chính bận rộn, trang không thể phản hồi đầu vào của người dùng.
  • Thực thi: JavaScript cũng được thực thi trong luồng chính. Nếu trang của bạn chạy rất nhiều mã trước khi nó thực sự cần, điều đấy làm trì hoãn Time To Interactive, đây là một trong các chỉ số quan trọng liên quan đến cách người dùng nhận thức tốc độ trang của bạn.
  • Bộ nhớ: Nếu JavaScript của bạn cần nhiều tham chiếu, nó có khả năng sẽ tiêu thụ nhiều bộ nhớ. Trang sẽ bị janky và chậm khi chúng tiêu thụ nhiều bộ nhớ. Bộ nhớ bị leak (rò rỉ) có thể là nguyên nhân khiến trang của bạn bị đơ (freeze) hoàn toàn.

Cách Lighthouse kiểm tra thời gian thực thi JavaScript quá dài

Lighthouse hiển thị cảnh báo khi thời gian thực thi JavaScript nhiều hơn 2 giây. Kiểm tra phát hiện lỗi nếu nó thấy thời gian thực thi nhiều hơn 3,5 giây.

giảm thời gian thực thi JavaScript

Để giúp bạn xác định thành phần nào đóng góp nhiều nhất trong vấn đề thời gian thực thi, Lighthouse báo cáo thời gian thực thi, đánh giá và phân tích từng file JavaScript mà trang bạn tải.


Cách tăng tốc thực thi JavaScript

  • Chỉ gửi các 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 (minify) và nén mã (gzip / brotli) của bạn.
  • Loại bỏ các mã không sử dụng (điều này trong thực tế là cực kỳ khó khăn trên các trang web như WordPress).
  • Giảm các vòng mạng bằng cách caching mã của bạn với mẫu PRPL.

(Dịch từ bài viết Reduce JavaScript excution time, trang web[.]dev)

Back to Top