分析个性化推荐的耗时,可以分为如下几个阶段:
(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的时候都放在页面渲染完毕之后再进行,会有些微的滞后。
分享到:
相关推荐
web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题...
web前端笔试题面试题汇总+前端优化总结.pdfweb前端笔试题面试题汇总+前端优化总结.pdf
非常全面有用,个人整理的,对面试和学习都很有帮助 ECMA语法:数值计算,类型转换,数组,if,switch,while语句,函数,访问节点,插入节点。。 表格与表单:动态添加行,动态删除列。。。 BOM模型:window对象,...
web前端优化的一些自己从网上参考的方法然后总结出的内容
根据yslow建议,个人总结处理的一些web前端的优化方案。
web前端优化知识总结+笔试+面试总结.pdf
前端性能优化 yahoo前端性能团队总结的35条黄金定律。
为什么要做性能优化?性能优化到底有多重要? 网站的性能优化对于用户的留存率、转化率有很大的影响,所以对于前端开发来说性能优化能力也是重要的考察点。
web前端优化知识总结+笔试+面试总结[参照].pdf
个人总结 j2ee J2EE 缓存 Web前端优化 服务器缓存 Hibernate ecache 面试
经典总结web前端开发中使用jQuery/js值得注意的一些地方,如DOM操作等额可以显著提升页面加载效率。
1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验 2. 从服务商角度而言,优化能够减少页面请求数、或者减小
移动H5前端性能优化指南,某TX工程师经验总结,纯干货。
全书以问题为导向,精选了前端开发中的34个疑难问题,从分析问题的原因入手,逐步给出解决方案,并分析各种方案的优劣,最后针对每个问题总结出高效编程的最佳实践和各种性能优化的方法。全书共7章,内容从逻辑上...
这篇文章讲述可以帮助 改善优化前端的技术,非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用CDN,以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性能提升。 一. 清理 HTML 文档 HTML,...
前端知识点总结 1. HTML(超文本标记语言):用于创建网页的标记语言,包含标签、属性、文本等元素,用于描述网页的结构和内容。 2. CSS(层叠样式表):用于美化网页的样式语言,包含选择器、属性和值,用于描述...
本文并非一篇讨论性能优化技术方法的文章,而更多的是对中文站搜索List页面持续两年多的前端性能优化实践的思路总结。希望对正在从事这个领域研究的前端同学能有所帮助。 简单的说,我们的性能优化实践分为三个...