View
3.607
Download
0
Category
Preview:
DESCRIPTION
2010.30,在百度大厦成功举办了百度前端技术交流会。这是腾讯的张勇关于搜搜前端架构的分享。This is the frontend architecture of soso.
Citation preview
腾讯搜搜
搜搜前端架构与优化
•Moonzhang( 张勇 ) @ 2010-10-30
内容提要
腾讯搜搜简介 前端定义 架构的演变 前端演变与优化 发展与展望
搜搜简介
A. 推广B. 直达区C. 搜索结果D. 新闻 BOXE. 搜索历史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 、 Page 等模块
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
• 小组划分– 成立直达区 team (产品、开发、测试)
架构变更
心得体会• 用已掌握的技术解决问题 , 权衡稳定与激情 (twitter)
• 避免过度设计(摩尔定律 )
• 使用内存比使用磁盘来的爽的多– RAM is the new disk!
• 切分(水平、按功能)– 把工作负载分解成多个有能力驾驭的小单元,让每个单元都能
维持良好的性价比
问题与挑战(前台)
• 业务增长– 用户– bingo 数量– 数据越来越多,内存吃紧
• Bingo 越来越复杂,都要动起来• 团队合作成本高,编码规范缺失• 脚本管理混乱,复用性低,维护成本高• 代码冲突: bingo vs websearch
解决方案
• 制订代码合作规范 + 闭包
• 样式规划,区分公共样式和不同 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.4s -> 减少 5%-9% 的流量– Bing 慢 2s -> 收入下降 4.3 %– Baidu??
用户速度体验的 1-3-10原则
工 具
HTTPWATCH
Wireshark
FireBug
Yahoo Yslow
Google PageSpeed
Fiddler
…….
AOL Page Testonline version: http://webpagetest.org
‣ IBM Page Detailerhttp://www.alphaworks.ibm.com/tech/pagedetailer
‣ Pingdomhttp://tools.pingdom.com
‣ WebKit’s Web InspectorSafari 4 Beta or WebKit nightly from http://webkit.org
‣ Web Debugging Proxieshttp://charlesproxy.com, http://fiddlertool.com
Pagetest - AOL
Fiddler - Microsoft
ySlow – YAHOO!
参考书
–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% 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 )
Minify:CSS & JS
• 工具– YUICompressor– Google Closure Compiler– Google PageSpeed
• 去掉无用的样式
• 规划、优化 cookie
• 依然会节省,即使有 gzip
Minify html
• 去掉注释及空白符
• 省略特定标签闭合– li,p,br etc…– http://www.w3.org/TR/html4/sgml/dtd.html
• 去除 type=“text/javascript”, text/css etc..
• 去掉可去除的引号
• 使用短样式
优化图片
• 去掉额外的空白区域• 使用最优的文件格式
– 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
Cache
• 减少请求• 浏览器检查是否是最新的• 通过 HTTP头控制
– Expires: Sat, 1 Jan 2011 20:00:00 GMT– Cache-Control: max-age=31536000
• 设置过期时间为未来的某个时刻
Cache : 减少请求数
加速请求
• 无阻塞加载 JS
• 分段输出(搜索前、中、后)• 预加载(图片、样式、脚本,页面片)• 按需加载脚本• 指定图片尺寸,以免 reflow
• Browscap / js / 条件注释 /css hack
架构优化
心得体会
• 毫秒必争的心态
• 不是聪明就可以,要有基础组件支持
• 简单、务实
• 用户至上
• 用数据说话
• 有效利用工具
展望• 利用 HTML5 、 CSS3
– 替换图片
– LocalStorage,Offline Storage
• 探索和研发最适合自己的前端框架
• 精雕细琢地前端编码
• 持续优化
• 业界分享
谢 谢
Recommended