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

Kayce Basques

Rachel Andrew

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

Hãy xem phần Tại sao một số ảnh động lại chậm? để tìm hiểu lý thuyết đằng sau những đề 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 dùng các 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);
  }
}

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 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 dùng opacity.

.animate {
  animation: opacity 2.5s both;
}

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

Lưu ý: Bạn có thể tìm thấy các ví dụ về thao tác sao chép và dán đối với nhiều ảnh động tại Animista.

Tránh các thuộc tính kích hoạt bố cục hoặc hiển thị

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 vẽ, trừ phi thực sự cần thiết.

Cảnh báo: Nếu phải dùng một thuộc tính kích hoạt bố cục hoặc vẽ, có thể bạn sẽ không thể duy trì ả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ạy 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.

Thông thường, các trình duyệt có thể đưa ra quyết định đúng đắn về những mục cầ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ẽ bị 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 ở giai đoạn đầu của quy trình tối ưu hoá. Thay vào đó, bạn chỉ nên sử dụng phương thức này nếu nhận thấy vấn đề về đồ hoạ và cho rằng việc chuyển 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 những phần tử sắp thay đổi. Ví dụ: bạn có thể dùng thuộc tính này cho một 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. Đảm bảo bạn cho trình duyệt đủ thời gian để thực hiện các bước 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 của bạn bị chậm hoặc gặp trục trặc.

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 thứ gì đó khác với transform có khả năng chạy chậm. Ví dụ sau đây so sánh một ảnh động dùng transform với một ảnh động 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 thử điều này trong 2 ví dụ sau và khám phá hiệu suất bằng Công cụ cho nhà phát triển.

• Trước khi sử dụng ảnh động top và left.
• Sau đó, với 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ẻ Tóm tắt.

Nếu bạn thấy giá trị khác 0 cho Kết xuất trong thẻ Tóm tắt, thì có thể điều này có nghĩa là ả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ụ animation-with-top-left gây ra hoạt động kết xuất.

Ví dụ animation-with-transform không gây ra hoạt động kết xuất.

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

Trong Firefox DevTools, Waterfall (Thác nước) có thể giúp bạn biết được trình duyệt đang dành thời gian ở đâu.

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ẻ Thác nước.

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

Kiểm tra xem có khung hình nào bị bỏ qua hay không

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

Chú ý đến nhãn Khung hình ở đầu giao diện người dùng đồng hồ đo FPS. Điều 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 có tỷ lệ phần trăm cao, chẳng hạn như 99%, nghĩa là có ít khung hình bị loại bỏ và ảnh động trông mượt mà.

Ví dụ animation-with-top-left khiến 50% khung hình bị loại bỏ

Ví dụ animation-with-transform chỉ khiến 1% khung hình bị loại bỏ.

Kiểm tra xem một ảnh động có kích hoạt thao tác kết xuất hay không

Một số thuộc tính tốn nhiều chi phí hơn cho trình duyệt để hiển thị so với các thuộc tính khác. Ví dụ: mọi thứ liên quan đến hiệu ứng làm mờ (chẳng hạn như bóng) sẽ mất nhiều thời gian hơn để vẽ 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 vẽ lại, cũng như các vấn đề khác về hiệu suất liên quan đến hoạt động 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 Nhấp nháy sơn.
3. Di chuyển con trỏ trên màn hình.

Trong ví dụ này trên 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 đánh dấu mà bạn cho rằng không nên thay đổi, hãy điều tra 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 hoạt động kết xuất hay không, thì trình phân tích hiệu suất kết xuất trong Chrome DevTools có thể giúp bạn.

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

1. Mở Settings (Cài đặt) rồi thêm nút Toolbox (Hộp công cụ) cho Toggle paint flashing (Bật/tắt tính năng nhấp nháy sơn).
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 di chuyển để xem các vùng được đánh dấu.

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 các ảnh động.

Sử dụng trình phân tích tài nguyên kết xuất để xem có thao tác kết xuất nào đặc biệt tốn kém hay không. Nếu bạn tìm thấy bất kỳ điều gì, 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ự với hiệu suất tốt hơn hay không.

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