张勇搜搜前端架构

搜搜前端架构与优化
Moonzhang( 张勇 ) @ 2010-10-30

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

搜搜简介

推广
直达区
搜索结果
新闻 BOX
搜索历史
广告
还在搜
其它 ..

直达区（ 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 Test online version: http://webpagetest.org ‣ IBM Page Detailer http://www.alphaworks.ibm.com/tech/pagedetailer ‣ Pingdom http://tools.pingdom.com ‣ WebKit’s Web Inspector Safari 4 Beta or WebKit nightly from http://webkit.org ‣ Web Debugging Proxies http://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
探索和研发最适合自己的前端框架
精雕细琢地前端编码
持续优化
业界分享

欢迎您的加入
搜索 , 互联网门槛最高的应用
搜索，未来兵家必争之地
还有更多的架构挑战、前端问题等待解决
欢迎加入搜搜 WEB 开发组技术团队

谢谢

http://rowez.com	13
http://localhost	3
http://static.slidesharecdn.com	2
http://rss.rowez.com	1

张勇搜搜前端架构

by isnull

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 19

Statistics