列表页加上占位图之后,HTML 的体积从六十多 KB 涨到三百 KB,首字节没变慢,下载完成的时间翻了好几倍,很反常。乍看像缓存或者权限的锅,追下去往往不是。
.ph { background: #eee; }
<img class='ph' src='/img/blank.svg' alt=''>
追下去是这么回事:每张图都内联了一段矢量占位图的 base64,同一段内容在页面里重复几十次,既压不小也缓存不了,还挤占了正文的传输时间,纯属浪费。
「占位图内联」这个问题文档写得含糊,实际行为以当前版本为准,别照旧版本的结论套。接口问题先分清是没发出去、发出去了没收到,还是收到了处理失败。
偶发问题先统计频率,一小时几次和一天一次,查法完全不同。改完顺手把文档补一句,省得下次自己重新推一遍。
具体做法是,把占位图抽成一个独立的外部文件 全站统一引用;只在首屏最前面那一张图上保留内联写法就行;其余位置改用背景色占位 先把容器的固定高度撑住。
验收就看一点,HTML 体积回到七十 KB 以内,页面上的占位效果与改动之前完全一致。
