zoukankan      html  css  js  c++  java
  • [原创]浅谈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

  • 相关阅读:
    C# 读取sqlite文件
    MongoDB聚合管道
    提取Word里的文本内容 C#
    Two Sum【LeetCode】
    Could not create SSL/TLS secure channel.
    处理Task引发的异常
    https请求抛出异常
    hexo+github page +markdown问题汇总
    通过自定义比较器排序(C#版)
    GridView固定行宽,自动换行,鼠标放在Table的Tr上变色
  • 原文地址:https://www.cnblogs.com/mayingbao/p/3831295.html
Copyright © 2011-2022 走看看