Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
腾讯搜搜
搜搜前端架 与 化构 优
•Moonzhang( 勇张 ) @ 2010-10-30
内容提要
 搜搜 介腾讯 简
 前端定义
 架 的演构 变
 前端演 与 化变 优
 展与展望发
搜搜 介简
A. 推广
B. 直 区达
C. 搜索 果结
D. 新闻 BOX
E. 搜索 史历
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 、 Pag...
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
• 小 分组...
架 更构变
心得体会
• 用已掌握的技 解决术 问题 , 权衡 定与激情稳 (twitter)
• 避免 度 (摩尔定律过 设计 )
• 使用内存比使用磁 来的爽的多盘
– RAM is the new disk!
• 切分(水平、按功能)
– 把工作负载...
与挑 (前台)问题 战
• 增业务 长
– 用户
– bingo 数量
– 数据越来越多,内存吃紧
• Bingo 越来越 ,都要 起来复杂 动
• 合作成本高, 范缺失团队 编码规
• 脚本管理混乱, 用性低, 成本高复 维护
• 代 冲突:...
解决方案
• 制 代 合作 范订 码 规 + 包闭
• 式 ,区分公共 式和不同样 规划 样 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.4...
用 速度体 的户 验 1-3-10 原则
工 具
 HTTPWATCH
 Wireshark
 FireBug
 Yahoo Yslow
 Google PageSpeed
 Fiddler
 …….
AOL Page Test
online version: http:...
参考书
– 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...
Minify:CSS & JS
• 工具
– YUICompressor
– Google Closure Compiler
– Google PageSpeed
• 去掉无用的 式样
• 、 化规划 优 cookie
• 依然会 省,即使有节...
Minify html
• 去掉注 及空白符释
• 省略特定 合标签闭
– li,p,br etc…
– http://www.w3.org/TR/html4/sgml/dtd.html
• 去除 type=“text/javascript”,...
化 片优 图
• 去掉 外的空白区域额
• 使用最 的文件格式优
– JPG, 60 quality - 32K
– PNG-8, 256 colors - 37K
– GIF, 256 colors - 42K
– PNG-24 - 146K...
Cache
• 少 求减 请
• 器 是否是最新的浏览 检查
• 通过 HTTP 控制头
– Expires: Sat, 1 Jan 2011 20:00:00 GMT
– Cache-Control: max-age=31536000
• 置...
Cache : 少 求数减 请
加速 求请
• 无阻塞加载 JS
• 分段 出(搜索前、中、后)输
• 加 ( 片、 式、脚本, 面片)预 载 图 样 页
• 按需加 脚本载
• 指定 片尺寸,以免图 reflow
• Browscap / js / 条件注释 /css ha...
架 化构优
心得体会
• 毫秒必争的心态
• 不是 明就可以,要有基 件支持聪 础组
• 、简单 务实
• 用 至上户
• 用数据说话
• 有效利用工具
展望
• 利用 HTML5 、 CSS3
– 替换图片
– LocalStorage,Offline Storage
• 探索和研 最适合自己的前端框架发
• 精雕 琢地前端细 编码
• 持 化续优
• 界分享业
迎 的加入欢 您
• 搜索 , 互 网 最高的 用联 门槛 应
• 搜索,未来兵家必争之地
• 有更多的架 挑 、前端 等待解决还 构 战 问题
• 迎加入搜搜欢 WEB 技开发组 术团队
谢 谢
Prochain SlideShare
Chargement dans…5
×

张勇 搜搜前端架构

2 618 vues

Publié le

Publié dans : Technologie

张勇 搜搜前端架构

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

×