Ảnh động và hiệu suất

Ảnh động phải hoạt động hiệu quả, nếu không sẽ ảnh hưởng tiêu cực đến trải nghiệm người dùng.

Paul Lewis

Sam Thorogood

Duy trì tốc độ 60 khung hình/giây bất cứ khi nào bạn tạo ảnh động, vì bất kỳ kết quả nào ít dẫn đến tình trạng gián đoạn hoặc gián đoạn sẽ đáng chú ý đối với người dùng của bạn và tác động tiêu cực đến trải nghiệm của họ.

• Hãy cẩn thận để ảnh động không gây ra vấn đề về hiệu suất; đảm bảo rằng bạn biết tác động của việc tạo ảnh động cho một thuộc tính CSS nhất định.
• Việc tạo ảnh động cho các thuộc tính làm thay đổi hình dạng của trang (bố cục) hoặc gây ra việc vẽ là đặc biệt tốn kém.
• Khi có thể, hãy cố gắng thay đổi các phép biến đổi và độ mờ.
• Sử dụng will-change để đảm bảo trình duyệt biết bạn định tạo ảnh động.

Việc tạo ảnh động cho các thuộc tính không phải là miễn phí và một số thuộc tính sẽ có chi phí tạo ảnh động thấp hơn so với các thuộc tính khác. Ví dụ: việc tạo ảnh động cho width và height của một phần tử sẽ làm thay đổi hình dạng của phần tử đó và có thể làm cho các phần tử khác trên trang di chuyển hoặc thay đổi kích thước. Quá trình này được gọi là bố cục (hoặc lưu lại luồng trong các trình duyệt dựa trên Gecko như Firefox) và có thể tốn kém nếu trang của bạn có nhiều thành phần. Bất cứ khi nào bố cục được kích hoạt, trang hoặc một phần của trang đó thông thường sẽ cần được vẽ, việc này thường thậm chí còn tốn kém hơn so với chính thao tác bố cục đó.

Nếu có thể, bạn nên tránh tạo ảnh động cho các thuộc tính kích hoạt bố cục hoặc vẽ. Đối với hầu hết các trình duyệt hiện đại, điều này có nghĩa là giới hạn ảnh động ở opacity hoặc transform, cả hai đều có thể được trình duyệt tối ưu hoá cao; không quan trọng ảnh động do JavaScript hay CSS xử lý.

Đọc hướng dẫn đầy đủ về cách tạo ảnh động hiệu suất cao.

Sử dụng thuộc tính will-change

Sử dụng will-change để đảm bảo trình duyệt biết rằng bạn có ý định thay đổi thuộc tính của một phần tử. Điều này cho phép trình duyệt áp dụng các biện pháp tối ưu hoá phù hợp nhất trước khi bạn thực hiện thay đổi. Tuy nhiên, đừng lạm dụng will-change vì việc này có thể khiến trình duyệt lãng phí tài nguyên, từ đó gây ra nhiều vấn đề về hiệu suất hơn nữa.

Nguyên tắc chung là nếu ảnh động có thể được kích hoạt trong 200 mili giây tiếp theo, do hoạt động tương tác của người dùng hoặc do trạng thái của ứng dụng, thì bạn nên đặt will-change trên các phần tử ảnh động. Trong hầu hết các trường hợp, bạn nên bật will-change cho mọi thuộc tính mà bạn định thay đổi đối với mọi phần tử trong khung hiển thị hiện tại của ứng dụng mà bạn dự định tạo ảnh động. Trong trường hợp mẫu hộp mà chúng ta đã sử dụng trong các hướng dẫn trước, việc thêm will-change để biến đổi và độ mờ sẽ có dạng như sau:

.box {
  will-change: transform, opacity;
}

Giờ đây, các trình duyệt hỗ trợ tính năng này (hiện là hầu hết các trình duyệt hiện đại) sẽ thực hiện các biện pháp tối ưu hoá thích hợp để hỗ trợ việc thay đổi hoặc tạo ảnh động cho các thuộc tính đó.

Hiệu suất của CSS so với JavaScript

Có nhiều trang và chuỗi bình luận trên web thảo luận về các ưu điểm tương đối của ảnh động CSS và JavaScript từ góc độ hiệu suất. Sau đây là một vài điểm cần lưu ý:

• Ảnh động dựa trên CSS và Ảnh động trên web (nếu được hỗ trợ sẵn) thường được xử lý trên một luồng được gọi là "luồng trình tổng hợp". Điều này khác với "luồng chính" của trình duyệt, trong đó việc tạo kiểu, bố cục, tô màu và JavaScript được thực thi. Điều này có nghĩa là nếu trình duyệt đang chạy một số tác vụ tốn kém trên luồng chính, thì các ảnh động này có thể tiếp tục mà không bị gián đoạn.

• Trong nhiều trường hợp, luồng trình kết hợp cũng có thể xử lý các thay đổi khác đối với phép biến đổi và độ mờ.

• Nếu bất kỳ ảnh động nào kích hoạt quá trình vẽ, bố cục hoặc cả hai, thì "luồng chính" sẽ được yêu cầu thực hiện công việc. Điều này đúng với cả ảnh động dựa trên CSS và JavaScript cũng như chi phí của bố cục hoặc màu vẽ có thể sẽ cản trở bất kỳ công việc nào liên quan đến việc thực thi CSS hoặc JavaScript, hiển thị câu hỏi moot.