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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhaowen25/article/details/47679773
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