will-change property dùng để làm gì?

will-change báo trước cho browser rằng thuộc tính nào sắp đổi, để nó chuẩn bị (thường là tách element ra một composite layer riêng).

.modal { will-change: transform, opacity; }

Vấn đề: mỗi layer chiếm bộ nhớ GPU. Đặt will-change cho hàng loạt element làm trang chậm hơn thay vì nhanh hơn — đặc biệt trên điện thoại tầm trung.

Cách dùng đúng — bật ngay trước khi cần, tắt ngay sau đó:

.card { transition: transform 0.18s ease; }
.card:hover { will-change: transform; }   /* chỉ tồn tại trong lúc hover */

el.style.willChange = 'transform'
el.addEventListener('transitionend', () => { el.style.willChange = 'auto' }, { once: true })

Lưu ý 1: đặt will-change: transform trong CSS tĩnh cho mọi card là kiểu lạm dụng phổ biến nhất — nó giữ layer sống suốt vòng đời trang.

Lưu ý 2: will-change tạo stacking context mới, nên có thể làm hỏng thứ tự z-index đang đúng.

Chốt: đây là phương án cuối cùng, không phải bước đầu tiên. Đo bằng Performance panel trước; phần lớn trường hợp chỉ cần chuyển từ animate top/left sang transform là đủ mượt.