* { transition: background-color .18s linear, color .18s linear; }
@media (prefers-reduced-motion: reduce) { * { transition: none; } }
给全站元素加了 transition: all .3s,切主题时列表页 200 多个节点同时过渡,手机上一卡就是 600ms。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。
追下去是这么回事:all 把布局属性也纳入过渡,切换时背景、边框、阴影一起重绘。节点越多,主线程压力越大。
「主题切换卡顿」确认了原因之后,改动尽量只碰那一处,顺手改的东西后面最容易出问题。监控和日志的时间要对上,时区不一致会多绕很大一圈。
临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。
一次只改一处,改完立刻验证,几个改动叠在一起,出问题就说不清是谁导致的。
处理上按这个顺序:过渡只保留 background-color 和 color;避免对 box-shadow 和 filter 做过渡;在低端机上开性能面板 确认切换时没有长任务。
确认没问题再收工,低端机切主题不再卡顿,列表滚动也顺畅。
