H5在微信公众号内性能优化完整方案
适配你当前【吃货测试答题抽奖H5】项目，分为：加载优化、渲染交互、海报合成专项（你的项目核心）、微信WebView专属坑、线上监控，内容可以直接放进项目方案、交付规范里。
关键背景：微信有两套内核 iOS微信：强制使用 WKWebView；安卓微信：X5内核，不同机型差异极大，内存、速度参差不齐，是卡顿、白屏、闪退高发区。
一、首屏加载优化（解决白屏、打开慢）
1. 资源瘦身
图片优化（重中之重）
活动背景、海报模板、图标统一压缩；优先WebP格式（安卓X5支持，iOS按需降级PNG）
大图使用渐进式图片、懒加载，不在首屏一次性加载全部素材（所有页面、海报背景图不要一次性请求）
区分2x图，禁止上传超大尺寸原图（海报模板不要超过1080px宽度）
代码打包
JS、CSS开启压缩，移除注释、无用代码；合并静态资源，减少HTTP请求
使用CDN托管静态资源（css/js/图片），大幅提升打开速度
分包/按需加载 答题页面、抽奖弹窗、海报合成逻辑延迟加载；首屏只加载「城市选择页」必需资源。
2. 静态缓存策略
静态资源设置合理
Cache-Control长期缓存；版本迭代通过资源后缀哈希（main.abc123.js）实现更新，避免用户缓存旧页面BUG。不滥用localStorage，只缓存少量答题临时数据，不要存放大图base64。
3. 避免阻塞渲染
CSS放在head，JS尽量后置/异步加载（
async/defer）不要在首页同步请求大量后端接口；接口请求等待期间展示loading，不要空白等待。
二、页面渲染&交互优化（滑动卡顿、点击延迟）
布局方案规范采用
vw / rem移动端适配；避免频繁重排（不要在scroll、touchmove事件里频繁读取/修改DOM宽高）。开启硬件加速 动画、弹窗滑动使用
transform: translateZ(0)；尽量使用CSS3动画，杜绝JS逐帧动画。消除微信经典300ms点击延迟 前端引入fastclick，或meta标签设置：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
DOM精简 答题页面不要一次性渲染全部10道题目；采用「一题一页」，未到达的题目延迟渲染，减少DOM节点数量。
三、Canvas海报合成专项优化【你的项目重点！】
你的项目核心痛点：生成分享海报容易卡顿、黑屏、图片加载失败、合成缓慢
海报素材预加载策略 不要点击【生成海报】才开始加载背景图；进入结果页后静默预加载海报模板。
限制Canvas画布尺寸 画布不要超过手机分辨率上限（建议最大宽度1080px），画布越大，内存占用越高，低端安卓容易闪退。
图片跨域处理 海报用到的图片资源服务器配置
Access-Control-Allow-Origin，防止Canvas污染无法导出图片；微信环境非常容易踩这个坑。避免多次重复绘图 用户反复点击生成海报，做防抖控制；缓存上一次绘图结果，减少重复渲染。
base64导出优化 大图导出不要直接生成超长base64，可以优先使用blob，减少内存占用。
四、微信WebView专属坑优化（区别于普通浏览器H5）
1. JS-SDK 优化
提前完成wx.config签名，不要等到用户点击分享才发起签名请求
缓存签名信息，短时间内复用，减少后端接口请求
常见问题：签名接口频繁调用造成页面卡顿
2. 安卓X5内核兼容问题
避免使用过于前沿CSS属性（部分老旧安卓X5渲染异常）
不要一次性同时发起6个以上图片请求，X5请求队列阻塞
页面卸载时，清除定时器、监听事件、取消未完成图片请求，防止内存持续上涨，多次进出页面后闪退。
3. iOS WKWebView特有问题
iOS存在localStorage容量限制、页面切换刷新缓存问题；重要答题数据优先放在URL参数、内存变量，不要过度依赖本地存储
iOS滚动回弹
overflow-scrolling:touch谨慎使用，嵌套层级过多极易卡顿4. 路由与页面跳转
单页面SPA项目合理管理路由；页面销毁清除所有定时器、滚动监听、图片加载任务，防止内存泄漏。
五、网络&接口请求优化
接口统一使用HTTPS（微信强制要求）
接口做节流防抖：答题下一题、抽奖按钮防止重复点击，短时间禁止重复请求
关键接口增加超时处理、失败重试；弱网环境增加友好提示，避免无限loading
可以对不实时变动的数据（城市列表、美食列表、题目）做前端本地缓存，减少重复请求后端
六、体验层面优化（感知性能）
合理设计Loading动画，避免用户觉得页面卡死
资源加载失败增加降级方案：图片加载失败显示占位图，海报合成失败给出重试按钮
图片、接口采用渐进加载，不要空白长时间等待
七、交付阶段落地执行清单（你可以直接作为开发规范）
全部静态资源CDN部署 + 压缩处理
移动端viewport标签规范写入
Canvas海报模块增加预加载、画布尺寸限制、防抖
所有定时器、事件监听页面离开统一销毁
JS-SDK预签名，缓存签名结果
图片懒加载、大图压缩，禁止超大原图
按钮、抽奖、生成海报增加防抖防重复点击
测试机型覆盖：低端安卓、iOS新旧机型、微信不同版本
