Cách tạo ảnh động CSS hiệu suất cao

Kayce Basques

Rachel Andrew Technical Writer

Hướng dẫn này chỉ cho bạn cách tạo ảnh động CSS hiệu suất cao.

Hãy xem phần Tại sao một số ảnh động bị chậm? để tìm hiểu lý thuyết đằng sau các đề xuất này.

Khả năng tương thích với trình duyệt

Tất cả các thuộc tính CSS mà hướng dẫn này đề xuất đều có khả năng hỗ trợ tốt trên nhiều trình duyệt.

transform

Browser Support

• 36
• 12
• 16
• 9

Source

opacity

Browser Support

• 1
• 12
• 1
• 2

Source

will-change

Browser Support

• 36
• 79
• 36
• 9.1

Source

Di chuyển một phần tử

Để di chuyển một phần tử, hãy sử dụng giá trị từ khoá translate hoặc rotation của thuộc tính transform.

Ví dụ: để trượt một mục vào khung hiển thị, hãy sử dụng translate.

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

Sử dụng rotate để xoay các phần tử. Ví dụ sau đây xoay một phần tử 360 độ.

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Đổi kích thước phần tử

Để đổi kích thước một phần tử, hãy sử dụng giá trị từ khoá scale của thuộc tính transform.

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

Thay đổi chế độ hiển thị của một phần tử

Để hiện hoặc ẩn một phần tử, hãy sử dụng opacity.

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Lưu ý: Tìm các ví dụ về sao chép và dán của nhiều ảnh động tại Animista.

Tránh các thuộc tính kích hoạt bố cục hoặc vẽ

Trước khi sử dụng bất kỳ thuộc tính CSS nào cho ảnh động (ngoài transform và opacity), hãy xác định tác động của thuộc tính đó đối với quy trình kết xuất. Tránh mọi thuộc tính kích hoạt bố cục hoặc hiển thị trừ phi thực sự cần thiết.

Cảnh báo: Nếu phải sử dụng một thuộc tính kích hoạt bố cục hoặc vẽ, bạn có thể sẽ không duy trì được ảnh động mượt mà hoặc có hiệu suất cao.

Buộc tạo lớp

Như đã giải thích trong phần Tại sao một số ảnh động lại chậm?, việc đặt các phần tử trên một lớp mới cho phép trình duyệt vẽ lại các phần tử đó mà không cần vẽ lại phần còn lại của bố cục.

Trình duyệt thường có thể đưa ra quyết định chính xác về những mục nên được đặt trên một lớp mới, nhưng bạn có thể buộc tạo lớp theo cách thủ công bằng thuộc tính will-change. Đúng như tên gọi, thuộc tính này cho trình duyệt biết rằng phần tử này sẽ được thay đổi theo một cách nào đó.

Thận trọng: Vì việc tạo lớp có thể gây ra các vấn đề khác về hiệu suất, nên bạn không nên sử dụng lớp này trong giai đoạn đầu của quy trình tối ưu hoá. Thay vào đó, chỉ sử dụng thuộc tính này nếu bạn nhận thấy các vấn đề về đồ hoạ và cho rằng việc nâng cấp một phần tử lên một lớp mới có thể giúp ích.

Trong CSS, bạn có thể áp dụng will-change cho bất kỳ bộ chọn nào:

body > .sidebar {
  will-change: transform;
}

Tuy nhiên, quy cách đề xuất rằng bạn chỉ nên thêm thuộc tính này vào các phần tử luôn sắp thay đổi. Ví dụ: bạn có thể dùng thuộc tính này cho thanh bên mà người dùng có thể trượt vào và ra. Nếu phần tử không thay đổi thường xuyên, hãy áp dụng will-change bằng JavaScript khi có khả năng xảy ra thay đổi. Hãy nhớ cho trình duyệt đủ thời gian để thực hiện các hoạt động tối ưu hoá cần thiết và xoá thuộc tính khi thay đổi đã dừng.

Để buộc tạo lớp trong trình duyệt không hỗ trợ will-change, bạn có thể đặt transform: translateZ(0).

Gỡ lỗi ảnh động chậm hoặc bị lỗi

Chrome DevTools và Firefox DevTools có thể giúp bạn tìm ra lý do khiến ảnh động bị chậm hoặc bị lỗi.

Kiểm tra xem ảnh động có kích hoạt bố cục hay không

Ảnh động di chuyển một phần tử bằng cách sử dụng một thuộc tính khác ngoài transform có thể sẽ chậm. Ví dụ sau đây so sánh ảnh động sử dụng transform với ảnh động sử dụng top và left.

Không nên

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

Nên

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

Bạn có thể kiểm tra điều này trong hai ví dụ sau và khám phá hiệu suất bằng Công cụ cho nhà phát triển.

• Trước, với ảnh động top và left.
• Sau khi có transform.

Công cụ của Chrome cho nhà phát triển

