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的距离是多少才加载图片。
offsetHorizontal 默认值为0。设置左右到viewport的距离是多少才加载图片。
offsetTop 默认值为offsetVertical。设置顶部距离viewport的距离
offsetButton 默认值为offsetVertical。设置顶部距离viewport的距离
offsetLeft 默认值为offsetVertical。设置左边距离viewport的距离
offsetRight 默认值为offsetVertical。设置右边距离viewport的距离
throttle 单位毫秒 设置图片延迟加载时间，通俗点说就是函数调用的频度控制器，是连续执行时间间隔控制。主要应用的场景比如：鼠标移动，mousemove事件；DOM元素动态定位，window对象的resize和scroll事件。
debounce 单位布尔值，默认true， unload 单位布尔值，默认false。该选项告诉echo，当图片滑动超过了viewport的时候不在加载该图片。
callback 单位函数，回调函数会传递已更新的元素和操作（load或者unload）给回调函数。
3、css、js压缩
可以手动对每个文件用工具压缩，但难免太繁琐导致上线的时候被遗忘，这事同样可以用自动化工具gulp或npm scripts进行压缩，同样移步http://www.css88.com/archives/7025
4、延迟加载js
google推荐的方法是

这段代码意思是等到整个文档加载完后，再加载外部文件“defer.js”。

那是不是所有的js都可以用这种方式加载呢，答案是否定的。这段代码是在文档加载完成后才去加载指定的js文件，因此，不应该将页面正常加载所需的js放在这里，所以可以将js分为两类，一类是页面正常加载所需的js，另一类就是不影响页面的正常加载（例如需要用户触发click等特定操作）的js，将第二类js用上述方式加载，不就可以尽可能快地交付内容给用户了吗？