目录
概述
移动H5应用的性能优化是确保用户获得流畅体验的关键。优化目标包括减少加载时间、提高运行效率和降低资源消耗。
加载优化
- 减少HTTP请求：合并CSS、JavaScript文件，使用雪碧图合并小图标。
- 缓存：利用浏览器缓存，设置合理的缓存策略（如ETag, Cache-Control）。
- 压缩HTML、CSS、JavaScript：减小文件大小，加速传输。
- 无阻塞：将CSS放在头部，JavaScript放在底部或异步加载，避免阻塞渲染。
- 使用首屏加载：优先加载首屏内容所需的资源。
- 按需加载：懒加载图片和非首屏内容，延迟加载非必要脚本。
- 预加载：对即将访问的资源进行预加载。
- 压缩图片：使用更高效的图片格式（如WebP），适当压缩图片大小。
- 减少Cookie：对于静态资源请求，考虑使用无Cookie的域名。
- 避免重定向：减少页面跳转的重定向次数。
- 异步加载第三方资源：避免第三方脚本阻塞页面加载。
- JavaScript优化
- 代码精简：去除无用代码，使用更高效的算法。
- 避免全局变量：减少全局变量污染，使用立即执行函数表达式或模块模式。
- 事件委托：减少事件监听器的数量，提高性能。
CSS优化
- 避免内联样式：将样式移到外部CSS文件，减少HTML体积。
- 避免CSS表达式：它们会持续计算，影响性能。
- 清理空规则：无内容的CSS规则会增加解析负担。
- 合理使用display属性：避免频繁切换display导致的重排。
- 浮动布局适度：过度使用float可能导致布局复杂，考虑使用Flexbox或Grid。
- 限制Web字体数量：过多的Web字体加载慢，影响渲染速度。
- 统一font-size基准：减少计算量，提高渲染效率。
- 单位简化：值为0时，无需单位。
渲染优化
- 标准化前缀：针对不同浏览器使用正确的前缀，但避免冗余。
- 避免复杂选择器：简单选择器提高匹配效率。
- 减少重绘和回流：通过改变transform和opacity而非宽高位置，减少布局变化。
- 交互优化
- TOUCH事件优化：合理使用touchstart/touchend代替click，减少延迟。
- 动画优化：使用requestAnimationFrame实现更流畅的动画效果。
- 高频事件节流/防抖：避免在滚动等高频事件中频繁执行函数
- 减少DOM节点：简化DOM结构，减少渲染成本。
- GPU加速：利用CSS3的硬件加速属性，如translate3d、will-change，提升动画性能。
HTML与视口
- Viewport设置：合理设置viewport，确保页面在不同设备上的适配。
网络与资源加载优化
数据预拉取与预解析
- 预拉取（Prefetching）：对于预测用户可能访问的页面或资源，可以通过
<link rel="prefetch">提前请求，减少后续实际访问时的等待时间。 - 预解析（Preloading）：与预拉取类似，但更适用于关键资源，如CSS、JavaScript，使用
<link rel="preload">确保关键路径资源优先加载。
服务工作者（Service Worker）
- 利用 Service Worker 可以实现离线缓存、网络请求拦截与优化等功能，提高应用的加载速度和可靠性。
图像与媒体优化
- 图片懒加载：确保图片只在即将进入可视区域时才开始加载。
- 响应式图片：使用
srcset和<picture>标签，根据设备特性选择最合适的图片资源，减少带宽消耗。 - WebP格式：支持WebP格式的浏览器可以享受更高的图像压缩率而不损失质量。
资源压缩与合并
- 代码分割：将大的JavaScript和CSS文件拆分成按需加载的小块，减少首次加载时间。
- 资源合并：合并小的CSS和JavaScript文件，减少HTTP请求次数。
- GZIP压缩：服务器端开启GZIP压缩，进一步减小资源传输大小。
执行环境优化
- 避免长时间运行的JavaScript：长任务会阻塞主线程，影响页面响应，考虑使用Web Workers进行后台处理。
- 减少JavaScript执行：优化逻辑，减少不必要的计算和DOM操作。
用户交互体验优化
- 触摸反馈：为触摸事件提供视觉或触觉反馈，提升用户体验。
- 平滑滚动：优化滚动性能，避免在滚动过程中触发不必要的计算或渲染。
性能监测与调试
- 使用Performance API：通过Navigation Timing API、Paint Timing API等，监控页面加载、渲染等关键性能指标。
- Lighthouse与WebPageTest：定期使用这些工具进行性能测试，获取优化建议并跟踪性能改进