Ả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.

[Tên người]

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 giảm tốc độ, người dùng sẽ nhận thấy tình trạng gián đoạn hoặc đứng và bị ảnh hưởng tiêu cực đến trải nghiệm của họ.

  • Đảm bảo rằng ảnh động của bạn không gây ra vấn đề về hiệu suất; hãy đả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 thay đổi hình dạng của trang (bố cục) hoặc gây ra việc vẽ tranh đặc biệt tốn kém.
  • Nếu có thể, hãy tập trung thay đổi độ 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 gì.

Việc tạo ảnh động cho thuộc tính thì không miễn phí và một số thuộc tính sẽ rẻ hơn để tạo ảnh động so với các thuộc tính khác. Ví dụ: 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ể 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 (hay chỉnh 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 phần tử. Bất cứ khi nào bố cục được kích hoạt, thông thường sẽ cần vẽ trang hoặc một phần trên đó. Việc này thường thậm chí còn tốn kém hơn so với 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 tô màu. Đố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 trong opacity hoặc transform, cả hai trình duyệt đều có thể tối ưu hoá. Điều này sẽ không quan trọng nếu ảnh động do JavaScript hoặc 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

Hỗ trợ trình duyệt

  • 36
  • 79
  • 36
  • 9.1

Nguồn

Sử dụng will-change để đảm bảo trình duyệt biết rằng bạn dự đị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 đặt trước các biện pháp tối ưu hoá phù hợp nhất 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 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 dùng will-change trên các phần tử ảnh động. Do đó, 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 định tạo ảnh động đều phải bật will-change cho mọi thuộc tính mà bạn định thay đổi. Trong trường hợp mẫu hộp mà chúng ta đã sử dụng trong suốt 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 có hỗ trợ tính năng này, hiện là các trình duyệt hiện đại nhất, sẽ thực hiện các hoạt động tối ưu hoá thích hợp để hỗ trợ 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 nhận xét trên web thảo luận về giá trị tương đối của ảnh động CSS và JavaScript từ góc độ hiệu suất. Dưới đâ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 được hỗ trợ một cách tự nhiên, thường được xử lý trên một luồng được gọi là "chuỗi trình tổng hợp". Luồng này khác với "chuỗi chính" của trình duyệt, nơi thực thi định 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 hoạt động mà không bị gián đoạn.

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

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