1. 为速度而生
——看百姓网如何优化网速
panxiaoliang@baixing.com

2. 百姓网概况
国内领先分类信息网站
5000万动态请求/天
高峰1300次动态请求/秒
50台在线服务器
南北两个机房
30名员工
10名技术人员
2

3. 百姓网有多快？
* 来自北京时间2011年3月30日晚21:30 Alexa数据
3

4. 优化之路
先交学费
对网速优化的理解
前端优化
后端优化
网络优化
4

5. 先交学费：ETag
5

6. 第一次访问
GET /image/baixing.gif HTTP/1.1
HTTP/1.1 200 OK
ETag: "10c24bc-4ab-457e1c1f“
6

7. 第二次访问
GET /image/baixing.gif HTTP/1.1
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified
7

8. ETag是根据什么得出的？
Apache默认设置：inode-size-timestamp
inode-size-timestamp inode-size-timestamp
8

9. ETag去掉，流量减半
9

10. 补课
* 图书图片取自amazon.com
10

11. 页面渲染的过程
发送请求 等待响应 接收下载
11

12. 我们对于网速优化的划分
前端
秒级别
涉及请求数，CSS，JS，图片以及页面布局部分
后端
毫秒级别
涉及代码优化，执行效率
网络
毫秒级别
涉及机房选择，CDN等网络相关内容
12

13. 前端优化
13

14. 优化容易，持续优化难
14 图片取自： http://www.ytnpic.cn/bbs/viewthread.php?tid=33856&page=1

15. 持续优化要解决的问题
如何监控前端呈现速度？
如何收集最终用户的数据？
15

16. 如何前端监控？
Page
Load
Render DOM
Start Ready
16

17. JavaScript记录时间
<header>
<script type="text/javascript">
var start = new Date().getTime();
window.onload = function(){
var time = new Date().getTime() - start;
alert(time);
}
</script>
...
17

18. 如何统计真实用户数据？
Event Tracking
http://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.html
18

19. 用Google Analytics记录时间
<header>
<script type="text/javascript">
var start = new Date().getTime();
window.onload = function(){
var time = new Date().getTime() - start;
_gaq.push(['_trackEvent', 'RenderTime',
'ViewAd', '', time]);
}
</script>
19
...

20. 在Google Analytics上查看数据
20

21. 前端监控的一些发现
0.2s 下载HTML
0.5s Google Analytics统计
0.7s 页面加载
1.0s 新开页面
21

22. 后端优化
22

23. 用Cacti监控重要页面速度
23

24. 用xhprof来找到算法瓶颈
24 http://pecl.php.net/package/xhprof

25. 优化搜索和数据库的问题
查询压力的分布会随着业务变化而变化
真实环境的压力难以复制，追溯很难
25

26. 解决方案：在线记录慢查询
$dbSlowLogger = new SlowLogger();
$dbSlowLogger->start();
$this->result = mysql_query($this->sql,
$this->connection);
$ms = $dbSlowLogger->stop();
if ($ms > 499)
$dbSlowLogger->log('lib_db', $this-
>sql);
26

27. 用Cacti来显示慢查询
27

28. 让数据可见
28

29. 后端优化总结
寻找瓶颈所在
在线记录慢查询
可视化性能问题
29

30. 网络优化
30

31. 从CDN开始
静态CDN对静态内容优化非常有效
动态CDN对动态内容的优化有限
选个好机房才是根本
31

32. 如何选择一个好机房
要让网站用户帮我们来挑选
具体方法：监控从机房下载一张标准图片的时长
32

33. 如何获得标准图片的时长
var url = 'http://' + testHost +
'/test.jpg?' + Math.random();
document.getElementById('tsp').innerH
TML = '<img src="' + url + '"
onload="tsp()">';
function tsp() {
time = new Date().getTime() - start;
}
33

34. 百姓网的双机房方案
34

35. 双机房的问题
公网传输相当丌稳定
写代码的时候要注意读写权限
数据库更新后的cache的更新
日志数据需要合并分析
服务器的远程维护
35

36. 网络优化总结
选个好机房比什么都重要
如无必要，勿增机房
CDN是静态内容很好的解决方案
36

37. 我们的经验
前端：持续监控真实用户数据
后端：找出线上瓶颈所在
网络：选个好机房
37

38. Q&A
38