1 / 46

搜搜前端架构与优化

搜搜前端架构与优化. Moonzhang( 张勇 ) @ 2010-10-30. 内容提要. 腾讯搜搜简介 前端定义 架构的演变 前端演变与优化 发展与展望. 搜搜简介. 推广 直达区 搜索结果 新闻 BOX 搜索历史 广告 还在搜 其它. 直达区（ Bingo ）介绍. 搜索平台部 – WEB 开发组. union.soso.com. Open.soso.com. www.soso.com. i.soso.com. u.soso.com. Hao.qq.com. z.soso.com. SUSE Linux. 公司统一部署

sadie
Download Presentation

搜搜前端架构与优化

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. 搜搜简介

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

  5. 直达区（Bingo）介绍

  6. 搜索平台部 – WEB开发组 union.soso.com Open.soso.com www.soso.com i.soso.com u.soso.com Hao.qq.com z.soso.com

  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原则 Every millisecond count !!

  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 Fiddler - Microsoft ySlow – YAHOO! Pagetest - AOL

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

More Related