h5首页加载慢_H5优化加载速度

在做H5的过程中，加载速度慢是一个最大的痛点，抛开数据请求加载不说，无非就是图片、javascript、css这些静态资源加载耗费了大量的时间，这里就拿这个问题与大家分享下我的经验：

1、图片压缩

我们知道同一张图片，png格式要比jpg格式体积要来得小，所以在非必要情况下，不使用png格式，我用“TinyPNG”进行压缩，可至少减小体积30%。还有一个智图，我还没真正用过，也不说了，有兴趣的可以去了解下。也可以用自动化工具gulp或者npm scripts，篇幅有限，这里不展开，移步http://www.css88.com/archives/7025

2、图片懒加载

对于用户来说，第一屏以外的图片，没有必要花费时间去等待加载，我使用懒加载插件echo.js，这个插件在移动端目前未发现不兼容情况。之前用lazyload.js，但在个别Android机型不兼容，抛弃了。echo.js的使用方法很简单:

html:

1.jpg是需要加载的图片，blank.gif是占位图

js:

引入echo.js后初始化

echo.init({

offset: 1334,

throttle: 250,

unload: false

});

基础参数：

offset 默认值为0。设置上下左右到viewport的距离多少才加载图片。

offsetVertical 默认值为0。设置上下到viewport的距