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

腾讯搜搜搜搜前端架构与优化内容提要腾讯搜搜简介前端定义架构的演变前端演变与优化发展与展望搜搜简介A.推广B.直达区C.搜索结果D.新闻BOXE.搜索历史F.广告G.还在搜H.其它..直达区（Bingo）介绍搜索平台部–WEB开发组SUSELinux•公司统一部署•容易维护–统一的RPM资源•区分WEB服务器与Cache服务器•安全性MySQL•流行+完善•易用•易维护•M/SKWDB•Memcached•TT•BDB/Redis/membaseetc..PHP•速度、速度、速度–开发速度快–学习成本低（C变种）–运行效率好•第三方库成熟（PEAR,PECL）•社区庞大而活跃•日趋成熟（OOP,namespace，闭包…）SuperPHP/WinPHP•PHP开发框架•实现MVC模式，结构清晰,使开发者只关注业务逻辑•提供Auth、ACL、DB、ORM、Cache、Session、Util、Page等模块Apache•稳定•强大•配置灵活•mod_php5•mod_rewriteMemcached•用于存放缓存数据，供各APP使用•稳定•配置简单•PHP扩展：php_memcache–API: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&latency•小组划分–成立直达区team（产品、开发、测试）架构变更心得体会•用已掌握的技术解决问题,权衡稳定与激情(twitter)•避免过度设计（摩尔定律)•使用内存比使用磁盘来的爽的多–RAMisthenewdisk!•切分（水平、按功能）–把工作负载分解成多个有能力驾驭的小单元，让每个单元都能维持良好的性价比问题与挑战（前台）•业务增长–用户–bingo数量–数据越来越多，内存吃紧•Bingo越来越复杂，都要动起来•团队合作成本高，编码规范缺失•脚本管理混乱，复用性低，维护成本高•代码冲突：bingovswebsearch解决方案•制订代码合作规范+闭包•样式规划，区分公共样式和不同app样式•代码规划+重用选择一个脚本类库•自行开发•Prototype•jQuery•YUI•dojo•Ext•QZFL•SuperJS问题与挑战•前端展现时间过长–HTMLtable嵌套–JS混乱、堆砌–各bingoapp间CSS冲突、低效–……解决方案•问题：HTMLtable嵌套•解决办法：优化页面结构–2009年进行第一次页面大重构，历时一个多月问题与挑战•网站页面性能形势严峻–需要系统的进行优化•一些数据：–Amazon慢0.1s-1%用户放弃交易–Google慢0.4s-0.6%放弃搜索–Yahoo!慢0.4s-减少5%-9%的流量–Bing慢2s-收入下降4.3%–Baidu??用户速度体验的1-3-10原则Everymillisecondcount!!工具HTTPWATCHWiresharkFireBugYahooYslowGooglePageSpeedFiddler…….AOLPageTestonlineversion:‣IBMPageDetailer‣Pingdom‣WebKit’sWebInspectorSafari4BetaorWebKitnightlyfrom‣WebDebuggingProxies://fiddlertool.comPagetest-AOLFiddler-MicrosoftySlow–YAHOO!参考书–HighPerformanceWebsites–Evanfasterwebsites–And,learnfrombestpractices..减少请求•合并–CSS合并–sprites–Javascript•模块化拆分、合并•动态载入压缩数据量•GZIP–对文本进行压缩(html/css/jsetc)–对非文本不压缩(gif/png/jpegetc)•Apache:mod_gzip/mod_deflate•压缩比一般在50%－70%(58.2%saving)(51.2%saving)(55.1%saving)Minify:CSS&JS•工具–YUICompressor–GoogleClosureCompiler–GooglePageSpeed•去掉无用的样式•规划、优化cookie•依然会节省，即使有gzipMinifyhtml•去掉注释及空白符•省略特定标签闭合–li,p,bretc…–•去除type=“text/javascript”,text/cssetc..•去掉可去除的引号•使用短样式优化图片•去掉额外的空白区域•使用最优的文件格式–JPG,60quality-32K–PNG-8,256colors-37K–GIF,256colors-42K–PNG-24-146K•使用CSS代替图片-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;•经优化的PNG一般要比GIF要小•使用Smush.itCache•减少请求•浏览器检查是否是最新的•通过HTTP头控制–Expires:Sat,1Jan201120:00:00GMT–Cache-Control:max-age=31536000•设置过期时间为未来的某个时刻Cache:减少请求数加速请求•无阻塞加载JS•分段输出（搜索前、中、后）•预加载（图片、样式、脚本，页面片）•按需加载脚本•指定图片尺寸，以免reflow•Browscap/js/条件注释/csshack架构优化心得体会•毫秒必争的心态•不是聪明就可以，要有基础组件支持•简单、务实•用户至上•用数据说话•有效利用工具展望•利用HTML5、CSS3–替换图片–LocalStorage,OfflineStorage•探索和研发最适合自己的前端框架•精雕细琢地前端编码•持续优化•业界分享谢谢