H5页面性能优化

  • 最少化请求个数
    手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个）
    如何减少请求次数：
  1. 合并图片（将若干个小图合并成一个大图、雪碧图）
  2. 合并JS/CSS文件
  • 减少单个文件大小
  1. 使用轻量的JS插件
  2. 优化CSS、删除未使用的规则
  3. 优化单张图片的大小
  4. 压缩CSS和JS、开启Gzip
  5. 缓存（CDN与浏览器缓存）
    cdn是服务器缓存机制
    前端缓存可以用DOM Storage （ sessionStorage 和 localStorage）、数据库（IndexedDB）等把服务器请求的数据缓存到本地，减少对服务器的访问

  • 页面性能分析工具
    chrome的开发者模式，可以跟踪页面加载的所有文件,调用的接口以及他们的加载顺序、大小等信息


最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容