百度前端技术交流会--搜搜前端架构演变与优化

1. 腾讯搜搜
搜搜前端架 与 化构 优
•Moonzhang( 勇张 ) @ 2010-10-30

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

3. 搜搜 介简

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

5. 直 区（达 Bingo ）介绍

6. 搜索平台部 – WEB 开发组

7. SUSE Linux
• 公司 一部署统
• 容易维护
– 一的统 RPM 源资
• 区分 WEB 服 器与务 Cache 服 器务
• 安全性

8. MySQL
• 流行 + 完善
• 易用
• 易维护
• M/S

9. KW DB
• Memcached
• TT
• BDB/Redis/membase etc..

10. P H P
• 速度、速度、速度
– 速度快开发
– 学 成本低（习 C ）变种
– 行效率好运
• 第三方 成熟（库 PEAR, PECL ）
• 社区 大而活庞 跃
• 日 成熟（趋 OOP, namespace ， 包…）闭

11. SuperPHP / WinPHP
• PHP 框架开发
• 实现 MVC 模式， 清晰结构 , 使 者只 注开发 关 业务逻辑
• 提供
Auth 、 ACL 、 DB 、 ORM 、 Cache 、 Session 、
Util 、 Page 等模块

12. Apache
• 定稳
• 强大
• 配置 活灵
• mod_php5
• mod_rewrite

13. Memcached
• 用于存放 存数据，供各缓 APP 使用
• 定稳
• 配置简单
• PHP 展：扩 php_memcache
– API : get,set,increment,decrement,delete…
• 高效
• 分布式

14. 接入示意图

15. 与挑问题 战
• 用 越来越多户
• DNS 不准？
• 用 反映 速度慢户 访问

16. 解决 法办
• 利用自有 IP 库
• 自建智能 DNS
• 搭建 速系测 统

17. 与挑问题 战
• 点单
• 故障 移周期 ？转 长
• 缺少 控监

18. 解决 法办
• 增加 HA
• 增加 控监

19. 搜索 求请

20. 与挑问题 战
• 响 常超应时间经 过 1 秒甚至 2 秒 (server 端
）
• Memcache timeout (1s)
Memcache 扩展

21. 解决 法办
• 使用 socket+Memecache 数据协议读
• 控制 timeout 在秒 以内（级 50ms)
Socket

22. 与挑问题 战
• Bingo 用越来越多：天气、股票、应 NBA 。。。
• Bingo 交互 ，既“美 ”又要“ ”起来变复杂 观 动
• 始 付不 来团队开 应 过
– 网页版本迭代
– 新的 Bingo 应用
Socket

23. 解决方案
• 喊出敏捷口号
• 拆分业务
– 将网页搜索与直达区拆分
– 直达区作为独立的业务
• 架 更构变
– bingo 作为独立的服务
– 网页并行请求搜索结果与 bingo 数据
– 控制 timeout&latency
• 小 分组划
– 成立直达区 team （产品、开发、测试）

24. 架 更构变

25. 心得体会
• 用已掌握的技 解决术 问题 , 权衡 定与激情稳 (twitter)
• 避免 度 （摩尔定律过 设计 )
• 使用内存比使用磁 来的爽的多盘
– RAM is the new disk!
• 切分（水平、按功能）
– 把工作负载分解成多个有能力驾驭的小单元，让每个单元都
能维持良好的性价比

26. 与挑 （前台）问题 战
• 增业务 长
– 用户
– bingo 数量
– 数据越来越多，内存吃紧
• Bingo 越来越 ，都要 起来复杂 动
• 合作成本高， 范缺失团队 编码规
• 脚本管理混乱， 用性低， 成本高复 维护
• 代 冲突：码 bingo vs websearch

27. 解决方案
• 制 代 合作 范订 码 规 + 包闭
• 式 ，区分公共 式和不同样 规划 样 app 式样
• 代码规划 + 重用

28. 一个脚本类选择 库
• 自行开发
• Prototype
• jQuery
• YUI
• dojo
• Ext
• QZFL
• SuperJS

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

30. 解决方案
• 问题： HTML table 嵌套
• 解决 法办 ： 化 面优 页 结构
– 2009 年 行第一次 面大重 ， 一个多月进 页 构 历时

31. 与挑问题 战
• 网站 面性能形 峻页 势严
– 需要系 的 行 化统 进 优
• 一些数据：
– Amazon 慢 0.1 s -> 1% 用 放弃交易户
– Google 慢 0.4s -> 0.6% 放弃搜索
– Yahoo! 慢 0.4s -> 少减 5%-9% 的流量
– Bing 慢 2s -> 收入下降 4.3 %
– Baidu??

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

33. 工 具
 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!

34. 参考书
– High Performance Web sites
– Evan faster web sites
– And, learn from best practices..

35. 少 求减 请
• 合并
– CSS 合并
– sprites
– Javascript
• 模块化拆分、合并
• 动态载入

36. 数据量压缩
• 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 )

37. Minify:CSS & JS
• 工具
– YUICompressor
– Google Closure Compiler
– Google PageSpeed
• 去掉无用的 式样
• 、 化规划 优 cookie
• 依然会 省，即使有节 gzip

38. Minify html
• 去掉注 及空白符释
• 省略特定 合标签闭
– li,p,br etc…
– http://www.w3.org/TR/html4/sgml/dtd.html
• 去除 type=“text/javascript”, text/css etc..
• 去掉可去除的引号
• 使用短 式样

39. 化 片优 图
• 去掉 外的空白区域额
• 使用最 的文件格式优
– 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

40. Cache
• 少 求减 请
• 器 是否是最新的浏览 检查
• 通过 HTTP 控制头
– Expires: Sat, 1 Jan 2011 20:00:00 GMT
– Cache-Control: max-age=31536000
• 置 期 未来的某个 刻设 过 时间为 时

41. Cache : 少 求数减 请

42. 加速 求请
• 无阻塞加载 JS
• 分段 出（搜索前、中、后）输
• 加 （ 片、 式、脚本， 面片）预 载 图 样 页
• 按需加 脚本载
• 指定 片尺寸，以免图 reflow
• Browscap / js / 条件注释 /css hack

43. 架 化构优

44. 心得体会
• 毫秒必争的心态
• 不是 明就可以，要有基 件支持聪 础组
• 、简单 务实
• 用 至上户
• 用数据说话
• 有效利用工具

45. 展望
• 利用 HTML5 、 CSS3
– 替换图片
– LocalStorage,Offline Storage
• 探索和研 最适合自己的前端框架发
• 精雕 琢地前端细 编码
• 持 化续优
• 界分享业

46. 谢 谢