`
bazhuang
  • 浏览: 147428 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

前端优化总结

阅读更多

分析个性化推荐的耗时,可以分为如下几个阶段:
(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的时候都放在页面渲染完毕之后再进行,会有些微的滞后。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics