H5页面性能优化

H5性能优化的两个原则

1、最少化请求个数

2、最小单个文件大小

最少请求个数

为什么要减少请求次数：

手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个）

如何减少请求次数：

1、合并图片（将若干个小图合并成一个大图、雪碧图）

2、合并JS/CSS文件（Nginx_concat_module）

天猫与淘宝的线上实践：

相同网络条件下合并后与合并前的数据对比：

文件大小：2.0KB     小于   1.2KB +  942B + 997B
下载耗时：761ms    小于  553ms + 688ms + 569ms

3、按需加载、滚动加载、延迟加载

1）、遍历收集所有需要滚动加载的DOM
2）、存储于临时列表
3）、申明滚动响应处理事件（懒操作），例如将设置的默认图片src修改为data-url里面的值实现图片懒加载
4）、绑定window的scroll事件

减少单个文件大小

如何减少单个文件大小：

1）、使用轻量的JS插件
2）、优化CSS、删除未使用的规则
3）、优化单张图片的大小
4）、压缩CSS和JS、开启Gzip
5）、缓存（CDN与浏览器缓存）

以使用Jquery插件的页面为例：

Jquery与zepto的DomContentLoaded对比：

,,

用zepto替换jquery，因为zepto兼容jquery

首屏渲染与体验：

1）、优化DOM结点数量
2）、JS、CSS外部引用
3）、JS放最底端或开启异步加载async、defer
4）、CSS放头部优先下载
5）、需要加载完立马执行的JS可以内嵌在HTML底部

使用工具优化：

TTFB 服务器处理业务逻辑耗时优化：

网络差影响下载耗时：

拓展资料：

页面的生成过程图：

腾讯前端规范：

http://isux.tencent.com/h5-performance.html

http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201412/293834.shtml