搜搜前端架构与优化.ppt

《搜搜前端架构与优化.ppt》由会员分享，可在线阅读，更多相关《搜搜前端架构与优化.ppt（47页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、腾讯搜搜搜搜前端架构与优化Moonzhang(张勇)2010-10-30 内容提要n腾讯搜搜简介n前端定义n架构的演变n前端演变与优化n发展与展望搜搜简介A.推广B.直达区C.搜索结果D.新闻BOXE.搜索历史F.广告G.还在搜H.其它.直达区（Bingo）介绍搜索平台部 WEB开发组SUSE Linux公司统一部署容易维护统一的RPM资源区分WEB服务器与Cache服务器安全性MySQL流行+完善易用易维护M/SKW DBMemcached TTBDB/Redis/membase etc.P H P速度、速度、速度开发速度快学习成本低（C变种）运行效率好第三方库成熟（PEAR,PECL）社区

2、庞大而活跃日趋成熟（OOP,namespace，闭包）SuperPHP/WinPHPPHP开发框架实现MVC模式，结构清晰,使开发者只关注业务逻辑提供Auth、ACL、DB、ORM、Cache、Session、Util、Page等模块Apache稳定强大配置灵活mod_php5mod_rewriteMemcached用于存放缓存数据，供各APP使用稳定配置简单PHP扩展：php_memcacheAPI:get,set,increment,decrement,delete高效分布式接入示意图问题与挑战用户越来越多DNS不准？用户反映访问速度慢解决办法利用自有IP库自建智能DNS搭建测速系统问题与

3、挑战单点故障转移周期长？缺少监控解决办法增加HA增加监控搜索请求问题与挑战响应时间经常超过1秒甚至2秒(server端）Memcache timeout(1s)Memcache扩展解决办法使用socket+Memecache协议读数据控制timeout在秒级以内（50ms)Socket问题与挑战Bingo应用越来越多：天气、股票、NBA。Bingo交互变复杂，既“美观”又要“动”起来团队开始应付不过来网页版本迭代新的Bingo应用Socket解决方案喊出敏捷口号业务拆分将网页搜索与直达区拆分直达区作为独立的业务架构变更bingo作为独立的服务网页并行并行请求搜索结果与bingo数据控制time

4、out&latency小组划分成立直达区team（产品、开发、测试）架构变更心得体会用已掌握的技术解决问题,权衡稳定与激情(twitter)避免过度设计（摩尔定律)使用内存比使用磁盘来的爽的多RAM is the new disk!切分（水平、按功能）把工作负载分解成多个有能力驾驭的小单元，让每个单元都能维持良好的性价比问题与挑战（前台）业务增长用户bingo数量数据越来越多，内存吃紧Bingo越来越复杂，都要动起来团队合作成本高，编码规范缺失脚本管理混乱，复用性低，维护成本高代码冲突：bingo vs websearch解决方案制订代码合作规范+闭包样式规划，区分公共样式和不同app样式代码

5、规划+重用选择一个脚本类库自行开发 PrototypejQueryYUIdojoExtQZFLSuperJS问题与挑战前端展现时间过长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原则Ever

6、y millisecond count!工 具u HTTPWATCH u Wiresharku FireBugu Yahoo Yslowu Google PageSpeedu Fiddleru.AOL Page Testonline version:http:/webpagetest.org IBM Page Detailerhttp:/ Pingdomhttp:/ WebKits Web InspectorSafari 4 Beta or WebKit nightly from http:/webkit.org Web Debugging Proxieshttp:/,http:/Pagete

7、st-AOLFiddler-Microsoft ySlow YAHOO!参考书High Performance Web sitesEvan faster web sitesAnd,learn from best practices.减少请求合并CSS合并spritesJavascript模块化拆分、合并动态载入压缩数据量GZIP对文本进行压缩(html/css/js etc)对非文本不压缩(gif/png/jpeg etc)Apache:mod_gzip/mod_deflate压缩比一般在50%70% 11697 bytes,gzip compressed to 4886 bytes(58.2

8、%saving) 3641 bytes,gzip compressed to 1775 bytes(51.2%saving) 4756 bytes,gzip compressed to 2134 bytes(55.1%saving)Minify:CSS&JS工具YUICompressorGoogle Closure CompilerGoogle PageSpeed去掉无用的样式规划、优化cookie依然会节省，即使有gzipMinify html去掉注释及空白符省略特定标签闭合li,p,br etchttp:/www.w3.org/TR/html4/sgml/dtd.html去除 type=“

9、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.itCache减少请求浏览器检查是否是最新的通过HTTP头控制Expires:Sat,1 Jan 2011 20:00:00 G

10、MTCache-Control:max-age=31536000设置过期时间为未来的某个时刻Cache:减少请求数加速请求无阻塞加载JS分段输出（搜索前、中、后）预加载（图片、样式、脚本，页面片）按需加载脚本指定图片尺寸，以免reflowBrowscap/js/条件注释/css hack架构优化心得体会毫秒必争的心态不是聪明就可以，要有基础组件支持简单、务实用户至上用数据说话有效利用工具展望利用HTML5、CSS3替换图片LocalStorage,Offline Storage探索和研发最适合自己的前端框架精雕细琢地前端编码持续优化业界分享欢迎您的加入搜索,互联网门槛最高的应用搜索，未来兵家必争之地还有更多的架构挑战、前端问题等待解决欢迎加入搜搜WEB开发组技术团队谢 谢