天天看点

H5页面性能优化H5性能优化的两个原则最少请求个数减少单个文件大小

1、最少化请求个数

2、最小单个文件大小

手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个)

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

2、合并JS/CSS文件(Nginx_concat_module)

天猫与淘宝的线上实践:

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

H5页面性能优化H5性能优化的两个原则最少请求个数减少单个文件大小
H5页面性能优化H5性能优化的两个原则最少请求个数减少单个文件大小

文件大小:2.0KB     小于   1.2KB +  942B + 997B

下载耗时:761ms    小于  553ms + 688ms + 569ms

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

H5页面性能优化H5性能优化的两个原则最少请求个数减少单个文件大小

1)、遍历收集所有需要滚动加载的DOM

2)、存储于临时列表

3)、申明滚动响应处理事件(懒操作),例如将设置的默认图片src修改为data-url里面的值实现图片懒加载

4)、绑定window的scroll事件

1)、使用轻量的JS插件

2)、优化CSS、删除未使用的规则

3)、优化单张图片的大小

4)、压缩CSS和JS、开启Gzip

5)、缓存(CDN与浏览器缓存)

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

H5页面性能优化H5性能优化的两个原则最少请求个数减少单个文件大小

Jquery与zepto的DomContentLoaded对比:

H5页面性能优化H5性能优化的两个原则最少请求个数减少单个文件大小

,

H5页面性能优化H5性能优化的两个原则最少请求个数减少单个文件大小
H5页面性能优化H5性能优化的两个原则最少请求个数减少单个文件大小

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

1)、优化DOM结点数量

2)、JS、CSS外部引用

3)、JS放最底端或开启异步加载async、defer

4)、CSS放头部优先下载

5)、需要加载完立马执行的JS可以内嵌在HTML底部

H5页面性能优化H5性能优化的两个原则最少请求个数减少单个文件大小
H5页面性能优化H5性能优化的两个原则最少请求个数减少单个文件大小
H5页面性能优化H5性能优化的两个原则最少请求个数减少单个文件大小
H5页面性能优化H5性能优化的两个原则最少请求个数减少单个文件大小

拓展资料:

页面的生成过程图:

H5页面性能优化H5性能优化的两个原则最少请求个数减少单个文件大小

腾讯前端规范:

H5页面性能优化H5性能优化的两个原则最少请求个数减少单个文件大小

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

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

继续阅读