搜搜前端架构与优化

搜搜前端架构与优化,Moonzhang(张勇)2010-10-30,内容提要,腾讯搜搜简介前端定义架构的演变前端演变与优化发展与展望,搜搜简介,推广直达区搜索结果新闻BOX搜索历史广告还在搜其它.,直达区（Bingo）介绍,搜索平台部WEB开发组,O,H,SUSELinux,公司统一部署容易维护统一的RPM资源区分WEB服务器与Cache服务器安全性,MySQL,流行+完善易用易维护M/S,KWDB,MemcachedTTBDB/Redis/membaseetc.,PHP,速度、速度、速度开发速度快学习成本低（C变种）运行效率好第三方库成熟（PEAR,PECL）社区庞大而活跃日趋成熟（OOP,namespace，闭包）,SuperPHP/WinPHP,PHP开发框架实现MVC模式，结构清晰,使开发者只关注业务逻辑提供Auth、ACL、DB、ORM、Cache、Session、Util、Page等模块,Apache,稳定强大配置灵活mod_php5mod_rewrite,Memcached,用于存放缓存数据，供各APP使用稳定配置简单PHP扩展：php_memcacheAPI:get,set,increment,decrement,delete高效分布式,接入示意图,问题与挑战,用户越来越多DNS不准？用户反映访问速度慢,解决办法,利用自有IP库自建智能DNS搭建测速系统,问题与挑战,单点故障转移周期长？缺少监控,解决办法,增加HA增加监控,搜索请求,处理示意图,问题与挑战,响应时间经常超过1秒甚至2秒(server端）Memcachetimeout(1s),处理示意图,Memcache扩展,解决办法,使用socket+Memecache协议读数据控制timeout在秒级以内（50ms),处理示意图,Socket,问题与挑战,Bingo应用越来越多：天气、股票、NBA。Bingo交互变复杂，既“美观”又要“动”起来团队开始应付不过来网页版本迭代新的Bingo应用,处理示意图,Socket,解决方案,喊出敏捷口号业务拆分将网页搜索与直达区拆分直达区作为独立的业务架构变更bingo作为独立的服务网页并行请求搜索结果与bingo数据控制timeout-webkit-border-radius:4px;border-radius:4px;经优化的PNG一般要比GIF要小使用Smush.it,Cache,减少请求浏览器检查是否是最新的通过HTTP头控制Expires:Sat,1Jan201120:00:00GMTCache-Control:max-age=31536000设置过期时间为未来的某个时刻,Cache:减少请求数,加速请求,无阻塞加载JS分段输出（搜索前、中、后）预加载（图片、样式、脚本，页面片）按需加载脚本指定图片尺寸，以免reflowBrowscap/js/条件注释/csshack,架构优化,心得体会,毫秒必争的心态不是聪明就可以，要有基础组件支持简单、务实用户至上用数据说话有效利用工具,展望,利用HTML5、CSS3替换图片LocalStorage,OfflineStorage探索和研发最适合自己的前端框架精雕细琢地前端编码持续优化业界分享,欢迎您的加入,搜