腾讯搜搜

搜搜前端架构与优化

•Moonzhang( 张勇 ) @ 2010-10-30

内容提要

腾讯搜搜简介 前端定义 架构的演变 前端演变与优化 发展与展望

搜搜简介

A. 推广B. 直达区C. 搜索结果D. 新闻 BOXE. 搜索历史F. 广告G. 还在搜H. 其它 ..

直达区（ Bingo ）介绍

搜索平台部 – WEB 开发组

SUSE Linux

• 公司统一部署

• 容易维护– 统一的 RPM资源

• 区分 WEB 服务器与 Cache 服务器

• 安全性

MySQL

• 流行 + 完善

• 易用

• 易维护

• M/S

KW DB

• Memcached

• TT

• BDB/Redis/membase etc..

P H P

• 速度、速度、速度– 开发速度快– 学习成本低（ C 变种）– 运行效率好

• 第三方库成熟（ PEAR, PECL ）• 社区庞大而活跃• 日趋成熟（ OOP, namespace ，闭包…）

SuperPHP / WinPHP

• PHP 开发框架

• 实现 MVC 模式，结构清晰 , 使开发者只关注业务逻辑

• 提供Auth 、 ACL 、 DB 、 ORM 、 Cache 、 Session 、Util 、 Page 等模块

Apache

• 稳定

• 强大

• 配置灵活

• mod_php5

• mod_rewrite

Memcached

• 用于存放缓存数据，供各 APP 使用• 稳定• 配置简单• PHP 扩展： php_memcache

– API : get,set,increment,decrement,delete…

• 高效• 分布式

接入示意图

问题与挑战

• 用户越来越多• DNS 不准？• 用户反映访问速度慢

解决办法

• 利用自有 IP 库• 自建智能 DNS• 搭建测速系统

问题与挑战

• 单点• 故障转移周期长？• 缺少监控

解决办法

• 增加 HA

• 增加监控

搜索请求

问题与挑战

• 响应时间经常超过 1 秒甚至 2 秒 (server 端）• Memcache timeout (1s)

Memcache 扩展

解决办法

• 使用 socket+Memecache 协议读数据• 控制 timeout 在秒级以内（ 50ms)

Socket

问题与挑战

• Bingo 应用越来越多：天气、股票、 NBA 。。。• Bingo 交互变复杂，既“美观”又要“动”起来• 团队开始应付不过来

– 网页版本迭代– 新的 Bingo 应用

Socket

解决方案

• 喊出敏捷口号• 业务拆分

– 将网页搜索与直达区拆分– 直达区作为独立的业务

• 架构变更– bingo 作为独立的服务– 网页并行请求搜索结果与 bingo 数据– 控制 timeout&latency

• 小组划分– 成立直达区 team （产品、开发、测试）

架构变更

心得体会• 用已掌握的技术解决问题 , 权衡稳定与激情 (twitter)

• 避免过度设计（摩尔定律 )

• 使用内存比使用磁盘来的爽的多– RAM is the new disk!

• 切分（水平、按功能）– 把工作负载分解成多个有能力驾驭的小单元，让每个单元都能

维持良好的性价比

问题与挑战（前台）

• 业务增长– 用户– bingo 数量– 数据越来越多，内存吃紧

• Bingo 越来越复杂，都要动起来• 团队合作成本高，编码规范缺失• 脚本管理混乱，复用性低，维护成本高• 代码冲突： bingo vs websearch

解决方案

• 制订代码合作规范 + 闭包

• 样式规划，区分公共样式和不同 app样式

• 代码规划 + 重用

选择一个脚本类库

• 自行开发 • Prototype• jQuery• YUI• dojo• Ext• QZFL• SuperJS

问题与挑战

• 前端展现时间过长– HTML table嵌套– JS混乱、堆砌– 各 bingo app间 CSS冲突、低效– ……

解决方案

• 问题： HTML table嵌套

• 解决办法：优化页面结构– 2009年进行第一次页面大重构，历时一个多月

问题与挑战

• 网站页面性能形势严峻– 需要系统的进行优化

• 一些数据：– Amazon 慢 0.1 s -> 1% 用户放弃交易 – Google 慢 0.4s -> 0.6% 放弃搜索– Yahoo! 慢 0.4s -> 减少 5%-9% 的流量– Bing 慢 2s -> 收入下降 4.3 %– Baidu??

用户速度体验的 1-3-10原则

工 具

HTTPWATCH

Wireshark

FireBug

Yahoo Yslow

Google PageSpeed

Fiddler

…….

AOL Page Testonline version: http://webpagetest.org

‣ IBM Page Detailerhttp://www.alphaworks.ibm.com/tech/pagedetailer

‣ Pingdomhttp://tools.pingdom.com

‣ WebKit’s Web InspectorSafari 4 Beta or WebKit nightly from http://webkit.org

‣ Web Debugging Proxieshttp://charlesproxy.com, http://fiddlertool.com

Pagetest - AOL

Fiddler - Microsoft

ySlow – YAHOO!

参考书

–High Performance Web sites–Evan faster web sites–And, learn from best practices..

减少请求

• 合并– CSS合并– sprites– Javascript

• 模块化拆分、合并• 动态载入

压缩数据量

• GZIP– 对文本进行压缩 (html/css/js etc)– 对非文本不压缩 (gif/png/jpeg etc)

• Apache: mod_gzip/mod_deflate

• 压缩比一般在 50% － 70% www.google.com 11697 bytes, gzip compressed to 4886 bytes ( 58.2 %

saving ) www.baidu.com 3641 bytes, gzip compressed to 1775 bytes ( 51.2 %

saving ) www.soso.com 4756 bytes, gzip compressed to 2134 bytes ( 55.1 %

saving )

Minify:CSS & JS

• 工具– YUICompressor– Google Closure Compiler– Google PageSpeed

• 去掉无用的样式

• 规划、优化 cookie

• 依然会节省，即使有 gzip

Minify html

• 去掉注释及空白符

• 省略特定标签闭合– li,p,br etc…– http://www.w3.org/TR/html4/sgml/dtd.html

• 去除 type=“text/javascript”, text/css etc..

• 去掉可去除的引号

• 使用短样式

优化图片

• 去掉额外的空白区域• 使用最优的文件格式

– JPG, 60 quality - 32K – PNG-8, 256 colors - 37K – GIF, 256 colors - 42K – PNG-24 - 146K

• 使用 CSS 代替图片-moz-border-radius:4px;-webkit-border-radius: 4px;border-radius: 4px;

• 经优化的 PNG 一般要比 GIF 要小• 使用 Smush.it

Cache

• 减少请求• 浏览器检查是否是最新的• 通过 HTTP头控制

– Expires: Sat, 1 Jan 2011 20:00:00 GMT– Cache-Control: max-age=31536000

• 设置过期时间为未来的某个时刻

Cache : 减少请求数

加速请求

• 无阻塞加载 JS

• 分段输出（搜索前、中、后）• 预加载（图片、样式、脚本，页面片）• 按需加载脚本• 指定图片尺寸，以免 reflow

• Browscap / js / 条件注释 /css hack

架构优化

心得体会

• 毫秒必争的心态

• 不是聪明就可以，要有基础组件支持

• 简单、务实

• 用户至上

• 用数据说话

• 有效利用工具

展望• 利用 HTML5 、 CSS3

– 替换图片

– LocalStorage,Offline Storage

• 探索和研发最适合自己的前端框架

• 精雕细琢地前端编码

• 持续优化

• 业界分享

谢 谢