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

[原创]浅谈H5页面性能优化方法的更多相关文章

  1. [原创]浅谈H5页面性能测试

    [原创]浅谈H5页面性能测试 H5页面我想各位都不陌生,随着移动互联网兴起,不管是App,还是H5都火起来了,最突出的2个表现是ios/android/前端等工程师薪水大涨,尤其是资深前端工程师40W ...

  2. [原创]浅谈H5页面测试介绍

    [原创]浅谈H5页面测试介绍 目前移动互联网非常火热,除了各种App,H5也是非常热,由于H5跨平台,且版本更新容易,做为引流或获客是非常好的一种简单低成本平台:今天来谈谈H5页面测试都要测试什么? ...

  3. 浅谈webpack4.0 性能优化(转)

    前言:在现实项目中,我们可能很少需要从头开始去配置一个webpack 项目,特别是webpack4.0发布以后,零配置启动一个项目成为一种标配.正因为零配置的webpack对项目本身提供的“打包”和“ ...

  4. BizTalk开发系列(三十二)浅谈BizTalk主机性能优化

    很多BizTalk的项目都要考虑到性能优化的问题,虽然BizTalk采用多线程处理消息的,大大提高了程序效率.但默认情况下 BizTalk的主机有很多阻止参数会控制BizTalk对服务器的资源使用率, ...

  5. H5页面性能优化

    对于一个产品,性能在用户体验中是必不可缺的一环.性能优化是个长远的事情,联想到导航项目,列出以下性能优化的方案: 一. 基本的代码层面优化: 1:合理使用css 1)正确使用Display属性 Dis ...

  6. 浅谈Oracle数据库性能优化的目标

    Oracle性能优化保证了Oracle数据库的健壮性,为了保证Oracle数据库运行在最佳的性能状态下,在信息系统开发之前就应该考虑数据库的优化策略.从数据库性能优化的场景来区分,可以将性能优化分为如 ...

  7. 浅谈web前端性能优化

    前端性能优化: 一.尽可能减少前端http请求. 1.合并优化脚本文件和css文件. 2.同种类型的背景图片尽量放在一起,用css控制显示. 二.使用浏览器缓存. 如果能强制浏览器缓存在本地,将会降低 ...

  8. 浅谈JavaScript代码性能优化

    可以通过https://jsbench.me/测试网站完成性能测试. 一.慎用全局变量 1.全局变量定义在全局执行上下文,是所有作用域链的顶端,在局部作用域中没找到的变量都会到全局变量中去查找,所以说 ...

  9. 浅谈MySQL 数据库性能优化

    MySQL数据库是 IO 密集型的程序,和其他数据库一样,主要功能就是数据的持久化以及数据的管理工作.本文侧重通过优化MySQL 数据库缓存参数如查询缓存,表缓存,日志缓存,索引缓存,innodb缓存 ...

随机推荐

  1. 最短判断IE的办法

    if(!!-[1,]){ return }; 无意中看到这样一行代码,经查是用来判断IE的代码,非常精简,原理如下: [1,],这是一个数组,IE和标准浏览器对这样一个数组的解析是不一样的 alert ...

  2. extJS 创建类

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. AngularJS $http

    $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据.在服务器上读取数据: <div ng-app="myApp" ng-controller=&q ...

  4. ubuntu14.04中国源

    deb http://cn.archive.ubuntu.com/ubuntu/ trusty main restricted universe multiverse deb http://cn.ar ...

  5. Sql中判断&quot;库、表、列,视图,存储过程&quot;是否存在

    --判断数据库是否存在 IF EXISTS (SELECT * FROM MASTER.sys.sysdatabases WHERE NAME = '库名') PRINT 'exists ' else ...

  6. Linux命令 rpm

    rpm -q samba                          --查询程序是否安装rpm -qa | grep httpd  --[搜索指定rpm包是否安装]  --all搜索*http ...

  7. python网络爬虫学习笔记

    python网络爬虫学习笔记 By 钟桓 9月 4 2014 更新日期:9月 4 2014 文章文件夹 1. 介绍: 2. 从简单语句中開始: 3. 传送数据给server 4. HTTP头-描写叙述 ...

  8. ODAC(V9.5.15) 学习笔记(二)控件列表

    ODAC的控件有26个,简单介绍如下: TOraSession  管理Oracle的连接  TOraQuery  使用SQL进行数据获取,自动将更新提交数据库  TSmartQuery    在处理字 ...

  9. Atitit 架构的原则attilax总结

    Atitit 架构的原则attilax总结 1.1. Rule of three称为"三次原则",指的是当某个功能第三次出现时,才进行"抽象化".是DRY原则和 ...

  10. 学习URL地址(待整理)

    编程开发教程:http://www.runoob.com/ ElasticSearch教程:https://es.xiaoleilu.com/index.html 设计模式:http://www.cn ...