Ả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ì nếu tốc độ thấp hơn, người dùng sẽ nhận thấy hiện tượng giật hoặc bị treo và điều này sẽ ảnh hưở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.
• Các thuộc tính ảnh động thay đổi hình học của trang (bố cục) hoặc gây ra hoạt động vẽ đặ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ẽ tốn ít chi phí hơn để tạo ảnh động 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ẽ thay đổi hình dạng của phần tử đó và có thể khiến 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 sẽ cần được vẽ, điều này thường tốn kém hơn cả 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 được xử lý bằng JavaScript hay CSS.

Đọ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, mọi phần tử trong chế độ xem hiện tại của ứng dụng mà bạn dự định tạo ảnh động đều phải bật will-change cho bất kỳ thuộc tính nào mà bạn dự định thay đổi. 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 cho các phép 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ợ gốc) thường được xử lý trên một luồng được gọi là "luồng trình kết hợp". Luồng này khác với "luồng chính" của trình duyệt, nơi thực thi kiểu, bố cục, vẽ và JavaScript. Đ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, đồng thời chi phí của bố cục hoặc sơn có thể sẽ nhỏ hơn bất kỳ công việc nào liên quan đến việc thực thi CSS hoặc JavaScript, khiến câu hỏi này trở nên vô nghĩa.