1. 首页前端优化
一期报告
张所勇
前端开发工程师
suoyong@leju.sina.com.cn
zhangsuoyong@163.com
LEJU Confidential 1

2. 为什么要优化？
 打开速度慢，10秒以上
 资源占用高，机器要崩溃
 代码杂乱无章，拖沓冗余
 历史遗留代码，不可控
2

3. 前提：
没有改变首页内容
3

4. 速度篇
4

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

9. 资源篇
9

10. 页面大小
页面大小（单位Kb）
3500
3000
3018
2500
2000
1500 页面大小（单位
1000 Kb）
500 881
0
原首页 新首页
相比原首页，页面大小 减少2088Kb，减少了70%
测试方法：相同时段，同一机器firefox10下YSlow测量。
10

11. HTTP请求数量
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. 冗余CSS
冗余CSS（单位：条）
250
200 232
150
100 122 冗余CSS（单
位：条）
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

16. CPU及带宽占用（不使用缓存时）
新首页
旧首页
相比原首页，页面加载过程中，CPU峰值点更少，带宽占用更少
客户端的压力变小了
测试方法：相同时段，同一机器Chrome18.0.1025.3测量。
16

17. CPU及带宽占用（使用缓存时）
新首页
旧首页
相比原首页，页面加载过程中，CPU峰值点更少，带宽占用更少
客户端的压力变小了
测试方法：相同时段，同一机器Chrome18.0.1025.3测量。
17

18. 评分篇
18

19. Yahoo Yslow评分
网站 级别 评分
原首页 C 74
新首页 B 88
淘宝商城 C 79
新浪乐居 F 46
测试方法：相同时段，同一机器firefox下Yslow测量。
19

20. PageSpeed评分
网站 评分
原首页 72
新首页 78
淘宝商城 96
新浪乐居 61
测试方法：相同时段，同一机器firefox下pagespeed测量。
20

21. 技术改进
21

22. 1、使用dojQuery-S框架
22

23. 使用dojQuery-S框架
 基于jquery1.5.1
 起源于dojQuery（作者：张经纬 ）
 能优雅的动态拼合载入脚本和css
dj.get(‘ui.hoverfn’,function(){
// to do sth
});
dj.getCss(‘ui.hoverfn’);
23

24. 使用dojQuery-S框架
 相比dojQuery，dojQuery-S有以下改进：
 更快
 更灵活，轻巧
 增加应急模式
 重建配套控件库
 支持依赖关系
24

25. 2、后台自动合并脚本和CSS
25

26. 后台自动合并脚本和CSS
 传统模式
 combo模式
26

27. 后台自动合并脚本和CSS
 传统模式
 combo模式
27

28. 后台自动合并脚本和CSS
 基于Minify开发
 精简逻辑
 CDN缓存 + squid缓存
 增加应急模式
28

29. 3、JS重构
29

30. JS重构
 重写所有JS
 全部功能控件化
 业务逻辑脚本颗粒化
 保证页面JS无冗余
30

31. JS重构
 首页JS构成
31

32. 4、新建控件库
32

33. 新建控件库
 必须自己开发，不使用互联网控件，保证可扩展、维护
 协作开发，大家贡献
 增加控件评审制度，保证控件质量
33

34. 新建控件库
已有控件：
34

35. 5、统一代码风格，优化JS
执行时机
35

36. 统一代码风格，优化JS执行时机
 统一代码风格
36

37. 统一代码风格，优化JS执行时机
 优化JS执行时机
渲染到这时
开始执行幻灯片脚本
37

38. 统一代码风格，优化JS执行时机
 削减检测代码数量，延时加载监测代码
38

39. 统一代码风格，优化JS执行时机
 异步获取登陆状态，不再阻塞页面
39

40. 6、使用DOM延时渲染技术
40

41. 使用DOM延时渲染技术
 主要延时渲染部分：
 首屏外区块
 商品分类菜单
 各种Tab标签
 各种Pop菜单
 各种幻灯片
 各种滚动图片
41

42. 使用DOM延时渲染技术
 幻灯片特性：
 图片延时加载
 感知网速，自动调节图片加载时机
42

43. 使用DOM延时渲染技术
0秒 5秒 10秒 15秒 20秒
1 2 3 4 5
第1张图 第2张图
要动时 开始动时
，开始 ，下载第
加载第2 3张图
张图
2 3 4
下载中… 下载中…
4秒内下载完成 4秒内没下载完
认为网速好 认为网速不好
接下来不做操作 马上下载下一张
43

44. 7、优化目录结构，自动构
建项目
44

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

46. 自动构建项目
 通过ANT自动构建
46

47. 自动构建项目
 通过ANT自动构建
47

48. 8、CSS颗粒化
48

49. CSS颗粒化
 首页CSS拆分、优化
49

50. 冗余CSS
冗余CSS（单位：条）
250
200 232
150
100 122 冗余CSS（单
位：条）
50
0
原首页 新首页
相比原首页，页面中无用CSS 减少110条
测试方法：相同时段，同一机器firefox10下YSlow测量。
50

51. 9、控制大图尺寸，优化发布系统
51

52. 控制大图尺寸
原焦点图尺寸 新焦点图尺寸
120K-250K 小于55K
52

53. 优化发布系统
 发布时检测图片尺寸，超过55k不允许发布
53

54. 将首页优化作为一项
长期任务
54

55. 下期计划
55

56. 下期计划
 优化图片及服务器
 兼容移动设备
 迈进HTML5
56

57. Thank You
57