Thay đổi ý chí - Thủ thuật CSS

Các will-changebất động sản trong CSS tối ưu hóa hình ảnh động bằng cách cho phép các bí quyết trình duyệt mà tính chất và các yếu tố là chỉ là về để được thao tác, có khả năng tăng hiệu suất của rằng hoạt động cụ thể.

Thuộc tính này có bốn giá trị:

auto: tối ưu hóa trình duyệt tiêu chuẩn sẽ được áp dụng.
scroll-position: cho biết rằng vị trí cuộn của phần tử sẽ được chuyển động trong tương lai gần để trình duyệt sẽ chuẩn bị cho nội dung không hiển thị trong cửa sổ cuộn của phần tử.
contents: nội dung của một phần tử dự kiến sẽ thay đổi vì vậy trình duyệt sẽ không lưu nội dung của phần tử này vào bộ nhớ cache.
: bất kỳ thuộc tính nào do người dùng xác định, chẳng hạn như transformhoặc opacitymà chúng tôi muốn will-changeđược áp dụng.

Chúng tôi có thể thông báo cho trình duyệt rằng một thay đổi sắp diễn ra đối với thuộc transformtính như sau:

.element ( will-change: transform; )

Hoặc nếu chúng ta muốn khai báo nhiều giá trị, chúng ta có thể sử dụng danh sách được phân tách bằng dấu phẩy như:

.element ( will-change: transform, opacity; )

Tuy nhiên, điều quan trọng là không lạm dụng thuộc will-changetính vì trên thực tế, nó có thể khiến trang hoạt động kém hơn (lưu ý rằng không có allgiá trị cho thuộc tính này vì một lý do chính đáng). Do đó, MDN khuyến nghị rằng tài sản này nên được sử dụng như một biện pháp cuối cùng cho các vấn đề về hiệu suất hiện tại hơn là những vấn đề bạn dự đoán có thể xảy ra. Và, khi sử dụng nó, bạn nên chuyển đổi will-changengay trước khi một phần tử hoặc thuộc tính thay đổi và sau đó tắt lại ngay sau khi quá trình kết thúc.