Có người thêm `will-change: transform` cho mọi phần tử có animation để "chạy mượt hơn". Làm vậy hại gì?

will-change là lời báo trước cho trình duyệt rằng thuộc tính này sắp đổi, để nó chuẩn bị tối ưu — thường là tách phần tử ra một compositor layer riêng. Lạm dụng thì chính sự chuẩn bị đó là chi phí.

Tác hại khi dùng bừa:

• Mỗi layer chiếm bộ nhớ GPU theo diện tích pixel. Hàng trăm phần tử will-change trên mobile dẫn tới tiêu tốn bộ nhớ lớn, có thể làm trang chậm hẳn hoặc bị tab crash.
• Tách layer sớm và giữ mãi khiến trình duyệt mất cơ hội áp dụng các tối ưu khác; đặc biệt will-change trên phần tử luôn hiển thị mà hiếm khi animate là lãng phí thuần tuý.
• will-change: transform (cũng như filter, opacity với giá trị khác 1) tạo stacking context mới và làm phần tử thành containing block cho con position: fixed — nhiều bug fixed/z-index khó hiểu bắt nguồn từ đây.
• Trên text, việc tách layer có thể làm mất subpixel antialiasing, chữ trông mờ hơn.

Dùng đúng:

• Chỉ đặt ngay trước khi animation bắt đầu và gỡ sau khi kết thúc (thường bằng JS), hoặc khai báo qua trạng thái ngắn hạn như .card:hover { will-change: transform; }.
• Ưu tiên sửa nguyên nhân trước: animate transform/opacity thay vì thuộc tính gây layout. Nếu animation đã mượt, không cần will-change.
• Đo bằng Layers panel trong DevTools để thấy số layer và bộ nhớ thực tế, thay vì thêm theo cảm tính.