想自学教程的朋友,就来教程巴巴。
教程巴巴
当前位置: 主页 > 图文 > 网页制作教程 >

网站首页优化教程 Flash篇(3)

发布时间:2012-08-04 08:39 点击:
分享到:
【评论本教程】 【挑错本教程】
------分隔线----------------------------
Flash加载前已经加载,Flash加载的图片仅是在缓存中加载,所以,图片整体大小并未增加,但是缓存机制无法保证在所有用户都起作用。

设计师对此次改进依然不满意,因为有2-3秒内首屏没有动画效果,所以一个Flash首屏的JS提单版本开发出来,在整个Flash加载以及内部的图片加载完成后隐藏JS版生成的Dom元素,隐藏而不是移除的原因是为了后台的统计。

5. JS部分替代版本:

所有首屏图片重复加载,对首屏的影响跟前面的版本相比差别不大,增强了用户体验,在不支持Flash的浏览器中依然可以使用。

Flash 版本从上线到这个时候已经半个月,无论前端还是BI部门对这个首屏都不满,特别是BI部门,后台系统对点击数据的统计是基于a 标签的,Flash版本使BI部门只能手工统计,而且不准确。我们找了设计师后,确认一些额外的超炫功能暂时不再上线,我们就使用完全的JS版本替代Flash版本。

6.JS完全替代版本:

首页,首屏的请求数降低到25个,首屏资源的大小下降到370K左右,加载时间2-3秒,中间没有白屏等待Flash加载的现象。

对比表格

版本 请求数 首屏资源大小 首屏完全加载完成后资源大小 加载时间 加载完成前显示空白时间
上线前 34 1.1M 1.1M 10-15s 2-5s
上线后 30 900K 1.1M 8-10s 2-5s
优化图片后 30 400k 700K 5-8s 2-5s
预加载Flash图片 40 700K 1.1M 5-8s 无(2秒内可以显示图片)
JS部分替代 44 700K 1.5M 5-8s 无(2秒内可以显示图片)
JS完全替代 25 370k 520K 2-3S