前端优化总结

分析个性化推荐的耗时,可以分为如下几个阶段:
(1) load 核心库js时间
(2) 发送request到服务器
(3) 等待接收服务器返回数据
(4) 开始处理html脚本
(5) 加载图片以及flash

以上这几部分,个性化推荐最多展示4个图片,1个flash
去除这5块,大致的展示时间是在30ms左右。
加上flash,不展示图片,所需时间为80-100ms左右
再加上图片,完整展示的时间为:105-110ms左右
从中可以看出flash的渲染耗时比较长,会增加50ms-70ms左右

考虑把图片和flash的处理做成异步的,这样在处理完毕html脚本呈现给用户之后再去加载图片以及flash,提升用户体验。

第一次改造方案:
flash和img都采用异步加载方案
Console [342]=
PersonalSearch execute start cost 375 ms

Console [343]=
PersonalSearch send request cost 375 ms

Console [344]=
start range cost 1701 ms

Console [345]=
end cost 1733 ms
从上面可以看出,耗时比较长的基本上都在后台服务请求,花了1.3s,在load js方面花的时间也比较长,有300多ms。

第二次改进:
load基础js类库放在和后台请求同步进行,节约时间,这样就需要把封装JSONP请求的代码单独抽出放在custom.js中。
Console [115]=
PersonalSearch execute start cost 0 ms

Console [116]=
PersonalSearch send request cost 0 ms

Console [117]=
start load js cost 16 ms

Console [118]=
end load js cost 110 ms

Console [119]=
load data cost 125 ms

Console [120]=
start range cost 141 ms

Console [121]=
end cost 172 ms
从上面可以看出load js的时间是94ms,load data的时间是125ms,而且是同步进行的,加上渲染的时间在50ms左右,该次请求的耗时为172ms。

经过优化之后,用户看到整个页面显示的时间基本上就是max(load js,load data)+渲染的时间。图片和flash的时候都放在页面渲染完毕之后再进行,会有些微的滞后。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值