騰訊公司內(nèi)部ppt企劃方案;搜搜前端架構(gòu)與優(yōu)化

1、搜搜前端架構(gòu)與優(yōu)化內(nèi)容提要騰訊搜搜簡介前端定義架構(gòu)的演變前端演變與優(yōu)化發(fā)展與展望搜搜簡介推廣直達(dá)區(qū)搜索結(jié)果新聞BOX搜索歷史廣告還在搜其它.直達(dá)區(qū)（Bingo）介紹搜索平臺部 WEB開發(fā)組OH SUSE Linux公司統(tǒng)一部署容易維護(hù)統(tǒng)一的RPM資源區(qū)分WEB服務(wù)器與Cache服務(wù)器安全性MySQL流行 + 完善易用易維護(hù)M/SKW DBMemcached TTBDB/Redis/membase etc.P H P速度、速度、速度開發(fā)速度快學(xué)習(xí)成本低（C變種）運行效率好第三方庫成熟（PEAR, PECL）社區(qū)龐大而活躍日趨成熟（OOP, namespace，閉包）SuperPHP / WinP

2、HPPHP開發(fā)框架實現(xiàn)MVC模式，結(jié)構(gòu)清晰,使開發(fā)者只關(guān)注業(yè)務(wù)邏輯提供Auth、ACL、DB、ORM、Cache、Session、Util、Page等模塊Apache穩(wěn)定強(qiáng)大配置靈活mod_php5mod_rewriteMemcached用于存放緩存數(shù)據(jù)，供各APP使用穩(wěn)定配置簡單PHP擴(kuò)展：php_memcacheAPI : get,set,increment,decrement,delete高效分布式接入示意圖問題與挑戰(zhàn)用戶越來越多DNS不準(zhǔn)？用戶反映訪問速度慢解決辦法利用自有IP庫自建智能DNS搭建測速系統(tǒng)問題與挑戰(zhàn)單點故障轉(zhuǎn)移周期長？缺少監(jiān)控解決辦法增加HA增加監(jiān)控搜索請求處理示意圖問

3、題與挑戰(zhàn)響應(yīng)時間經(jīng)常超過1秒甚至2秒 (server端）Memcache timeout (1s)處理示意圖Memcache擴(kuò)展解決辦法使用socket+Memecache協(xié)議讀數(shù)據(jù)控制timeout在秒級以內(nèi)（50ms)處理示意圖Socket問題與挑戰(zhàn)Bingo應(yīng)用越來越多：天氣、股票、NBA。Bingo交互變復(fù)雜，既“美觀”又要“動”起來團(tuán)隊開始應(yīng)付不過來網(wǎng)頁版本迭代新的Bingo應(yīng)用處理示意圖Socket解決方案喊出敏捷口號業(yè)務(wù)拆分將網(wǎng)頁搜索與直達(dá)區(qū)拆分直達(dá)區(qū)作為獨立的業(yè)務(wù)架構(gòu)變更bingo作為獨立的服務(wù)網(wǎng)頁并行請求搜索結(jié)果與bingo數(shù)據(jù)控制timeout&latency小組劃分成立直

4、達(dá)區(qū)team（產(chǎn)品、開發(fā)、測試）架構(gòu)變更心得體會用已掌握的技術(shù)解決問題,權(quán)衡穩(wěn)定與激情(twitter)避免過度設(shè)計（摩爾定律)使用內(nèi)存比使用磁盤來的爽的多RAM is the new disk!切分（水平、按功能）把工作負(fù)載分解成多個有能力駕馭的小單元，讓每個單元都能維持良好的性價比問題與挑戰(zhàn)（前臺）業(yè)務(wù)增長用戶bingo數(shù)量數(shù)據(jù)越來越多，內(nèi)存吃緊Bingo越來越復(fù)雜，都要動起來團(tuán)隊合作成本高，編碼規(guī)范缺失腳本管理混亂，復(fù)用性低，維護(hù)成本高代碼沖突：bingo vs websearch解決方案制訂代碼合作規(guī)范+閉包樣式規(guī)劃，區(qū)分公共樣式和不同app樣式代碼規(guī)劃+重用選擇一個腳本類庫自行開發(fā)

5、PrototypejQueryYUIdojoExtQZFLSuperJS問題與挑戰(zhàn)前端展現(xiàn)時間過長HTML table嵌套JS混亂、堆砌各bingo app間CSS沖突、低效解決方案問題：HTML table嵌套解決辦法：優(yōu)化頁面結(jié)構(gòu)2009年進(jìn)行第一次頁面大重構(gòu)，歷時一個多月問題與挑戰(zhàn)網(wǎng)站頁面性能形勢嚴(yán)峻需要系統(tǒng)的進(jìn)行優(yōu)化一些數(shù)據(jù)：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模塊化拆分、合并動態(tài)載入壓縮數(shù)據(jù)量GZIP對文本進(jìn)行壓縮(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去掉無用的樣式規(guī)劃、優(yōu)化cookie依然會節(jié)省，即使有g(shù)zipMinify html去掉注釋及空白符省略特定標(biāo)簽閉合li,p,br etc去除 type=“text/javascript”, text/css etc.去掉可去除的引號使用短樣式優(yōu)化圖片去掉額外的空白區(qū)域使用最優(yōu)的文件格式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;經(jīng)優(yōu)化的PNG一般要比GIF要小使用Smush.itCache減少請求瀏覽器檢查是否是最新的通過HTTP頭控制Expires: Sat, 1 Jan 2011 20:00:00 GMTCache-Control: max-age=31536000設(shè)置過期時間為未來的某個時刻Cache : 減少請求數(shù)加速請求無阻塞加載JS分段輸出（搜索前、中、后）預(yù)加載（圖片、樣式、腳本，頁面片）按需加載腳本指定圖片尺寸，以免reflowBrowscap / js / 條