1. Mở bảng điều khiển Hiệu suất.
2. Ghi lại hiệu suất trong thời gian chạy trong khi ảnh động đang diễn ra.
3. Kiểm tra thẻ Summary (Tóm tắt).

Nếu bạn thấy giá trị khác 0 cho Rendering (Hiển thị) trong thẻ Summary (Tóm tắt), thì có thể ảnh động của bạn đang khiến trình duyệt thực hiện công việc bố cục.

Ví dụ về ảnh động có thuộc tính top-left gây ra hoạt động kết xuất.

Ví dụ về ảnh động có phép biến đổi không gây ra hoạt động kết xuất.

Công cụ của Firefox cho nhà phát triển

Trong Công cụ cho nhà phát triển của Firefox, Waterfall (Thác nước) có thể giúp bạn hiểu được trình duyệt đang dành thời gian cho việc gì.

1. Mở bảng điều khiển Hiệu suất.
2. Bắt đầu ghi lại hiệu suất trong khi ảnh động đang diễn ra.
3. Dừng ghi và kiểm tra thẻ Waterfall (Thác nước).

Nếu bạn thấy các mục nhập cho Recalculate Style (Tính toán lại kiểu), thì tức là trình duyệt phải quay lại điểm bắt đầu của thác nước kết xuất để kết xuất ảnh động.

Kiểm tra khung hình bị rớt

1. Mở thẻ Kết xuất trong Chrome DevTools.
2. Chọn hộp đánh dấu FPS meter (Đồng hồ đo FPS).
3. Xem các giá trị trong khi ảnh động chạy.

Chú ý đến nhãn Frames (Khung hình) ở đầu giao diện người dùng FPS meter (Đồng hồ đo FPS). Cột này cho thấy các giá trị như 50% 1 (938 m) dropped of 1878. Ảnh động có hiệu suất cao sẽ có tỷ lệ phần trăm cao, chẳng hạn như 99%, nghĩa là có ít khung hình bị bỏ qua và ảnh động trông mượt mà.

Ví dụ về ảnh động có thuộc tính top-left khiến 50% khung hình bị bỏ qua.

Ví dụ về ảnh động có phép biến đổi chỉ khiến 1% số khung hình bị rớt.

Kiểm tra xem ảnh động có kích hoạt quá trình vẽ hay không

Một số thuộc tính khiến trình duyệt tốn nhiều tài nguyên hơn để vẽ so với các thuộc tính khác. Ví dụ: bất kỳ nội dung nào liên quan đến hiệu ứng làm mờ (chẳng hạn như bóng đổ) đều mất nhiều thời gian để vẽ hơn so với việc vẽ một hộp màu đỏ. Những điểm khác biệt này không phải lúc nào cũng rõ ràng trong CSS, nhưng Công cụ cho nhà phát triển của trình duyệt có thể giúp bạn xác định những khu vực cần được vẽ lại, cũng như các vấn đề khác về hiệu suất liên quan đến việc vẽ.

Công cụ của Chrome cho nhà phát triển

1. Mở thẻ Kết xuất trong Chrome DevTools.
2. Chọn Paint Flashing (Nhấp nháy khi vẽ).
3. Di chuyển con trỏ xung quanh màn hình.

Trong ví dụ này từ Google Maps, bạn có thể thấy các phần tử đang được vẽ lại.

Nếu bạn thấy toàn bộ màn hình nhấp nháy hoặc các vùng được làm nổi bật mà bạn cho rằng không nên thay đổi, hãy tìm hiểu thêm.

Nếu bạn cần xác định xem một thuộc tính cụ thể có gây ra các vấn đề về hiệu suất liên quan đến việc tạo điểm ảnh hay không, thì trình phân tích tạo điểm ảnh trong Chrome DevTools có thể giúp bạn.

Công cụ của Firefox cho nhà phát triển

1. Mở Cài đặt rồi thêm nút Hộp công cụ cho Bật/tắt tính năng nhấp nháy khi vẽ.
2. Trên trang bạn muốn kiểm tra, hãy bật nút này rồi di chuyển chuột hoặc cuộn để xem các vùng được làm nổi bật.

Tạo ảnh động ở giai đoạn kết hợp

Nếu có thể, hãy hạn chế ảnh động ở opacity và transform để giữ ảnh động ở giai đoạn kết hợp của đường dẫn kết xuất. Sử dụng Công cụ cho nhà phát triển để kiểm tra xem giai đoạn nào của đường dẫn đang chịu ảnh hưởng của ảnh động.

Sử dụng trình phân tích vẽ để xem có thao tác vẽ nào đặc biệt tốn kém hay không. Nếu bạn tìm thấy bất kỳ thuộc tính nào, hãy kiểm tra xem một thuộc tính CSS khác có mang lại giao diện tương tự nhưng có hiệu suất tốt hơn hay không.

Hãy sử dụng thuộc tính will-change một cách tiết kiệm và chỉ khi bạn gặp phải vấn đề về hiệu suất.