Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

张勇 搜搜前端架构

2,615 views

Published on

Published in: Technology
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

张勇 搜搜前端架构

  1. 1. 腾讯搜搜 搜搜前端架 与 化构 优 •Moonzhang( 勇张 ) @ 2010-10-30
  2. 2. 内容提要  搜搜 介腾讯 简  前端定义  架 的演构 变  前端演 与 化变 优  展与展望发
  3. 3. 搜搜 介简
  4. 4. A. 推广 B. 直 区达 C. 搜索 果结 D. 新闻 BOX E. 搜索 史历 F. 广告 G. 在搜还 H. 其它 ..
  5. 5. 直 区(达 Bingo )介绍
  6. 6. 搜索平台部 – WEB 开发组
  7. 7. SUSE Linux • 公司 一部署统 • 容易维护 – 一的统 RPM 源资 • 区分 WEB 服 器与务 Cache 服 器务 • 安全性
  8. 8. MySQL • 流行 + 完善 • 易用 • 易维护 • M/S
  9. 9. KW DB • Memcached • TT • BDB/Redis/membase etc..
  10. 10. P H P • 速度、速度、速度 – 速度快开发 – 学 成本低(习 C )变种 – 行效率好运 • 第三方 成熟(库 PEAR, PECL ) • 社区 大而活庞 跃 • 日 成熟(趋 OOP, namespace , 包…)闭
  11. 11. SuperPHP / WinPHP • PHP 框架开发 • 实现 MVC 模式, 清晰结构 , 使 者只 注开发 关 业务逻辑 • 提供 Auth 、 ACL 、 DB 、 ORM 、 Cache 、 Session 、 Util 、 Page 等模块
  12. 12. Apache • 定稳 • 强大 • 配置 活灵 • mod_php5 • mod_rewrite
  13. 13. Memcached • 用于存放 存数据,供各缓 APP 使用 • 定稳 • 配置简单 • PHP 展:扩 php_memcache – API : get,set,increment,decrement,delete… • 高效 • 分布式
  14. 14. 接入示意图
  15. 15. 与挑问题 战 • 用 越来越多户 • DNS 不准? • 用 反映 速度慢户 访问
  16. 16. 解决 法办 • 利用自有 IP 库 • 自建智能 DNS • 搭建 速系测 统
  17. 17. 与挑问题 战 • 点单 • 故障 移周期 ?转 长 • 缺少 控监
  18. 18. 解决 法办 • 增加 HA • 增加 控监
  19. 19. 搜索 求请
  20. 20. 与挑问题 战 • 响 常超应时间经 过 1 秒甚至 2 秒 (server 端 ) • Memcache timeout (1s) Memcache 扩展
  21. 21. 解决 法办 • 使用 socket+Memecache 数据协议读 • 控制 timeout 在秒 以内(级 50ms) Socket
  22. 22. 与挑问题 战 • Bingo 用越来越多:天气、股票、应 NBA 。。。 • Bingo 交互 ,既“美 ”又要“ ”起来变复杂 观 动 • 始 付不 来团队开 应 过 – 网页版本迭代 – 新的 Bingo 应用 Socket
  23. 23. 解决方案 • 喊出敏捷口号 • 拆分业务 – 将网页搜索与直达区拆分 – 直达区作为独立的业务 • 架 更构变 – bingo 作为独立的服务 – 网页并行请求搜索结果与 bingo 数据 – 控制 timeout&latency • 小 分组划 – 成立直达区 team (产品、开发、测试)
  24. 24. 架 更构变
  25. 25. 心得体会 • 用已掌握的技 解决术 问题 , 权衡 定与激情稳 (twitter) • 避免 度 (摩尔定律过 设计 ) • 使用内存比使用磁 来的爽的多盘 – RAM is the new disk! • 切分(水平、按功能) – 把工作负载分解成多个有能力驾驭的小单元,让每个单元都 能维持良好的性价比
  26. 26. 与挑 (前台)问题 战 • 增业务 长 – 用户 – bingo 数量 – 数据越来越多,内存吃紧 • Bingo 越来越 ,都要 起来复杂 动 • 合作成本高, 范缺失团队 编码规 • 脚本管理混乱, 用性低, 成本高复 维护 • 代 冲突:码 bingo vs websearch
  27. 27. 解决方案 • 制 代 合作 范订 码 规 + 包闭 • 式 ,区分公共 式和不同样 规划 样 app 式样 • 代码规划 + 重用
  28. 28. 一个脚本类选择 库 • 自行开发 • Prototype • jQuery • YUI • dojo • Ext • QZFL • SuperJS
  29. 29. 与挑问题 战 • 前端展现时间过长 – HTML table 嵌套 – JS 混乱、堆砌 – 各 bingo app 间 CSS 冲突、低效 – ……
  30. 30. 解决方案 • 问题: HTML table 嵌套 • 解决 法办 : 化 面优 页 结构 – 2009 年 行第一次 面大重 , 一个多月进 页 构 历时
  31. 31. 与挑问题 战 • 网站 面性能形 峻页 势严 – 需要系 的 行 化统 进 优 • 一些数据: – Amazon 慢 0.1 s -> 1% 用 放弃交易户 – Google 慢 0.4s -> 0.6% 放弃搜索 – Yahoo! 慢 0.4s -> 少减 5%-9% 的流量 – Bing 慢 2s -> 收入下降 4.3 % – Baidu??
  32. 32. 用 速度体 的户 验 1-3-10 原则
  33. 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. 34. 参考书 – High Performance Web sites – Evan faster web sites – And, learn from best practices..
  35. 35. 少 求减 请 • 合并 – CSS 合并 – sprites – Javascript • 模块化拆分、合并 • 动态载入
  36. 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. 37. Minify:CSS & JS • 工具 – YUICompressor – Google Closure Compiler – Google PageSpeed • 去掉无用的 式样 • 、 化规划 优 cookie • 依然会 省,即使有节 gzip
  38. 38. Minify html • 去掉注 及空白符释 • 省略特定 合标签闭 – li,p,br etc… – http://www.w3.org/TR/html4/sgml/dtd.html • 去除 type=“text/javascript”, text/css etc.. • 去掉可去除的引号 • 使用短 式样
  39. 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. 40. Cache • 少 求减 请 • 器 是否是最新的浏览 检查 • 通过 HTTP 控制头 – Expires: Sat, 1 Jan 2011 20:00:00 GMT – Cache-Control: max-age=31536000 • 置 期 未来的某个 刻设 过 时间为 时
  41. 41. Cache : 少 求数减 请
  42. 42. 加速 求请 • 无阻塞加载 JS • 分段 出(搜索前、中、后)输 • 加 ( 片、 式、脚本, 面片)预 载 图 样 页 • 按需加 脚本载 • 指定 片尺寸,以免图 reflow • Browscap / js / 条件注释 /css hack
  43. 43. 架 化构优
  44. 44. 心得体会 • 毫秒必争的心态 • 不是 明就可以,要有基 件支持聪 础组 • 、简单 务实 • 用 至上户 • 用数据说话 • 有效利用工具
  45. 45. 展望 • 利用 HTML5 、 CSS3 – 替换图片 – LocalStorage,Offline Storage • 探索和研 最适合自己的前端框架发 • 精雕 琢地前端细 编码 • 持 化续优 • 界分享业
  46. 46. 迎 的加入欢 您 • 搜索 , 互 网 最高的 用联 门槛 应 • 搜索,未来兵家必争之地 • 有更多的架 挑 、前端 等待解决还 构 战 问题 • 迎加入搜搜欢 WEB 技开发组 术团队
  47. 47. 谢 谢

×