公众号H5减少资源加载时间完整方案（适配答题抽奖+海报合成项目）
分为 资源压缩、请求数量优化、加载策略、缓存方案、专项图片/Canvas优化、微信环境特有技巧，可直接写入开发规范、项目方案。
核心目标：缩短白屏时长、加快首屏渲染，解决用户“点开半天加载不出来”。
一、静态资源瘦身：从源头降低文件体积
1. JavaScript / CSS
代码压缩
移除注释、空白、无用代码；开启混淆压缩（Terser / cssnano）
拆分代码：首屏必需代码打包进主包；答题逻辑、海报生成、抽奖弹窗独立分包、延迟加载。
剔除冗余依赖不要直接引入完整 jQuery、大型UI库；按需引入工具函数；能用原生JS就不引入重型类库。
案例：很多活动H5只用到ajax却引入完整jQuery，额外增加几十KB加载体积。
CSS优化删除未使用样式；合并重复样式；避免超大样式表。
2. 图片优化（H5最大体积瓶颈，重中之重）
控制原图尺寸移动端基准宽度750px；海报模板上限1080px，严禁直接使用2000px+原始大图。
合理选择图片格式
摄影图、渐变背景：
WebP优先（体积比JPG小30%+），低端机型自动降级JPG透明图标、简单图形：优先
SVG，替代PNG；矢量图无限缩放、体积极小复杂透明图：压缩PNG，避免无损超大PNG
统一无损压缩所有图片上线前批量压缩（tinypng等工具），肉眼无感知前提下降低体积。
慎用Base64仅极小图标（<2KB）可以转base64内嵌HTML；大图禁止base64，会大幅增大HTML文件、无法浏览器缓存。
二、减少HTTP请求数量
浏览器（微信X5/WKWebView）同一域名并行请求有限，请求越多，加载越慢。
小资源合并
CSS、JS文件合并（区分首屏/非首屏）
小型图标制作雪碧图（Sprite），多张图标合并为一张图，减少图片请求
按需加载（懒加载）✅ 非首屏图片启用图片懒加载，进入可视区域再请求 ✅ 非首屏JS逻辑延迟加载（进入对应页面/弹窗再引入脚本）
你的项目实操：城市选择页只加载首页素材；答题页、海报合成代码不在首屏一次性加载。
减少首屏并发请求首屏阶段不要同时拉取十几张背景图、海报素材；海报模板预加载放到进入结果页之后，不要首页加载。
三、优化资源加载时序，优先渲染首屏（解决感知慢）
1. HTML加载顺序规范
<!-- CSS放入head，优先加载样式，避免闪白 --> <head> <meta viewport ...> <link rel="stylesheet" href="main.css"> </head> <body> <!-- 首屏DOM --> <!-- 非关键JS后置，或者使用defer/async，不阻塞渲染 --> <script src="main.js" defer></script> </body>
禁止在
<head>放入大量同步JS，会阻塞页面解析、造成长时间白屏。2. 区分「关键资源」和「非关键资源」
关键资源：首屏页面样式、首屏背景、基础交互JS → 优先加载
非关键资源：弹窗素材、海报模板、动画素材、抽奖逻辑JS → 延迟/异步加载
3. 避免初始化大量同步接口请求
页面打开不要一次性同时请求：用户信息、城市列表、题目配置、奖品配置。 可以串行请求，或者优先拉取渲染页面必须的接口，次要接口延后执行。
四、缓存策略：二次打开极速加载（最容易被忽略）
用户第二次进入活动，不用重复下载资源。
浏览器强缓存（静态资源）JS、CSS、图片配置
Cache-Control: public, max-age=2592000（30天缓存） ✅ 更新方案：文件名增加哈希main.8f2d1.js，修改内容自动变更地址，强制更新。接口数据本地缓存长期不变数据：城市列表、美食列表、测试题目、奖品配置，请求成功存入localStorage，短时间内复用，减少重复接口请求。
CDN部署所有静态资源（图片/js/css）放到CDN，就近节点分发，显著降低加载耗时；原生服务器带宽有限，不适合直接分发大量图片。
五、微信H5专属优化方案（适配公众号环境）
规避安卓X5内核限制X5内核同一域名并发请求上限低，同一时间并发图片请求不要超过6个；多张海报素材采用串行预加载。
预加载策略精细化不要一次性预加载全部素材；用户走到哪个环节，预加载下一环节资源。 例：选择城市页面 → 静默预加载美食页面素材；进入答题页 → 预加载结果页海报模板。
图片加载失败降级网络较差时图片超时增加兜底占位图，防止页面卡死、无限loading。
六、Canvas海报模块专项优化（你的项目核心功能）
很多项目海报资源巨大，造成打开慢，单独优化：
海报模板不要在首页加载，到达结果页面再开始预加载
缓存加载完成的海报图片对象，用户多次点击【生成海报】无需重复请求图片
限制Canvas画布尺寸，不要使用超高清大图绘制
七、进阶手段（预算充足场景）
启用Gzip/Brotli压缩服务端开启，HTML/CSS/JS文本类资源体积再减少30%~60%
资源预加载 preload / prefetch
<!-- 首屏急需资源预加载 --> <link rel="preload" href="font.woff2" as="font"> <!-- 预判用户下一步需要的资源，空闲时间提前加载 --> <link rel="prefetch" href="poster-bg.webp">
骨架屏 / Loading动画 不能从物理速度消除等待，但优化用户感知体验，缓解“加载慢”主观感受。
八、避坑清单（常见错误操作，不要做）
❌ 在首页加载全部页面图片、海报大图 ❌ 引入完整大型JS框架，只用到少量功能 ❌ 大量图片不压缩、直接上传原图 ❌ 不配置缓存，用户每次打开重复下载全部资源 ❌ head中同步执行大量JS，阻塞页面渲染 ❌ 一次性并发十几张图片请求，造成安卓微信加载排队
