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

1、搜搜前端架構(gòu)與優(yōu)化,Moonzhang(張勇) 2010-10-30,內(nèi)容提要,騰訊搜搜簡介 前端定義 架構(gòu)的演變 前端演變與優(yōu)化 發(fā)展與展望,搜搜簡介,推廣 直達(dá)區(qū) 搜索結(jié)果 新聞BOX 搜索歷史 廣告 還在搜 其它.,直達(dá)區(qū)（Bingo）介紹,搜索平臺部 WEB開發(fā)組,O,H,SUSE Linux,公司統(tǒng)一部署 容易維護(hù) 統(tǒng)一的RPM資源 區(qū)分WEB服務(wù)器與Cache服務(wù)器 安全性,MySQL,流行 + 完善 易用 易維護(hù) M/S,KW DB,Memcached TT BDB/Redis/membase etc.,P H P,速度、速度、速度 開發(fā)速度快 學(xué)習(xí)成本低（C變種） 運(yùn)行效率好

2、第三方庫成熟（PEAR, PECL） 社區(qū)龐大而活躍 日趨成熟（OOP, namespace，閉包）,SuperPHP / WinPHP,PHP開發(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_php5 mod_rewrite,Memcached,用于存放緩存數(shù)據(jù)，供各APP使用 穩(wěn)定 配置簡單 PHP擴(kuò)展：php_memcache API : get,set,increment,decrement,delete 高效 分布式,接入示意圖,問題與挑戰(zhàn),

3、用戶越來越多 DNS不準(zhǔn)？ 用戶反映訪問速度慢,解決辦法,利用自有IP庫 自建智能DNS 搭建測速系統(tǒng),問題與挑戰(zhàn),單點 故障轉(zhuǎn)移周期長？ 缺少監(jiān)控,解決辦法,增加HA 增加監(jiān)控,搜索請求,處理示意圖,問題與挑戰(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)頁版

4、本迭代 新的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 -webkit-border-radius: 4px; border-radius: 4px; 經(jīng)優(yōu)化的PNG一般要比GIF要小 使用Smush.it,Cache,減少請求 瀏覽器檢查是否是最新的 通過HTTP頭控制 Expires: Sat, 1 Jan 2011 20:00:00 GMT Cache-Control: max-age=31536000 設(shè)置過期時間為未來的某個時刻,Cache : 減少請求數(shù),加速請求,無阻塞加載JS 分段輸出（搜索前、中、后） 預(yù)加載（圖片、樣式、腳本，頁面片） 按需加載腳本 指定圖片尺寸，以免reflow Browscap / js / 條件注釋 /css hack,架構(gòu)優(yōu)化,心得體會,毫秒必爭的心態(tài) 不是聰明就可以，要有基礎(chǔ)組件支持 簡單、務(wù)實 用戶至上 用數(shù)據(jù)說話 有效利用工具,展望,利用HTML5、CSS3 替換圖片 LocalStorage,Offline Storage 探索和研發(fā)最適合自己的前端框架 精雕細(xì)琢地前端編碼 持續(xù)優(yōu)化 業(yè)界