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

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

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

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

4、達區(qū)team（產品、開發(fā)、測試）架構變更心得體會用已掌握的技術解決問題,權衡穩(wěn)定與激情(twitter)避免過度設計（摩爾定律)使用內存比使用磁盤來的爽的多RAM is the new disk!切分（水平、按功能）把工作負載分解成多個有能力駕馭的小單元，讓每個單元都能維持良好的性價比問題與挑戰(zhàn)（前臺）業(yè)務增長用戶bingo數(shù)量數(shù)據越來越多，內存吃緊Bingo越來越復雜，都要動起來團隊合作成本高，編碼規(guī)范缺失腳本管理混亂，復用性低，維護成本高代碼沖突：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)化頁面結構2009年進行第一次頁面大重構，歷時一個多月問題與挑戰(zhàn)網站頁面性能形勢嚴峻需要系統(tǒng)的進行優(yōu)化一些數(shù)據：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ù)據量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去掉無用的樣式規(guī)劃、優(yōu)化cookie依然會節(jié)省，即使有gzipMinify html去掉注釋及空白符省略特定標簽閉合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;經優(yōu)化的PNG一般要比GIF要小使用Smush.itCache減少請求瀏覽器檢查是否是最新的通過HTTP頭控制Expires: Sat, 1 Jan 2011 20:00:00 GMTCache-Control: max-age=31536000設置過期時間為未來的某個時刻Cache : 減少請求數(shù)加速請求無阻塞加載JS分段輸出（搜索前、中、后）預加載（圖片、樣式、腳本，頁面片）按需加載腳本指定圖片尺寸，以免reflowBrowscap / js / 條