百姓网如何优化网速-qcon2011

38
为速度而生 [email protected] ——看百姓网如何优化网速

Post on 13-Sep-2014

3.464 views

Category:

Technology


6 download

DESCRIPTION

 

TRANSCRIPT

Page 1: 百姓网如何优化网速-Qcon2011

为速度而生

[email protected]

——看百姓网如何优化网速

Page 2: 百姓网如何优化网速-Qcon2011

百姓网概况

国内领先分类信息网站

5000万动态请求/天

高峰1300次动态请求/秒

50台在线服务器

南北两个机房

30名员工

10名技术人员

2

Page 3: 百姓网如何优化网速-Qcon2011

百姓网有多快?

3* 来自北京时间2011年3月30日晚21:30 Alexa数据

Page 4: 百姓网如何优化网速-Qcon2011

优化之路

先交学费

对网速优化的理解

前端优化

后端优化

网络优化

4

Page 5: 百姓网如何优化网速-Qcon2011

先交学费:ETag

5

Page 6: 百姓网如何优化网速-Qcon2011

第一次访问

6

GET /image/baixing.gif HTTP/1.1

HTTP/1.1 200 OK

ETag: "10c24bc-4ab-457e1c1f“

Page 7: 百姓网如何优化网速-Qcon2011

第二次访问

7

GET /image/baixing.gif HTTP/1.1

If-None-Match: "10c24bc-4ab-457e1c1f"

HTTP/1.1 304 Not Modified

Page 8: 百姓网如何优化网速-Qcon2011

ETag是根据什么得出的?

Apache默认设置:inode-size-timestamp

8

inode-size-timestamp inode-size-timestamp

Page 9: 百姓网如何优化网速-Qcon2011

ETag去掉,流量减半

9

Page 10: 百姓网如何优化网速-Qcon2011

补课

10* 图书图片取自amazon.com

Page 11: 百姓网如何优化网速-Qcon2011

页面渲染的过程

11

发送请求 等待响应 接收下载

Page 12: 百姓网如何优化网速-Qcon2011

我们对于网速优化的划分

12

前端

秒级别

涉及请求数,CSS,JS,图片以及页面布局部分

后端

毫秒级别

涉及代码优化,执行效率

网络

毫秒级别

涉及机房选择,CDN等网络相关内容

Page 13: 百姓网如何优化网速-Qcon2011

前端优化

13

Page 14: 百姓网如何优化网速-Qcon2011

优化容易,持续优化难

14 图片取自: http://www.ytnpic.cn/bbs/viewthread.php?tid=33856&page=1

Page 15: 百姓网如何优化网速-Qcon2011

持续优化要解决的问题

如何监控前端呈现速度?

如何收集最终用户的数据?

15

Page 16: 百姓网如何优化网速-Qcon2011

如何前端监控?

16

Render Start

DOMReady

Page Load

Page 17: 百姓网如何优化网速-Qcon2011

JavaScript记录时间

<header>

<script type="text/javascript">

var start = new Date().getTime();

window.onload = function(){

var time = new Date().getTime() - start;

alert(time);

}

</script>

...17

Page 18: 百姓网如何优化网速-Qcon2011

如何统计真实用户数据?

Event Tracking

http://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.html

18

Page 19: 百姓网如何优化网速-Qcon2011

用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

Page 20: 百姓网如何优化网速-Qcon2011

在Google Analytics上查看数据

20

Page 21: 百姓网如何优化网速-Qcon2011

前端监控的一些发现

21

0.2s

0.5s

1.0s

0.7s

下载HTML

Google Analytics统计

页面加载

新开页面

Page 22: 百姓网如何优化网速-Qcon2011

后端优化

22

Page 23: 百姓网如何优化网速-Qcon2011

用Cacti监控重要页面速度

23

Page 24: 百姓网如何优化网速-Qcon2011

用xhprof来找到算法瓶颈

24 http://pecl.php.net/package/xhprof

Page 25: 百姓网如何优化网速-Qcon2011

优化搜索和数据库的问题

查询压力的分布会随着业务变化而变化

真实环境的压力难以复制,追溯很难

25

Page 26: 百姓网如何优化网速-Qcon2011

解决方案:在线记录慢查询

$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

Page 27: 百姓网如何优化网速-Qcon2011

用Cacti来显示慢查询

27

Page 28: 百姓网如何优化网速-Qcon2011

让数据可见

28

Page 29: 百姓网如何优化网速-Qcon2011

后端优化总结

寻找瓶颈所在

在线记录慢查询

可视化性能问题

29

Page 30: 百姓网如何优化网速-Qcon2011

网络优化

30

Page 31: 百姓网如何优化网速-Qcon2011

从CDN开始

静态CDN对静态内容优化非常有效

动态CDN对动态内容的优化有限

选个好机房才是根本

31

Page 32: 百姓网如何优化网速-Qcon2011

如何选择一个好机房

要让网站用户帮我们来挑选

具体方法:监控从机房下载一张标准图片的时长

32

Page 33: 百姓网如何优化网速-Qcon2011

如何获得标准图片的时长

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

Page 34: 百姓网如何优化网速-Qcon2011

百姓网的双机房方案

34

Page 35: 百姓网如何优化网速-Qcon2011

双机房的问题

公网传输相当丌稳定

写代码的时候要注意读写权限

数据库更新后的cache的更新

日志数据需要合并分析

服务器的远程维护

35

Page 36: 百姓网如何优化网速-Qcon2011

网络优化总结

选个好机房比什么都重要

如无必要,勿增机房

CDN是静态内容很好的解决方案

36

Page 37: 百姓网如何优化网速-Qcon2011

我们的经验

前端:持续监控真实用户数据

后端:找出线上瓶颈所在

网络:选个好机房

37

Page 38: 百姓网如何优化网速-Qcon2011

Q & A

38