Hướng dẫn này chỉ cho bạn cách tạo ảnh động CSS hiệu suất cao.
Xem 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 tài sản CSS mà hướng dẫn này đề xuất đều có hỗ trợ tốt trên nhiều trình duyệt.
Di chuyển 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);
}
}
Bạn cũng có thể xoay các mục trong ví dụ dưới đây 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 một 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 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), hãy xác định tác động của thuộc tính đó đối với quy trình hiển thị.
Tránh bất kỳ thuộc tính nào kích hoạt bố cục hoặc tô màu trừ khi thực sự cần thiết.
Buộc tạo lớp
Như đã giải thích trong phần Tại sao một số ảnh động bị chậm?, bằng cách đặt các phần tử lên một lớp mới, bạn có thể 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.
Các trình duyệt thường sẽ đưa ra quyết định sáng suốt về việc nên đặt các mục nào 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 đó.
Trong CSS, bạn có thể áp dụng thuộc tính này 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 sử dụng phương pháp này cho các phần tử luôn sắp thay đổi.
Nếu ví dụ ở trên là thanh bên mà người dùng có thể trượt vào và ra, thì đúng là như vậy.
Một số mục trên trang của bạn có thể không thường xuyên thay đổi. Vì vậy, bạn nên áp dụng will-change bằng JavaScript tại thời điểm có khả năng thay đổi này sẽ xảy ra.
Bạn cần đảm bảo cho trình duyệt có đủ thời gian để thực hiện các hoạt động tối ưu hoá cần thiết, sau đó xoá thuộc tính này khi ngừng thay đổi.
Nếu cần cách để buộc tạo lớp ở một trong những trình duyệt hiếm gặp không hỗ trợ will-change (nhiều khả năng là Internet Explorer tại thời điểm này), bạn có thể đặt transform: translateZ(0).
Gỡ lỗi ảnh động chậm hoặc giật
Công cụ của Chrome cho nhà phát triển và Công cụ của Firefox cho nhà phát triển có rất 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 bị giật.
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 yếu tố không phải transform có thể sẽ bị chậm.
Trong ví dụ sau, tôi đã đạt được cùng một kết quả trực quan khi tạo ảnh động top và left cũng như sử dụng transform.
.box {
position: absolute;
top: 10px;
left: 10px;
animation: move 3s ease infinite;
}
@keyframes move {
50% {
top: calc(90vh - 160px);
left: calc(90vw - 200px);
}
}
.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ử vấn đề này trong 2 ví dụ về sự cố sau đây và tìm hiểu 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
- Mở bảng điều khiển Hiệu suất.
- Ghi lại hiệu suất thời gian chạy trong khi ảnh động của bạn đang diễn ra.
- Kiểm tra thẻ Tóm tắt.
Nếu bạn thấy giá trị khác 0 để Kết xuất trong thẻ Tóm tắt, thì có thể 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.
Công cụ của Firefox cho nhà phát triển
Trong Công cụ của Firefox cho nhà phát triển, Thác nước có thể giúp bạn biết được trình duyệt đang dành thời gian vào đâu.
- Mở bảng điều khiển Hiệu suất.
- Trong bảng điều khiển, hãy Bắt đầu ghi lại hiệu suất trong khi ảnh động của bạn đang diễn ra.
- Dừng ghi hình rồi kiểm tra thẻ Thác nước.
Nếu bạn thấy các mục nhập cho Tính toán lại kiểu thì trình duyệt phải bắt đầu khi bắt đầu thác nước kết xuất.
Kiểm tra xem ảnh động có làm rớt khung hình hay không
- Mở thẻ Kết xuất của Công cụ của Chrome cho nhà phát triển.
- Bật hộp đánh dấu FPS meter.
- Xem các giá trị khi ảnh động của bạn chạy.
Ở đầu giao diện người dùng đồng hồ FPS, bạn sẽ thấy nhãn Khung. Dưới đây, bạn sẽ thấy một giá trị dọc theo các dòng 50% 1 (938 m) dropped of 1878.
Ảnh động có hiệu suất cao sẽ có tỷ lệ phần trăm cao, ví dụ như 99%. Tỷ lệ phần trăm cao có nghĩa là một vài khung hình đang bị giảm và ảnh động sẽ trông mượt mà.
Kiểm tra xem ảnh động có kích hoạt hiển thị không
Nói đến hội hoạ, một số thứ đắt hơn những thứ khác.
Ví dụ: bất kỳ thứ gì có liên quan đến việc làm mờ (ví dụ như bóng đổ) sẽ mất nhiều thời gian vẽ hơn so với việc vẽ một hộp màu đỏ.
Tuy nhiên, xét về CSS, điều này không phải lúc nào cũng rõ ràng:
background: red; và box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5);
không nhất thiết có vẻ như có các đặc điểm hiệu suất rất khác nhau, nhưng chúng có.
Công cụ của trình duyệt có thể giúp bạn xác định những khu vực cần sơn lại và các vấn đề 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
- Mở thẻ Kết xuất của Công cụ của Chrome cho nhà phát triển.
- Chọn Paint Flashing.
- Di chuyển con trỏ xung quanh màn hình.
Nếu thấy toàn bộ màn hình nhấp nháy hoặc những phần mà bạn cho rằng không nên thay đổi được đánh dấu, thì bạn có thể kiểm tra.
Nếu bạn cần tìm hiểu xem một thuộc tính cụ thể có gây ra vấn đề về hiệu suất do quá trình vẽ hay không, thì trình phân tích màu vẽ trong Công cụ của Chrome cho nhà phát triển có thể giúp bạn.
Công cụ của Firefox cho nhà phát triển
- Mở phần Cài đặt rồi thêm nút Hộp công cụ để Bật/tắt lớp sơn nhấp nháy.
- Trên trang bạn muốn kiểm tra, hãy bật nút này rồi di chuột hoặc cuộn để xem các vùng được đánh dấu.
Kết luận
Nếu có thể, hãy hạn chế ảnh động trong opacity và transform để giữ cho ảnh động trên 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 bị ảnh động của bạn ảnh hưởng.
Sử dụng trình phân tích sơn để xem có thao tác sơn nào đặc biệt tốn kém không. Nếu bạn tìm thấy bất kỳ thông tin nào, hãy xem liệu một thuộc tính CSS khác có mang lại giao diện tương tự và mang lại hiệu suất cao hơn hay không.
Hãy 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.