聊聊 will-change:CSS 动画的“兴奋剂”,用对了是仙丹,用错了是砒霜 最近在鼓捣一些前端性能优化,不可避免地撞上了 will-change 这个家伙。一开始,我以为它就是个简单的“性能加速器”,啪一下,动画就丝滑了。结果呢?理想很丰满,现实却很骨感。不细研究,这玩意儿简直就是个坑,一不小心就把你的页面性能优化成了一坨……嗯,你懂的。 will-change,顾名思义,就是告诉浏览器,嘿,哥们儿,我接下来要对这个元素做一些改变,你提前做好准备,别到时候手忙脚乱的。听起来是不是很贴心?就像你去餐厅吃饭,提前跟服务员说:“我一会儿要点个麻辣火锅,你先把锅底和调料准备好。” 服务员提前准备好,你就能更快地吃上火锅,体验是不是更好? 但问题来了,服务员提前准备太多,把整个厨房的食材都搬出来了,结果你只吃了一盘毛肚,剩下的全都浪费了,这反而增加了餐厅的负担。will-change也是这个道理。如果你滥用它,让浏览器提前为一些根本不会改变的属性做优化,反而会消耗更多的资源,降低性能。 所以,will-change不是万能的,它更像是一种“兴奋剂”,用对了,能让你的 CSS 动画表现得更 …