will-change là một thuộc tính CSS dùng để thông báo cho trình duyệt biết những thay đổi có thể xảy ra đối với một phần tử trong tương lai. Điều này giúp trình duyệt tối ưu hóa hiệu suất hiển thị bằng cách chuẩn bị trước, từ đó cải thiện hiệu năng.
Cú pháp cơ bản
selector {
will-change: property;
}
Giá trị thuộc tính
will-change có thể nhận các loại giá trị sau:
Tên thuộc tính đơn lẻ: Ví dụ như transform, opacity.
.example {
will-change: transform;
}
.example {
will-change: transform, opacity;
}
auto: Giá trị mặc định, nghĩa là không có thay đổi cụ thể nào được khai báo.
.example {
will-change: auto;
}
Trường hợp sử dụng phổ biến
will-change thường được sử dụng trong các tình huống sau:
Hoạt ảnh và chuyển đổi
Nếu bạn biết một phần tử sắp bị thay đổi bởi hoạt ảnh hoặc chuyển đổi, bạn có thể dùng will-change để báo trước cho trình duyệt.
.element {
will-change: transform;
}
.element:hover {
transform: scale(1.2);
transition: transform 0.5s;
}
Trong ví dụ này, trình duyệt sẽ tối ưu thuộc tính transform của .element để hoạt ảnh mượt mà hơn.
Hiệu ứng cuộn và trượt
Nếu một phần tử sắp có hiệu ứng cuộn hoặc trượt, bạn có thể dùng will-change để tối ưu hóa trước.
.scrollable {
will-change: scroll-position;
}
Mặc dù will-change có thể cải thiện hiệu suất, nhưng việc lạm dụng sẽ gây phản tác dụng.
-
Chỉ dùng khi cần thiết: Chỉ dùng will-change khi bạn chắc chắn thuộc tính đó sẽ thay đổi.
-
Tránh sử dụng trong thời gian dài: Đừng áp dụng will-change lên nhiều phần tử trong thời gian dài vì sẽ tiêu tốn bộ nhớ và làm giảm hiệu suất.
-
Kiểm tra tác động hiệu suất: Khi dùng will-change trong dự án thực tế, nên kiểm tra ảnh hưởng đến hiệu suất để đảm bảo hiệu quả.
Ví dụ sử dụng will-change để tối ưu hóa hiệu ứng hoạt ảnh:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.5s, opacity 0.5s;
/* Báo trước cho trình duyệt biết các thuộc tính sắp thay đổi */
will-change: transform, opacity;
}
.box:hover {
transform: scale(1.5);
opacity: 0.5;
}
</style>
<title>Will-change Example</title>
</head>
<body>
<div class=”box”></div>
</body>
</html>
Khi di chuột qua phần tử .box, thuộc tính transform và opacity sẽ thay đổi. Nhờ có thuộc tính will-change, trình duyệt có thể tối ưu trước các thay đổi này, giúp hoạt ảnh trở nên mượt mà hơn.
Hy vọng bài viết về thuộc tính CSS will-change này hữu ích. Để tìm hiểu thêm, bạn có thể tra cứu các bài viết trước hoặc khám phá những bài liên quan bên dưới. Cảm ơn bạn đã theo dõi!
📌 Bài viết này được đóng góp bởi người dùng và bản quyền thuộc về người dùng đã xây dựng bài viết. Bản quyền thuộc về tác giả gốc và chỉ dùng cho mục đích học tập và giao tiếp. Nếu có bất kỳ vi phạm nào, vui lòng liên hệ với chúng tôi để xóa nó.