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

Ảnh động phải hoạt động hiệu quả, nếu không thì 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ẽ dễ nhận thấy đố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 đảm bảo rằng ảnh động của bạn 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.
• Nếu có thể, hãy chú ý đến sự thay đổi của các biến đổi và độ mờ.
• Sử dụng will-change để đảm bảo rằng trình duyệt biết bạn định tạo ảnh động nội dung gì.

Tạo ảnh động thuộc tính không miễn phí và một số thuộc tính tạo ảnh động có chi phí 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 chỉnh sửa trong các trình duyệt dựa trên Gecko như Firefox) và có thể gây 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 bạn sẽ cần vẽ một trang hoặc một phần của trang đó, việc này thường thậm chí còn tốn kém hơn so với thao tác của bố cục.

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 lớp 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 loại ảnh động mà trình duyệt đều có thể tối ưu hoá cao; không quan trọng là ảnh động do JavaScript hay CSS xử lý.

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

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

Hãy 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ử. Việc này cho phép trình duyệt đưa ra 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ì làm như vậ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 sự 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 sử dụng will-change để tạo ảnh động cho các phần tử. Trong hầu hết các trường hợp, bạn phải 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à trình duyệt hiện đại nhất, sẽ thực hiện các biện pháp tối ưu hoá phù hợp nâng cao để 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ề ưu thế tương đối của CSS và hoạt ảnh 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 (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. Tức 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ì những ả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, những thay đổi khác đối với sự biến đổi và độ mờ cũng có thể được luồng trình tổng hợp xử lý.

• Nếu có ảnh động kích hoạt thao tác 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ả hoạt ảnh 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.