Tối ưu hoá việc thực thi JavaScript

JavaScript thường kích hoạt các thay đổi về hình ảnh. Đôi khi, việc này xảy ra trực tiếp thông qua các thao tác với kiểu, và đôi khi là các phép tính dẫn đến thay đổi về hình ảnh, chẳng hạn như tìm kiếm hoặc sắp xếp dữ liệu. JavaScript chạy trong thời gian dài hoặc không đúng thời điểm là nguyên nhân phổ biến gây ra các vấn đề về hiệu suất. Bạn nên tìm cách giảm thiểu tác động của vấn đề này khi có thể.

JavaScript thường kích hoạt các thay đổi về hình ảnh. Đôi khi, việc này diễn ra trực tiếp thông qua các thao tác kiểu, và đôi khi là các phép tính dẫn đến thay đổi về hình ảnh, chẳng hạn như tìm kiếm hoặc sắp xếp dữ liệu. JavaScript chạy trong thời gian dài hoặc không đúng thời điểm là nguyên nhân phổ biến gây ra các vấn đề về hiệu suất. Bạn nên tìm cách giảm thiểu tác động của vấn đề này khi có thể.

Phân tích hiệu suất JavaScript có thể là một nghệ thuật, vì JavaScript bạn viết không giống với mã thực sự được thực thi. Các trình duyệt hiện đại sử dụng trình biên dịch JIT và mọi phương thức tối ưu hoá cũng như thủ thuật để cố gắng mang lại cho bạn tốc độ thực thi nhanh nhất có thể. Điều này thay đổi đáng kể tính linh động của mã.

Tuy nhiên, có một số việc bạn chắc chắn có thể làm để giúp ứng dụng thực thi tốt JavaScript.

Tóm tắt

• Tránh sử dụng setTimeout hoặc setInterval để cập nhật hình ảnh; hãy luôn sử dụng requestAnimationFrame.
• Di chuyển JavaScript chạy trong thời gian dài khỏi luồng chính sang Web Worker.
• Sử dụng các tác vụ vi mô để thực hiện các thay đổi đối với DOM trên một số khung.
• Sử dụng Tiến trình và Trình phân tích tài nguyên JavaScript của Chrome DevTools để đánh giá tác động của JavaScript.

Sử dụng requestAnimationFrame cho các thay đổi về hình ảnh

Khi các thay đổi về hình ảnh đang diễn ra trên màn hình, bạn muốn thực hiện công việc của mình vào đúng thời điểm cho trình duyệt, tức là ngay từ đầu khung. Cách duy nhất để đảm bảo rằng JavaScript sẽ chạy ở đầu khung là sử dụng requestAnimationFrame.

/**
    * If run as a requestAnimationFrame callback, this
    * will be run at the start of the frame.
    */
function updateScreen(time) {
    // Make visual updates here.
}

requestAnimationFrame(updateScreen);

Khung hoặc mẫu có thể sử dụng setTimeout hoặc setInterval để thực hiện các thay đổi về hình ảnh như ảnh động, nhưng vấn đề ở đây là lệnh gọi lại sẽ chạy tại một thời điểm trong khung, có thể ngay ở cuối, và điều này thường có thể khiến chúng ta bỏ lỡ một khung hình, dẫn đến hiện tượng giật.