will-change

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Thuộc tính will-change của CSS gợi ý cho trình duyệt về cách một phần tử dự kiến sẽ thay đổi. Trình duyệt có thể thiết lập các tối ưu hóa trước khi phần tử thực sự thay đổi. Các loại tối ưu hóa này có thể tăng khả năng phản hồi của trang bằng cách thực hiện công việc tiềm năng tốn kém trước khi thực sự cần.

Warning: will-change được thiết kế để dùng như phương án cuối cùng, nhằm giải quyết các vấn đề hiệu suất hiện có. Không nên dùng nó để dự đoán trước các vấn đề hiệu suất.

Cách dùng thuộc tính này đúng cách có thể khá phức tạp:

Đừng áp dụng will-change cho quá nhiều phần tử. Trình duyệt đã cố gắng hết sức để tối ưu hóa mọi thứ. Một số tối ưu hóa mạnh hơn có khả năng được gắn với will-change tiêu tốn nhiều tài nguyên của máy, và khi dùng quá mức có thể khiến trang chạy chậm hoặc tiêu thụ nhiều tài nguyên.
Dùng tiết kiệm. Hành vi thông thường của tối ưu hóa mà trình duyệt thực hiện là xóa các tối ưu hóa ngay khi có thể và trở lại trạng thái bình thường. Nhưng việc thêm will-change trực tiếp trong stylesheet ngụ ý rằng các phần tử mục tiêu luôn sắp thay đổi và trình duyệt sẽ giữ các tối ưu hóa lâu hơn nhiều so với bình thường. Vì vậy, thực hành tốt là bật và tắt will-change bằng code script trước và sau khi thay đổi xảy ra.
Đừng áp dụng will-change cho các phần tử để tối ưu hóa sớm. Nếu trang của bạn đang hoạt động tốt, đừng thêm thuộc tính will-change vào các phần tử chỉ để khai thác thêm một chút tốc độ. will-change được thiết kế để dùng như một phương án cuối cùng, nhằm giải quyết các vấn đề hiệu suất hiện có. Không nên dùng nó để dự đoán trước các vấn đề hiệu suất. Việc dùng quá nhiều will-change sẽ dẫn đến sử dụng bộ nhớ quá mức và gây ra quá trình kết xuất phức tạp hơn khi trình duyệt cố gắng chuẩn bị cho sự thay đổi có thể xảy ra. Điều này sẽ dẫn đến hiệu suất tệ hơn.
Dành đủ thời gian để hoạt động. Thuộc tính này được thiết kế như một phương pháp để tác giả cho tác nhân người dùng biết trước về các thuộc tính có khả năng thay đổi. Sau đó trình duyệt có thể chọn áp dụng các tối ưu hóa cần thiết trước khi thay đổi thuộc tính thực sự xảy ra. Vì vậy, điều quan trọng là dành cho trình duyệt một khoảng thời gian để thực sự thực hiện các tối ưu hóa. Tìm cách dự đoán trước ít nhất một chút rằng điều gì đó sẽ thay đổi, và đặt will-change khi đó.
Lưu ý rằng will-change thực sự có thể ảnh hưởng đến giao diện hình ảnh của các phần tử, khi được dùng với các giá trị thuộc tính tạo ra ngữ cảnh xếp chồng (ví dụ: will-change: opacity), vì ngữ cảnh xếp chồng được tạo ra trước.

Cú pháp

css

/* Giá trị từ khóa */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /* Ví dụ về <custom-ident> */
will-change: opacity; /* Ví dụ về <custom-ident> */
will-change: left, top; /* Ví dụ về hai <animatable-feature> */

/* Giá trị toàn cục */
will-change: inherit;
will-change: initial;
will-change: revert;
will-change: revert-layer;
will-change: unset;

Giá trị

auto: Từ khóa này không thể hiện ý định cụ thể nào; tác nhân người dùng nên áp dụng bất kỳ heuristic và tối ưu hóa nào mà nó thường làm.

<animatable-feature> có thể là một trong các giá trị sau:

scroll-position: Cho biết tác giả dự kiến hoạt ảnh hoặc thay đổi vị trí cuộn của phần tử trong tương lai gần.
contents: Cho biết tác giả dự kiến hoạt ảnh hoặc thay đổi nội dung của phần tử trong tương lai gần.
<custom-ident>: Cho biết tác giả dự kiến hoạt ảnh hoặc thay đổi thuộc tính có tên đã cho trên phần tử trong tương lai gần. Nếu thuộc tính được cho là viết tắt, nó cho biết kỳ vọng cho tất cả các thuộc tính viết dài mà viết tắt mở rộng ra. Nó không thể là một trong các giá trị sau: unset, initial, inherit, will-change, auto, scroll-position, hoặc contents. Đặc tả không định nghĩa hành vi của giá trị cụ thể, nhưng thông thường transform là gợi ý lớp ghép. Chrome hiện tại thực hiện hai hành động, với các định danh thuộc tính CSS cụ thể: thiết lập lớp ghép mới hoặc stacking context mới.

Qua stylesheet

Có thể phù hợp khi bao gồm will-change trong stylesheet của bạn cho ứng dụng thực hiện lật trang khi nhấn phím như album hoặc bài thuyết trình slide mà các trang rất lớn và phức tạp. Điều này sẽ cho phép trình duyệt chuẩn bị chuyển đổi trước thời hạn và cho phép chuyển đổi nhanh nhạy giữa các trang ngay khi nhấn phím. Nhưng hãy thận trọng khi dùng thuộc tính will-change trực tiếp trong stylesheet. Nó có thể khiến trình duyệt giữ tối ưu hóa trong bộ nhớ lâu hơn nhiều so với cần thiết.

css

.slide {
  will-change: transform;
}

Định nghĩa chính thức

Initial value	`auto`
Applies to	all elements
Inherited	no
Computed value	as specified
Animation type	discrete

Cú pháp chính thức

will-change = 
  auto                    |
  <animateable-feature>#  

<animateable-feature> = 
  scroll-position  |
  contents         |
  <custom-ident>

Ví dụ

Qua script

Đây là ví dụ về cách áp dụng thuộc tính will-change qua scripting, đây có thể là điều bạn nên làm trong hầu hết các trường hợp.

const el = document.getElementById("element");

// Đặt will-change khi di chuột qua phần tử
el.addEventListener("mouseenter", hintBrowser);
el.addEventListener("animationEnd", removeHint);

function hintBrowser() {
  // Các thuộc tính có thể tối ưu hóa sẽ thay đổi
  // trong khối keyframes của hoạt ảnh
  this.style.willChange = "transform, opacity";
}

function removeHint() {
  this.style.willChange = "auto";
}

Thông số kỹ thuật

Specification
CSS Will Change Module Level 1 # will-change

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

Xem thêm

transform
Các thuộc tính transform riêng lẻ:
- translate
- scale
- rotate
- Lưu ý: không có thuộc tính skew riêng lẻ

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content