[原创]浅谈H5页面性能优化方法

[原创]浅谈H5页面性能优化方法

　　前阶段公司H5页面性能测试，其中测试时也发现了一些性能瓶颈问题，接下来我们在来谈谈H5页面性能优化，仅仅是一些常用H5页面性能优化措施，其实和Web页面性能优化思路大体相同，仅仅是平台稍有差异或是不同。

　　我觉得H5平台与Web平台最大的区别是载体的访问渠道不同，移动与PC端不同就造就了针对各平台优化，下面看看我们主要针对H5页面性能优化入手从哪些方面开展：

　　1、图片资源压缩

　　1.1 压缩Png网站   工具推荐：http://tinypng.org/

　　2 减少Http请求，加快页面加载及显示

　　2.1 CSS Sprite 雪碧图，即将CSS图像合并技术，将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分；

　　2.2 图片地图，即将是从html代码的方式来控制显示区域；

　　2.3 Js&CSS合并；

　　2.4 组件压缩，如常用的从http请求返回资源中的html，js，CSS，xml等都可以设置压缩，常用的如：Gzip压缩；

　　3 调整图片格式和大小（建议各公司有统一标准）;

　　4 Css置放顶部，js置放底部;

　　5 http控制的缓存设置；

　　6 避免非200返回值，如博客园通常访问不到或给个404固定页面；

　　7 使用cdn；

　　99 腾讯H5性能优化 

　　https://isux.tencent.com/h5-performance.html