腾讯公司内部ppt企划方案;搜搜前端架构与优化

1、搜搜前端架构与优化内容提要腾讯搜搜简介前端定义架构的演变前端演变与优化发展与展望搜搜简介推广直达区搜索结果新闻BOX搜索历史广告还在搜其它.直达区（Bingo）介绍搜索平台部 WEB开发组OH SUSE Linux公司统一部署容易维护统一的RPM资源区分WEB服务器与Cache服务器安全性MySQL流行 + 完善易用易维护M/SKW DBMemcached TTBDB/Redis/membase etc.P H P速度、速度、速度开发速度快学习成本低（C变种）运行效率好第三方库成熟（PEAR, PECL）社区庞大而活跃日趋成熟（OOP, namespace，闭包）SuperPHP / WinP

2、HPPHP开发框架实现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搭建测速系统问题与挑战单点故障转移周期长？缺少监控解决办法增加HA增加监控搜索请求处理示意图问

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

4、达区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原则Every mil

6、lisecond count !工 具 HTTPWATCH Wireshark FireBug Yahoo Yslow Google PageSpeed Fiddler .AOL Page Testonline version: IBM Page Detailer Pingdom WebKits Web InspectorSafari 4 Beta or WebKit nightly from Web Debugging Proxies, Pagetest - AOLFiddler - Microsoft ySlow YAHOO!参考书High Performance Web sitesEva

7、n 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 % saving ) 3641 bytes, gzip compressed to 1775 bytes ( 51.2 %

8、saving ) 4756 bytes, gzip compressed to 2134 bytes ( 55.1 % saving )Minify:CSS & JS工具YUICompressorGoogle Closure CompilerGoogle PageSpeed去掉无用的样式规划、优化cookie依然会节省，即使有gzipMinify html去掉注释及空白符省略特定标签闭合li,p,br etc去除 type=“text/javascript”, text/css etc.去掉可去除的引号使用短样式优化图片去掉额外的空白区域使用最优的文件格式JPG, 60 quality - 3

9、2K 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 GMTCache-Control: max-age=31536000设置过期时间为未来的某个时刻Cache : 减少请求数加速请求无阻塞加载JS分段输出（搜索前、中、后）预加载（图片、样式、脚本，页面片）按需加载脚本指定图片尺寸，以免reflowBrowscap / js / 条