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

Kayce Basques
Kayce Basques
Rachel Andrew
Rachel Andrew

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 bài viết Tại sao một số ảnh động bị chậm? để tìm hiểu lý thuyết đằng sau những khuyến nghị này.

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

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

transform

Hỗ trợ trình duyệt

  • Chrome: 36.
  • Cạnh: 12.
  • Firefox: 16.
  • Safari: 9.

Nguồn

opacity

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Cạnh: 12.
  • Firefox: 1.
  • Safari: 2.

Nguồn

will-change

Hỗ trợ trình duyệt

  • Chrome: 36.
  • Cạnh: 79.
  • Firefox: 36.
  • Safari: 9.1.

Nguồn

Di chuyển phần tử

Để di chuyển một phần tử, hãy dùng các giá trị từ khóa 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 sử dụng giá trị từ khoá scale của phần tử 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;
  }
}

Tránh các thuộc tính kích hoạt bố cục hoặc tô màu

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

Buộc tạo lớp

Như giải thích trong Tại sao một số ảnh động bị chậm?, việc đặt các phần tử lên một lớp mới cho phép trình duyệt sơn lại chúng mà không cần sơn 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 đúng đắn về việc nên đặt những mục nào trên lớp mới, nhưng bạn có thể buộc tạo lớp một cách thủ công bằng Thuộc tính will-change. Như cái tên cho thấy, 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 đó.

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ực hiện việc này cho các phần tử luôn sắp thay đổi. Ví dụ: điều này có thể đúng đối với thanh bên mà người dùng có thể trượt vào và bị loại. Đối với các yếu tố không thường xuyên thay đổi, bạn nên áp dụng will-change sử dụng JavaScript khi có khả năng thay đổi. Hãy nhớ cung cấp cho trình duyệt đủ thời gian để thực hiện những tối ưu hoá cần thiết và xoá khi thay đổi đã dừng lại.

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

Gỡ lỗi ảnh động chậm hoặc nhiễu

Công cụ của Chrome cho nhà phát triển và Công cụ của Firefox có nhiều công cụ giúp bạn tìm ra lý do khiến ảnh động của bạn bị chậm hoặc nhiễu.

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 thành phần không phải transform là có thể sẽ chậm. Ví dụ sau đây so sánh một ảnh động bằng cách sử dụng transform cho ảnh động bằ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ụ về Nhiễu sóng sau đây, và khám phá hiệu suất bằng Công cụ cho nhà phát triển.

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 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 một giá trị khác 0 cho tính năng Hiển thị trong thẻ Tóm tắt, thì điều đó có thể có nghĩa là ảnh động của bạn sẽ khiến trình duyệt thực hiện công việc của bố cục.

Bảng Tóm tắt cho thấy 37 mili giây để kết xuất và 79 mili giây để vẽ.
animation-with-top-left gây ra hoạt động kết xuất hình ảnh.
Bảng Tóm tắt hiển thị giá trị bằng 0 để kết xuất và tô màu.
Ảnh động có biến đổi không dẫn đ���n công việc kết xuất hình ảnh.

Công cụ của Firefox

Trong Công cụ của Firefox, Thác nước có thể giúp bạn biết trình duyệt đang dành thời gian cho phần nào.

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

Nếu bạn thấy các mục cho Tính toán lại kiểu, điều đó có nghĩa là trình duyệt phải quay lại điểm bắt đầu của hiển thị thác nước để kết xuất ảnh động.

Kiểm tra xem có khung hình bị rớt không

  1. Mở thẻ Kết xuất trong Công cụ của Chrome cho nhà phát triển.
  2. Đánh dấu vào hộp Máy đo khung hình/giây.
  3. Xem các giá trị trong khi ảnh động chạy.

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

Máy đo khung hình/giây cho biết có 50% số khung hình bị bỏ qua
animation-with-top-left Ví dụ: làm rớt 50% số khung hình
Máy đo khung hình/giây cho thấy chỉ có 1% số khung hình bị bỏ
Ảnh động có biến đổi Ví dụ: chỉ làm rớt 1% số khung hình.

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

Một số thuộc tính có chi phí vẽ cao hơn so với các thuộc tính khác của trình duyệt. Cho ví dụ: mọi thứ liên quan đến việc làm mờ (ví dụ như bóng) càng lâu hơn là vẽ một hộp màu đỏ. Những 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à duyệt của trình duyệt có thể giúp bạn xác định khu vực nào cần được sơn lại, cũng như các vấn đề khác về hiệu suất liên quan đến việc sơn.

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

  1. Mở thẻ Kết xuất trong Công cụ của Chrome cho nhà phát triển.
  2. Chọn Paint Flashing (Hiệu ứng nhấp nháy màu).
  3. Di chuyển con trỏ xung quanh màn hình.
Một thành phần trên giao diện người dùng được làm nổi bật bằng màu xanh lục để minh hoạ thành phần này sẽ được vẽ lại
Trong ví dụ này từ Google Maps, bạn có thể thấy các thành phần được sơn lại.

Nếu bạn thấy toàn bộ màn hình nhấp nháy hoặc các khu vực được đánh dấu mà bạn không cho rằng cần thay đổi, điều tra thêm.

Nếu bạn cần xác định xem một đặc tính cụ thể có đang gây ra các vấn đề về hiệu suất liên quan đến tranh vẽ, trình phân tích tài nguyên sơn trong Công cụ của Chrome cho nhà phát triển.

Công cụ của Firefox

  1. Mở phần Cài đặt rồi thêm nút Hộp công cụ cho Nút vẽ nhấp nháy.
  2. Trên trang bạn muốn kiểm tra, hãy bật nút và di chuyển chuột hoặc hãy cuộn để xem các khu vực được đánh dấu.

Kết luận

Nếu có thể, hãy hạn chế ảnh động thành opacity và transform để giữ lại ảnh động trong 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 giai đoạn nào của đường dẫn sẽ chịu ảnh hưởng của ảnh động.

Sử dụng trình phân tích sơn để xem có hoạt động sơn nào đặc biệt không rất đắt đỏ. Nếu bạn tìm thấy bất kỳ điều gì, hãy kiểm tra xem thuộc tính CSS khác có cung cấp cho có giao diện tương tự nhưng hiệu suất cao hơn.

Sử dụng thuộc tính will-change một cách thận trọng và chỉ khi bạn gặp vấn đề về hiệu suất.