搜搜前端架構(gòu)與優(yōu)化

1、搜搜前端架構(gòu)與優(yōu)化,2010-10-30,內(nèi)容提要,騰訊搜搜簡介前端定義架構(gòu)的演變前端演變與優(yōu)化發(fā)展與展望,搜搜簡介,推廣直達(dá)區(qū)搜索結(jié)果新聞BOX搜索歷史廣告還在搜其它..,,,,,,,,,直達(dá)區(qū)（Bingo）介紹,搜索平臺(tái)部 – WEB開發(fā)組,SUSE Linux,公司統(tǒng)一部署容易維護(hù)統(tǒng)一的RPM資源區(qū)分WEB服務(wù)器與Cache服務(wù)器安全性,MySQL,流行 + 完善易用易維護(hù)M/S,K

2、W DB,Memcached TTBDB/Redis/membase etc..,P H P,速度、速度、速度開發(fā)速度快學(xué)習(xí)成本低（C變種）運(yùn)行效率好第三方庫成熟（PEAR, PECL）社區(qū)龐大而活躍日趨成熟（OOP, namespace，閉包…）,SuperPHP / WinPHP,PHP開發(fā)框架實(shí)現(xiàn)MVC模式，結(jié)構(gòu)清晰,使開發(fā)者只關(guān)注業(yè)務(wù)邏輯提供Auth、ACL、DB、ORM、Cache、Session、Util

3、、Page等模塊,Apache,穩(wěn)定強(qiáng)大配置靈活mod_php5mod_rewrite,Memcached,用于存放緩存數(shù)據(jù)，供各APP使用穩(wěn)定配置簡單PHP擴(kuò)展：php_memcacheAPI : get,set,increment,decrement,delete…高效分布式,接入示意圖,問題與挑戰(zhàn),用戶越來越多DNS不準(zhǔn)？用戶反映訪問速度慢,,解決辦法,利用自有IP庫自建智能DNS搭建測速系統(tǒng),

4、問題與挑戰(zhàn),單點(diǎn)故障轉(zhuǎn)移周期長？缺少監(jiān)控,解決辦法,增加HA增加監(jiān)控,搜索請(qǐng)求,,問題與挑戰(zhàn),響應(yīng)時(shí)間經(jīng)常超過1秒甚至2秒 (server端）Memcache timeout (1s),Memcache擴(kuò)展,,解決辦法,使用socket+Memecache協(xié)議讀數(shù)據(jù)控制timeout在秒級(jí)以內(nèi)（50ms),Socket,問題與挑戰(zhàn),Bingo應(yīng)用越來越多：天氣、股票、NBA。。。Bingo交互變復(fù)雜，既“美觀”又要“動(dòng)”起來

5、團(tuán)隊(duì)開始應(yīng)付不過來網(wǎng)頁版本迭代新的Bingo應(yīng)用,Socket,解決方案,喊出敏捷口號(hào)業(yè)務(wù)拆分將網(wǎng)頁搜索與直達(dá)區(qū)拆分直達(dá)區(qū)作為獨(dú)立的業(yè)務(wù)架構(gòu)變更bingo作為獨(dú)立的服務(wù)網(wǎng)頁并行請(qǐng)求搜索結(jié)果與bingo數(shù)據(jù)控制timeout&latency小組劃分成立直達(dá)區(qū)team（產(chǎn)品、開發(fā)、測試）,架構(gòu)變更,,,心得體會(huì),用已掌握的技術(shù)解決問題,權(quán)衡穩(wěn)定與激情(twitter)避免過度設(shè)計(jì)（摩爾定律)使用內(nèi)存比

6、使用磁盤來的爽的多RAM is the new disk!切分（水平、按功能）把工作負(fù)載分解成多個(gè)有能力駕馭的小單元，讓每個(gè)單元都能維持良好的性價(jià)比,問題與挑戰(zhàn)（前臺(tái)）,業(yè)務(wù)增長用戶bingo數(shù)量數(shù)據(jù)越來越多，內(nèi)存吃緊Bingo越來越復(fù)雜，都要?jiǎng)悠饋韴F(tuán)隊(duì)合作成本高，編碼規(guī)范缺失腳本管理混亂，復(fù)用性低，維護(hù)成本高代碼沖突：bingo vs websearch,解決方案,制訂代碼合作規(guī)范+閉包樣式規(guī)劃，區(qū)分公共樣式和

