CSS艺术师亲授：建站资源优化秘技，首屏快3倍、存储省70%

　　去年四月，我蹲在客户办公室的落地窗边改首页加载动画，茶几上摆着半杯冷掉的茉莉花茶——茶叶沉底了，像一堆小黑点。前台姑娘第三次经过时问我：“老师，您说的‘首屏快3倍’……是比谁快？”我没抬头，正用 `contain: layout paint` 锁住轮播图的重绘范围，手一滑把 `.hero-banner::before` 的 `background-size` 写成了 `cover cover`，Chrome 真就当场不渲染了。

文章配图，仅供参考

　　我原以为只要抽掉那三张 WebP 图、把内联 CSS 压进 `` 标签里，再把所有 `@import` 换成 `` 就能搞定。结果第十三次热更新后，首屏时间从 2.4 秒掉到 1.9 秒——还是没进 1.2。运维老李叼着牙签靠门框站着，忽然说：“你那个 `will-change: transform` 是不是加在 `.nav-item` 上了？”我说是啊，他“啧”了一声：“它根本不动。”

　　我删掉那行，顺手把 `transform: translateZ(0)` 也干掉了，首屏跳到 860 毫秒。可 JS 打包后体积反涨了 17%，因为 Webpack 自动把被删掉的 `will-change` 相关 polyfill 当作未引用代码保留下来——这事没人告诉我，文档里也根本没提。我翻到第八次 commit 记录，发现它混在一次 `postcss-pxtorem` 插件升级后的 `autoprefixer` 配置变更里，连括号都对不上。

　　存储省七十——这事是真。我把所有 SVG Icon 从 `` 改成内联 ``，又把所有 `d` 属性值里的空格替换成逗号，再跑一遍 svgo —— 三个动作叠在一起，SVG 总体积从 1.2MB 掉到 340KB。但有个细节崩了：用户反馈说“点赞图标少了一撇”，查了二十来分钟，发现是 `svgo` 默认把 `fill-rule="evenodd"` 给删了，而我们某个 `` 恰好依赖这个规则叠加渲染，于是中间透出白边——反正现在看不出来，客户也没再提。

　　优胜劣汰这词，我是在监控面板上看见的。当新资源上线两小时后，旧域名 `static-v1.example.com` 的请求数从每秒三百跌到个位数，CDN 缓存命中率跳到 99.2%，那一刻它就死了，不是被下线，是被晾干的。甲方昨天下午三点零七分发来微信截图，说：“首页变快了，但‘联系我们’按钮字变虚了。”我盯着那句问话看了十七秒，回了个“稍等”，其实心里清楚——那是我们刚换的 `font-display: swap` 在低网速下 fallback 字体撑开行高，导致文字边缘被父容器 `overflow: hidden` 截掉了一丁点。我不打算改。

　　后来我翻出去年三月二十八号的备份包，在本地启了个 serve，发现 `main.css` 第 142 行还写着 `/ TODO: remove legacy grid /`，而它早在五月就该删掉的——可那段 CSS 还活着，还参与了计算，还在悄悄拖慢重排。我删掉它，页面首屏时间变成 710 毫秒。但我也不知道它到底有没有影响字体渲染的时机，或者只是错觉。窗外梧桐树影晃了一下，刚好挡住电脑右下角的时间显示。

　　有谁碰到过这个吗：`will-change` 删掉后，`.nav-item:hover` 的过渡延迟突然多出 40ms，但只在 macOS Safari 16.4 出现，且必须连着 Magic Mouse 才复现？

（编辑：航空爱好网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!