一、背景

在做一个合伙人分销程序时有一个很常见的功能：推广海报下载——使用者点一下“下载推广海报”按钮。页面会生成一张带专属二维码、带推荐人手机号水印的海报图，方便使用者长按保存转发。

上线后收到反馈：手机打开这个页面会先卡顿一段时间，接下来图片才“唰”地一下出现。这类卡顿、白屏、无加载提示的痛点直接导致使用者流失。

二、排查：先搞清楚图是怎么“画”出来的

第一反应是前端用了 canvas / html2canvas 之类的方案导致主线程阻塞。但实际情况是：

这张海报完全是服务端用 PHP 的 GD 库实时合成的，跟前端 canvas 没有任何关系。

整体流程如下的观点是，

使用者点击“下载推广海报”
│
▼ window.location.href 整页跳转到 download_partner_qrcode.php
│
▼ 返回一个“壳子”页面里面塞了一个
│
▼ 浏览器请求这个 img src。真正的合成逻辑在这次请求里同步执行：
- imagecreatefromjpeg 解码 JPG 海报模板
- file_get_contents 同步请求第三方二维码生成服务
- imagecopyresampled 把二维码贴到模板上
- imagettftext 逐字绘制“推荐人：xxx”文字
- imagejpeg 用 quality=80 重新编码整张图，流式输出

卡顿的根源集中在以下三个点：

. 完全没有缓存，每次访问都重新生成一遍

响应头里明确写着：

header;header，header;

即使同一个使用者的推广码、手机号从未变化，也要每刷新一次页面都重新跑完整个 GD 合成 + 网络请求流程CPU 与网络资源被浪费。

. 同步依赖第三方接口，还给了 30 秒超时

$context = stream_context_create(
]);$qrcodeData = @file_get_contents;

二维码实时调用 http://barcode.tczss.com/qrcode.php 生成，这是一个同步阻塞调用。按理说，若第三方服务慢一点。就会导致使用者等待数秒甚至更久——这是最直接的卡顿元凶，而且没有本地兜底。

. 前端没有任何加载态

整页跳转 + 标签。在图片真正返回之前使用者看到的是一片空白，等同于“卡死”。怎么说呢，缺乏视觉反馈，使得体验雪上加霜。

三、调整方法

定位完问题后采用“三板斧”快速体验更好。无需大幅改动架构：

. 加一层磁盘缓存

推广码、手机号等信息基本不变，不必每次都重新合成。实现文件缓存如下：

$cacheDir = __DIR__ . '/../cache/posters/';$cacheKey = md5;$cacheFile = $cacheDir . $cacheKey . '.jpg';// 命中缓存 → 秒回
if ) {
header;header，// 一天可缓存
readfile;exit，}
// 未命中 → 执行原 GD 合成逻辑 ...
// 合成完成后写入缓存，同时输出给浏览器
imagejpeg;imagedestroy;readfile，

缓存 key 使用 agent_id + promo_code + 脱敏手机号 的 MD5。 保证不同合伙人互不冲突，而且当关键字段变化时自动生成新文件。

. 缩短第三方接口超时时间

$context = stream_context_create( // 原来是30秒，现在仅保留合理容错空间
]);$qrcodeData = @file_get_contents;if {
// 可选：使用本地默认二维码兜底
}

即使第三方服务异常，也只会让使用者等待最多约 5 秒；配合缓存，这种慢请求仅在首次生成时出现。

. 前端补一个骨架屏加载态

海报生成中…

.image-preview-wrapper { position: relative;width: 100%，max-width: 400px;按理说，}
.image-placeholder {
至于width。100%，padding-top: 56.25%;/* 按模板比例占位，例如16:9 */
background:#f2f2f2;position:absolute;top:0，left:0;}
.image-placeholder::after{
content:'';position:absolute;top:0，left:-150%;老实说，width:50%;height:100%，background:linear-gradient,transparent);animation:placeholder-shine 1s infinite;}
@keyframes placeholder-shine{
to{left:+150%;}
}
.image-preview-wrapper img{
display:block;怎么说呢，width:100%;height:auto，}

骨架屏通过 CSS 动画提供视觉反馈，图片加载完成后淡入显示；若加载失败则展示明确文案，而不是空白或破图标。

四、调整效果对比

五、小结 & 实践建议

This optimization didn't introduce any new tech stack or complex architecture. The core mindset is **“能不算就不算。实在要等也让使用者知道在等什么”**:

1. Caching is highest ROI optimization. When inputs hardly change but generation cost is high,a simple file cache often outperforms algorithmic tweaks.
2. Synchronous third‑party calls must have sensible timeouts. Never let “worst case” be unbounded.
3. A lightweight front‑end loading state dramatically improves perceived performance. Users can tolerate waiting if y see a clear progress cue.

If your project also contains dynamic image/poster/report generation features,ask yourself first:

If answer is yes—implement caching and graceful fallbacks now to turn "卡顿"/"白屏"/"无提示",into a smooth "秒开".