7、不同app樣式代碼規(guī)劃+重用,選擇一個(gè)腳本類庫,自行開發(fā) PrototypejQueryYUIdojoExtQZFLSuperJS,問題與挑戰(zhàn),前端展現(xiàn)時(shí)間過長HTML table嵌套JS混亂、堆砌各bingo app間CSS沖突、低效……,解決方案,問題：HTML table嵌套解決辦法：優(yōu)化頁面結(jié)構(gòu)2009年進(jìn)行第一次頁面大重構(gòu)，歷時(shí)一個(gè)多月,問題與挑戰(zhàn),網(wǎng)站頁面性能形勢嚴(yán)峻需要系統(tǒng)的進(jìn)行優(yōu)化一些

8、數(shù)據(jù)：Amazon 慢 0.1 s -> 1% 用戶放棄交易 Google 慢 0.4s -> 0.6% 放棄搜索Yahoo! 慢 0.4s -> 減少 5%-9% 的流量Bing 慢 2s -> 收入下降 4.3 %Baidu??,用戶速度體驗(yàn)的1-3-10原則,,工 具,,HTTPWATCH Wireshark FireBug Yahoo Yslow Google PageSpee

9、d Fiddler …….,AOL Page Testonline version: http://webpagetest.org? IBM Page Detailerhttp://www.alphaworks.ibm.com/tech/pagedetailer? Pingdomhttp://tools.pingdom.com? WebKit’s Web InspectorSafari 4 Beta or Web

10、Kit nightly from http://webkit.org? Web Debugging Proxieshttp://charlesproxy.com, http://fiddlertool.com,Pagetest - AOL,Fiddler - Microsoft,ySlow – YAHOO!,,參考書,High Performance Web sitesEvan faster web sitesAnd, lea

11、rn from best practices..,減少請(qǐng)求,合并CSS合并spritesJavascript模塊化拆分、合并動(dòng)態(tài)載入,壓縮數(shù)據(jù)量,GZIP對(duì)文本進(jìn)行壓縮(html/css/js etc)對(duì)非文本不壓縮(gif/png/jpeg etc)Apache: mod_gzip/mod_deflate壓縮比一般在50%－70%www.google.com 11697 bytes, gzip compressed

12、 to 4886 bytes ( 58.2 % saving )www.baidu.com 3641 bytes, gzip compressed to 1775 bytes ( 51.2 % saving )www.soso.com 4756 bytes, gzip compressed to 2134 bytes ( 55.1 % saving ),Minify:CSS & JS,工具YUICompressorGoo

13、gle Closure CompilerGoogle PageSpeed去掉無用的樣式規(guī)劃、優(yōu)化cookie依然會(huì)節(jié)省，即使有g(shù)zip,Minify html,去掉注釋及空白符省略特定標(biāo)簽閉合li,p,br etc…h(huán)ttp://www.w3.org/TR/html4/sgml/dtd.html去除 type=“text/javascript”, text/css etc..去掉可去除的引號(hào)使用短樣式,優(yōu)化圖片,去掉

14、額外的空白區(qū)域使用最優(yōu)的文件格式JPG, 60 quality - 32K 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.it,Cache,

15、減少請(qǐng)求瀏覽器檢查是否是最新的通過HTTP頭控制Expires: Sat, 1 Jan 2011 20:00:00 GMTCache-Control: max-age=31536000設(shè)置過期時(shí)間為未來的某個(gè)時(shí)刻,Cache : 減少請(qǐng)求數(shù),加速請(qǐng)求,無阻塞加載JS分段輸出（搜索前、中、后）預(yù)加載（圖片、樣式、腳本，頁面片）按需加載腳本指定圖片尺寸，以免reflowBrowscap / js / 條件注釋 /css