目录

• 加载优化
• JavaScript优化
• CSS优化
• 渲染优化
• 交互优化
• HTML与视口
• 网络与资源加载优化
• 图像与媒体优化
• 资源压缩与合并
• 执行环境优化
• 用户交互体验优化
• 性能监测与调试

概述

移动H5应用的性能优化是确保用户获得流畅体验的关键。优化目标包括减少加载时间、提高运行效率和降低资源消耗。

加载优化

1. 减少HTTP请求：合并CSS、JavaScript文件，使用雪碧图合并小图标。
2. 缓存：利用浏览器缓存，设置合理的缓存策略（如ETag, Cache-Control）。
3. 压缩HTML、CSS、JavaScript：减小文件大小，加速传输。
4. 无阻塞：将CSS放在头部，JavaScript放在底部或异步加载，避免阻塞渲染。
5. 使用首屏加载：优先加载首屏内容所需的资源。
6. 按需加载：懒加载图片和非首屏内容，延迟加载非必要脚本。
7. 预加载：对即将访问的资源进行预加载。
8. 压缩图片：使用更高效的图片格式（如WebP），适当压缩图片大小。
9. 减少Cookie：对于静态资源请求，考虑使用无Cookie的域名。
10. 避免重定向：减少页面跳转的重定向次数。
11. 异步加载第三方资源：避免第三方脚本阻塞页面加载。
12. JavaScript优化
13. 代码精简：去除无用代码，使用更高效的算法。
14. 避免全局变量：减少全局变量污染，使用立即执行函数表达式或模块模式。
15. 事件委托：减少事件监听器的数量，提高性能。

CSS优化

1. 避免内联样式：将样式移到外部CSS文件，减少HTML体积。
2. 避免CSS表达式：它们会持续计算，影响性能。
3. 清理空规则：无内容的CSS规则会增加解析负担。
4. 合理使用display属性：避免频繁切换display导致的重排。
5. 浮动布局适度：过度使用float可能导致布局复杂，考虑使用Flexbox或Grid。
6. 限制Web字体数量：过多的Web字体加载慢，影响渲染速度。
7. 统一font-size基准：减少计算量，提高渲染效率。
8. 单位简化：值为0时，无需单位。

渲染优化

1. 标准化前缀：针对不同浏览器使用正确的前缀，但避免冗余。
2. 避免复杂选择器：简单选择器提高匹配效率。
3. 减少重绘和回流：通过改变transform和opacity而非宽高位置，减少布局变化。
4. 交互优化
5. TOUCH事件优化：合理使用touchstart/touchend代替click，减少延迟。
6. 动画优化：使用requestAnimationFrame实现更流畅的动画效果。
7. 高频事件节流/防抖：避免在滚动等高频事件中频繁执行函数
8. 减少DOM节点：简化DOM结构，减少渲染成本。
9. GPU加速：利用CSS3的硬件加速属性，如translate3d、will-change，提升动画性能。

HTML与视口

1. Viewport设置：合理设置viewport，确保页面在不同设备上的适配。

网络与资源加载优化

数据预拉取与预解析

1. 预拉取（Prefetching）：对于预测用户可能访问的页面或资源，可以通过 <link rel="prefetch"> 提前请求，减少后续实际访问时的等待时间。
2. 预解析（Preloading）：与预拉取类似，但更适用于关键资源，如CSS、JavaScript，使用 <link rel="preload"> 确保关键路径资源优先加载。

服务工作者（Service Worker）

1. 利用 Service Worker 可以实现离线缓存、网络请求拦截与优化等功能，提高应用的加载速度和可靠性。

图像与媒体优化

1. 图片懒加载：确保图片只在即将进入可视区域时才开始加载。
2. 响应式图片：使用 srcset 和 <picture> 标签，根据设备特性选择最合适的图片资源，减少带宽消耗。
3. WebP格式：支持WebP格式的浏览器可以享受更高的图像压缩率而不损失质量。

资源压缩与合并

1. 代码分割：将大的JavaScript和CSS文件拆分成按需加载的小块，减少首次加载时间。
2. 资源合并：合并小的CSS和JavaScript文件，减少HTTP请求次数。
3. GZIP压缩：服务器端开启GZIP压缩，进一步减小资源传输大小。

执行环境优化

1. 避免长时间运行的JavaScript：长任务会阻塞主线程，影响页面响应，考虑使用Web Workers进行后台处理。
2. 减少JavaScript执行：优化逻辑，减少不必要的计算和DOM操作。

用户交互体验优化

1. 触摸反馈：为触摸事件提供视觉或触觉反馈，提升用户体验。
2. 平滑滚动：优化滚动性能，避免在滚动过程中触发不必要的计算或渲染。

性能监测与调试

1. 使用Performance API：通过Navigation Timing API、Paint Timing API等，监控页面加载、渲染等关键性能指标。
2. Lighthouse与WebPageTest：定期使用这些工具进行性能测试，获取优化建议并跟踪性能改进