为速度而生——百姓网如何优化网速_潘晓良.docxVIP

为速度而生 ——看百姓网如何优化网速 panxiaoliang@ 百姓网概况 国内领先分类信息网站5000万动态请求/天 高峰1300次动态请求/秒50台在线服务器 南北两个机房 30名员工 10名技术人员 2 百姓网有多快？ * 来自北京时间2011年3月30日晚21:30 Alexa数据 3 优化之路 先交学费 对网速优化的理解 前端优化 后端优化 网络优化 4 先交学费：ETag 5 第一次访问 GET /image/baixing.gif HTTP/1.1 HTTP/1.1 200 OK ETag: 10c24bc-4ab-457e1c1f“ 6 第二次访问 GET /image/baixing.gif HTTP/1.1 If-None-Match: 10c24bc-4ab-457e1c1f HTTP/1.1 304 Not Modified 7 ETag是根据什么得出的？ Apache默认设置：inode-size-timestamp inode-size-timestamp inode-size-timestamp 8 ETag去掉，流量减半 9 补课 10 * 图书图片取自 页面渲染的过程 发送请求 等待响应 接收下载 11 我们对于网速优化的划分 前端 秒级别 涉及请求数，CSS，JS，图片以及页面布局部分 后端 毫秒级别 涉及代码优化，执行效率 网络 毫秒级别 涉及机房选择，CDN等网络相关内容 12 前端优化 13 优化容易，持续优化难 14 图片取自： /bbs/viewthread.php?tid=33856page=1 持续优化要解决的问题 如何监控前端呈现速度？ 如何收集最终用户的数据？ 15 如何前端监控？ Page Load Render DOM Start Ready 16 JavaScript记录时间 header script type=text/javascript var start = new Date().getTime(); window.onload = function(){ var time = new Date().getTime() - start; alert(time); } /script ... 17 如何统计真实用户数据？ Event Tracking /apis/analytics/docs/tracking/eventTrackerGuide.html 18 用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 ... 在Google Analytics上查看数据 20 前端监控的一些发现 0.2s 下载HTML 0.5s Google Analytics统计 0.7s 1.0s  页面加载 新开页面 21 后端优化 22 用Cacti监控重要页面速度 23 用xhprof来找到算法瓶颈 /package/xhprof 优化搜索和数据库的问题 查询压力的分布会随着业务变化而变化 真实环境的压力难以复制，追溯很难 25 解决方案：在线记录慢查询 $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 用Cacti来显示慢查询 27 让数据可见 28 后端优化总结 寻找瓶颈所在 在线记录慢查询 可视化性能问题 29 网络优化 30 从CDN开始 静态CDN对静态内容优化非常有效 动态CDN对动态内容的优化有限 选个好机房才是根本 31 如何选择一个好机房 要让网站用户帮我们来挑选 具体方法：监控从机房下载一张标准图片的时长 32 如何获得标准图片的时长 var url = http:// + testHost + /test.jpg? + Math.random(); document.getElementById(tsp).innerH TML = img src= + ur