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

时间:2024-01-07 21:57:50

[原创]浅谈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