Hiệu năng hoạt ảnh và tốc độ khung hình

Hoạt ảnh trên web có thể được thực hiện qua SVG, JavaScript, bao gồm <canvas> và WebGL, CSS animation, <video>, ảnh GIF động và thậm chí cả ảnh PNG động và các kiểu ảnh khác. Chi phí hiệu năng của việc hoạt ảnh một thuộc tính CSS có thể khác nhau giữa các thuộc tính, và việc hoạt ảnh các thuộc tính CSS tốn kém có thể dẫn đến jank khi trình duyệt vật lộn để đạt được tốc độ khung hình mượt mà.

Với media động, chẳng hạn video và ảnh GIF động, mối quan tâm hiệu năng chính là kích thước tệp - tải tệp đủ nhanh để không ảnh hưởng tiêu cực đến hiệu năng là vấn đề lớn nhất. Các hoạt ảnh dựa trên mã, dù là CSS, SVG, <canvas>, WebGL hay các hoạt ảnh JavaScript khác, có thể gây ra vấn đề hiệu năng ngay cả khi dung lượng băng thông nhỏ. Những hoạt ảnh này có thể tiêu tốn CPU và/hoặc gây giật.

Người dùng kỳ vọng mọi tương tác giao diện phải mượt và mọi giao diện phải phản hồi tốt. Hoạt ảnh có thể giúp trang web tạo cảm giác nhanh hơn và phản hồi hơn, nhưng hoạt ảnh cũng có thể làm trang web có cảm giác chậm và giật nếu không được thực hiện đúng. Giao diện người dùng phản hồi tốt có tốc độ khung hình 60 khung hình mỗi giây (fps). Mặc dù không phải lúc nào cũng có thể giữ được 60fps, việc duy trì tốc độ khung hình cao và ổn định cho tất cả các hoạt ảnh là rất quan trọng.

Với CSS animations, bạn chỉ định một số keyframes, mỗi keyframe dùng CSS để xác định diện mạo của phần tử ở một giai đoạn cụ thể của hoạt ảnh. Trình duyệt tạo hoạt ảnh như một quá trình chuyển tiếp từ keyframe này sang keyframe tiếp theo.

So với việc hoạt ảnh phần tử bằng JavaScript, CSS animations có thể dễ tạo hơn. Chúng cũng có thể cho hiệu năng tốt hơn, vì chúng cho trình duyệt kiểm soát nhiều hơn về thời điểm kết xuất khung hình, và bỏ qua khung hình nếu cần.

Tuy nhiên, chi phí hiệu năng của việc sửa đổi một thuộc tính CSS có thể khác nhau giữa các thuộc tính. Người ta thường công nhận rằng 60 khung hình mỗi giây là tốc độ mà hoạt ảnh sẽ trông mượt. Với tốc độ 60 khung hình mỗi giây, trình duyệt có 16,7 mili giây để thực thi script, tính toán lại style và layout nếu cần, và vẽ lại vùng đang được cập nhật. Script chậm và việc hoạt ảnh các thuộc tính CSS tốn kém có thể dẫn đến jank khi trình duyệt vật lộn để đạt được tốc độ khung hình mượt.