箩颈补箩耻.肠辞尘首页前端优化一期报告
- 1. 首页前端优化
一期报告
张所勇
前端开发工程师
suoyong@leju.sina.com.cn
zhangsuoyong@163.com
LEJU Confidential 1
- 5. 加载时间（不使用缓存）
加载时间(单位：秒)
12
10 10.8
8
7.6
6
加载时间(单位：
4 4.6 秒)
2
0
原首页 新首页 淘宝商城
?不使用缓存时，相比原首页，加载时间 减少57.4%
测试方法：相同时段，同一机器firefox10下firebug多次测量取平均值
5
- 6. 加载时间（使用缓存）
加载时间(单位：秒)
10
8 8.6
6
4 加载时间(单位：
3.5 3.7 秒)
2
0
原首页 新首页 淘宝商城
?使用缓存时，相比原首页，加载时间 减少59.3%
测试方法：相同时段，同一机器firefox10下firebug多次测量取平均值
6
- 7. 加载时间（网速慢、不使用缓存）
加载时间(单位：秒)
40
35 37.2
30
25
20
15 18.1 加载时间(单位：
15.9
10 秒)
5
0
原首页 新首页 淘宝商城
?网速慢且不使用缓存时，相比原首页，加载时间 减少51.3%
测试方法：相同时段，同一机器firefox10下firebug多次测量取平均值.低网速通过
fiddler模拟。
7
- 8. 加载时间（网速慢、使用缓存）
加载时间(单位：秒)
18
16
14 15.6
12
10
8 加载时间(单位：
6
4 6.1 6.1 秒)
2
0
原首页 新首页 淘宝商城
?网速慢且使用缓存时，相比原首页，加载时间 减少60.8%
测试方法：相同时段，同一机器firefox10下firebug多次测量取平均值.低网速通过
fiddler模拟。
8
- 10. 页面大小
页面大小（单位Kb）
3500
3000
3018
2500
2000
1500 页面大小（单位
1000 Kb）
500 881
0
原首页 新首页
?相比原首页，页面大小 减少2088Kb，减少了70%
测试方法：相同时段，同一机器firefox10下YSlow测量。
10
- 11. 贬罢罢笔请求数量
HTTP数量（单位：个）
180
160
140 154
120
100
80 HTTP数量（单
60
40 位：个）
50
20
0
原首页 新首页
?相比原首页，页面HTTP请求减少104个，减少了67.5%
测试方法：相同时段，同一机器firefox10下YSlow测量。
11
- 12. 资源对比
各项资源个数对比
140
120
100
个数
80
60
40
20
0
CSS图 内容图
HTML JS CSS
片 片
原首页 1 12 0 14 121
新首页
. 1 4 2 10 31
?相比原首页，页面JS减少了8个，图片减少了94张
测试方法：相同时段，同一机器firefox10下YSlow测量。
12
- 13. 资源大小对比
各项资源大小对比（单位Kb）
大小（单位Kb） 2500
2000
1500
1000
500
0
CSS 内容
HTML JS CSS
图片 图片
原首页 42.8 87 0 518.6 2064
新首页
. 32.9 54 37 90.4 716
?相比原首页，页面JS减少了33Kb
测试方法：相同时段，同一机器firefox10下YSlow测量。
13
- 14. 冗余颁厂厂
冗余颁厂厂（单位：条）
250
200 232
150
100 122 冗余颁厂厂（单
位：条）
50
0
原首页 新首页
?相比原首页，页面中无用CSS 减少110条
测试方法：相同时段，同一机器firefox10下YSlow测量。
14
- 15. 内存占用峰值
内存占用峰值（单位：M）
13
12.5 12.72
12
11.5
11 内存占用峰值
10.5 10.78 （单位：M）
10
9.5
原首页 新首页
?相比原首页，页面加载过程中，内存峰值 降低1.94M
测试方法：相同时段，同一机器Chrome18.0.1025.3测量。
15
- 19. Yahoo Yslow评分
网站 级别 评分
原首页 C 74
新首页 B 88
淘宝商城 C 79
新浪乐居 F 46
测试方法：相同时段，同一机器firefox下Yslow测量。
19
- 20. 笔补驳别厂辫别别诲评分
网站 评分
原首页 72
新首页 78
淘宝商城 96
新浪乐居 61
测试方法：相同时段，同一机器firefox下pagespeed测量。
20
- 43. 使用DOM延时渲染技术
0秒 5秒 10秒 15秒 20秒
1 2 3 4 5
第1张图 第2张图
要动时 开始动时
，开始 ，下载第
加载第2 3张图
张图
2 3 4
下载中… 下载中…
4秒内下载完成 4秒内没下载完
认为网速好 认为网速不好
接下来不做操作 马上下载下一张
43
- 45. 优化目录结构
static
min.static.jiaju.com colorpicker.js
dojQuery-s
tool …
asset
ui hoverfn.js
src …
(同asset)
site common search.js
script
…
index
asset
…
src
(同asset) style common reset.css
min index …
…
45
- 50. 冗余颁厂厂
冗余颁厂厂（单位：条）
250
200 232
150
100 122 冗余颁厂厂（单
位：条）
50
0
原首页 新首页
?相比原首页，页面中无用CSS 减少110条
测试方法：相同时段，同一机器firefox10下YSlow测量。
50
- 52. 控制大图尺寸
原焦点图尺寸 新焦点图尺寸
120K-250K 小于55K
52
