Your SlideShare is downloading. ×
  • Like
[Baidu web frontend_conference_2010]_[soso_frontend_architecture]
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

[Baidu web frontend_conference_2010]_[soso_frontend_architecture]

  • 3,556 views
Published

2010.30,在百度大厦成功举办了百度前端技术交流会。这是腾讯的张勇关于搜搜前端架构的分享。 …

2010.30,在百度大厦成功举办了百度前端技术交流会。这是腾讯的张勇关于搜搜前端架构的分享。
This is the frontend architecture of soso.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,556
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
109
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 直达区使用独立的服务器,作为网页前台的一个appserver,网页使用socket进行请求

Transcript

  • 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. 谢 谢