公众号内H5前端性能优化规范
适用场景：微信公众号内嵌HTML5活动页（答题测试、抽奖、海报合成类项目，适配你当前「吃商测试H5」） 运行环境：iOS WKWebView、安卓微信X5内核；可直接作为开发交付标准、放进项目需求文档。
一、基础HTML规范（必须强制执行）
1. Viewport 标准头部（解决缩放、300ms延迟、布局错乱）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
禁止移除
user-scalable=no；禁止写固定px宽度布局；需要适配刘海屏增加：
<meta name="apple-mobile-web-app-capable" content="yes">2. HTML结构约束
DOM节点精简，单页面DOM总数尽量控制在 ≤800个；
答题类分页场景，未展示模块延迟渲染，不要一次性渲染全部题目；
避免多层DOM嵌套（嵌套层级不大于6层）；
空状态、加载态、错误态UI提前设计，不要动态临时生成DOM。
3. 资源加载基础规则
CSS全部放在
<head>；非关键JS后置或使用defer/async；禁止同步引入超大JS、禁止在head中执行大量同步逻辑；
页面初始化不并发发起超过6个网络请求（安卓X5内核请求队列限制）。
二、图片资源优化规范（活动H5最大性能瓶颈）
尺寸约束移动端素材基准宽度：750px；海报画布最大宽度1080px，禁止上传2000px以上原图。
格式策略
照片/渐变背景：优先WebP，低端机型自动降级PNG/JPG；
图标、透明素材：扁平化图标使用SVG替代PNG；
压缩与懒加载
所有图片上线前无损压缩；
非首屏图片统一启用懒加载；
海报Canvas专项约束（本项目重点）
海报模板素材进入结果页静默预加载，不要点击生成海报才加载；
图片资源服务端配置跨域头
Access-Control-Allow-Origin，防止画布污染无法导出图片；禁止在循环内重复加载图片资源。
禁止将大图转为Base64嵌入HTML，少量小图标除外。
三、CSS & 动画渲染优化
布局适配：使用
vw / rem，不使用固定px；动画规范： ✅ 推荐：
transform、opacity（触发合成层，硬件加速） ❌ 禁止：使用top/left/margin做位移动画（持续触发重排）/* 推荐开启硬件加速，适度使用，不可全局滥用 */ .animate-box{ transform: translateZ(0); }减少通配符选择器、深层次嵌套选择器；
避免滥用
overflow-scrolling: touch，嵌套多层极易造成iOS卡顿；弹窗、遮罩关闭后及时移除DOM，不要display:none长期驻留。
四、JavaScript 代码规范（防卡顿、防内存泄漏）
1. 事件优化
scroll、touchmove事件必须增加节流（throttle）；抽奖、生成海报、下一题按钮统一增加防抖，防止重复点击频繁请求接口。
2. 定时器 & 监听清理（微信页面闪退头号诱因）
微信SPA/多页面跳转不会自动销毁上下文！
页面离开、弹窗关闭时：
清除所有
setInterval / setTimeout移除scroll、resize、touch等全局事件监听
取消正在进行中的图片加载、未完成ajax请求。
3. 本地存储规范
localStorage仅存储少量简单文本（配置、临时答题记录）；严禁存放Base64大图，iOS WKWebView存储空间有限，过量存储会导致页面异常刷新；
敏感、临时数据优先保存在内存变量，不要持久化。
4. Canvas绘图强制规范（适配你的海报生成功能）
画布不用时执行
canvas.width = 0释放内存；多次生成海报做缓存，避免重复加载素材、重复绘图；
避免超大画布高频重绘；
图片串行加载，禁止一次性并发加载多张海报素材。
五、微信JS-SDK专属优化规范
提前签名不要等到用户点击分享按钮才请求wx.config；进入页面尽早获取签名并缓存，有效期内复用；
按需注入接口列表，不要一次性注入全部无用API；
捕获
wx.config失败异常，提供降级分享方案；分享参数（标题、封面图）提前准备，不要在点击瞬间异步加载。
六、网络请求 & 缓存规范
全部接口使用HTTPS（微信强制）；
静态资源（js/css/图片）CDN部署，设置长久缓存
Cache-Control；文件更新使用哈希后缀防缓存；静态不变数据（城市列表、美食列表、题目数组）前端本地缓存，减少重复请求；
接口统一增加超时时间（建议8~12秒），弱网增加友好提示；
合并重复请求，相同接口短时间内多次调用只发起一次。
七、针对微信双内核兼容优化（重点区分iOS/安卓）
iOS（WKWebView）
页面回退会缓存页面状态，路由切换注意清理定时器；
localStorage容量受限，禁止大量存储；
滚动回弹效果容易引发bug，谨慎使用嵌套滚动容器。
安卓（X5内核）
并发图片请求不要超过6个；
避免使用前沿CSS属性，部分机型渲染失效；
内存敏感，连续多次进出页面容易闪退，严格管控DOM与Canvas内存。
八、体验感知优化（用户主观性能）
网络加载阶段展示Loading，杜绝长时间白屏；
资源加载失败增加占位图、重试按钮；
页面拆分加载，优先渲染首屏内容；
禁止无阻塞长时间同步运算（大量循环、复杂绘图），耗时操作使用
requestAnimationFrame分片执行。九、上线验收测试清单（可直接用于项目验收）
低端安卓机型测试：是否卡顿、海报能否正常生成、会不会闪退；
iOS新旧机型测试：页面回退是否内存持续上涨；
弱网环境测试：接口超时、图片加载异常有无容错；
连续多次打开/关闭页面，检测是否内存泄漏；
确认所有定时器、事件监听页面销毁正常清理；
验证分享功能、Canvas海报合成无跨域报错。
