手Q-Web極速優(yōu)化之路

1、 手手Q Web極速優(yōu)化之路極速優(yōu)化之路騰訊騰訊-SNG 張裕欽（張裕欽（Yukinzhang）個人經(jīng)歷個人經(jīng)歷 基本信息基本信息姓名：張裕欽學歷：碩士研究生騰訊移動終端開發(fā)高級工程師 騰訊工作經(jīng)歷：騰訊工作經(jīng)歷：2010加入騰訊，參加過群空間，WebQQ，Q+，QQ互聯(lián)SDK，Android手機QQ等項目 手手Q Web極速優(yōu)化之路極速優(yōu)化之路 AlloyKitAlloyKit- -AlloyMobileAlloyMobile為什么不用為什么不用HTML5HTML5標準？標準？ HTML5HTML5標準離線應用標準離線應用 優(yōu)點：現(xiàn)有HTML通用標準，易學易用，接入門檻較低 缺點： （1）每

2、個接入離線的業(yè)務都需要自己管理離線配置文件，管理更新邏輯 （2）http頭設置會導致manifest無法正常更新 （3）Manifest 中緩存文件一旦下載出錯，后續(xù)的文件將不再下載 （4）Manifest的回滾與下線困難 (5)只能基本文件更新,無法更進一步優(yōu)化 （6）結論：由于部分缺點比較致命，導致目前實際應用的項目并不多，結論：由于部分缺點比較致命，導致目前實際應用的項目并不多， 結合結合WebQQWebQQ項目經(jīng)驗，此方案不適合在手項目經(jīng)驗，此方案不適合在手Q Q上使用上使用直接打包是否更優(yōu)？直接打包是否更優(yōu)？ 直接打包到手直接打包到手Q Q里面里面 類似PhoneGap的解決方案，直

3、接打包到手Q里面，目前有些業(yè)務采用此方案。缺點：增大安裝包大小，沒有很好解決接入，發(fā)布，更新問題 那就自己實現(xiàn)那就自己實現(xiàn) 重新實現(xiàn)一套離線平臺面臨挑戰(zhàn)重新實現(xiàn)一套離線平臺面臨挑戰(zhàn) 1).跨多終端統(tǒng)一兼容 2).低成本接入 3).解決離線安全 4).支持接入多樣化發(fā)布 5).離線后的版本有效可控6).能夠有效節(jié)省流量手手Q Q離線平臺離線平臺 跨多終端統(tǒng)一兼容跨多終端統(tǒng)一兼容 采用分配業(yè)務id的方式代替舊版域名接入的方式接入離線平臺。 方法：業(yè)務方提出業(yè)務接入申請，管理后臺自動分配； 優(yōu)點：業(yè)務id對終端透明，每個業(yè)務在客戶端以業(yè)務id為目錄進行隔離， 方便升級、管理、安全校驗等，對于非Web

4、類的業(yè)務同樣適用，增強擴展性。手手Q Q離線平臺離線平臺 低成本接入低成本接入 終端接入，系統(tǒng)提供兩種接入方式： （1）直接在url上面加上參數(shù)：_bid=業(yè)務id即可 http:/ （2）后臺配置白名單的方式接入，無需任何改動 接入方式極其簡單，接入成本低接入方式極其簡單，接入成本低手手Q Q離線平臺離線平臺 離線安全離線安全（1 1）背景）背景 離線內(nèi)容存放到SD卡，存在被篡改的可能（2 2）安全方案）安全方案 采用簽名+文件md5校驗方式，保證離線內(nèi)容不被篡改。（3 3）方案可行性）方案可行性 安全性：非對稱加密(公/私鑰)保證簽名文件完整性，md5保證文件不被篡改 性能：校驗簽名文件約

5、30ms，校驗單個文件md5約10ms，在可接受范圍內(nèi)手手Q Q離線平臺離線平臺 安全提速安全提速建立首屏大文件緩存 手手Q Q離線平臺離線平臺 離線版本控制離線版本控制1 1）需要解決的幾大難題）需要解決的幾大難題 （1）發(fā)布回滾 如何解決100%回滾？ （2）第一次打開慢 （3）版本過期 HTTP Expires，客戶端離線尤為重要 （4）頻繁檢查更新帶來的流量損耗 2 2）能利用的手段）能利用的手段 Web,CGI，客戶端能力：登錄、push手手Q Q離線平臺離線平臺 離線版本控制解決方案離線版本控制解決方案Native+web兩位一體的解決方案：（1 1）發(fā)布回滾）發(fā)布回滾 CGI,

6、Web，手Q登錄、push，保證實時覆蓋100%（2 2）第一次打開慢）第一次打開慢 預加載 （3 3）版本過期）版本過期 根據(jù)發(fā)布頻率后臺可配；js控制 （4 4）頻繁檢查更新帶來的流量損耗）頻繁檢查更新帶來的流量損耗 JS+后臺可控檢查更新頻率限制手手Q Q離線平臺離線平臺 省流量升級：省流量升級：BsdiffBsdiff增量更新增量更新 (1) (1)方案對比方案對比 文件增量方案 和 bsdiff 增量方案9.24號 群部落 離線包 763.2 kb9.19號 群部落 離線包 762.4 kb影響 bsdiff 運算效果因素1、zip 包壓縮模式：標準壓縮、僅打包2、zip 包文件修改

7、時間，打包順序（減少額外信息）3、zip 包文件內(nèi)容，目前比較大影響的是 js 進行 uglify 壓縮后，變量名可能引起大幅變更手手Q Q離線平臺離線平臺 省流量升級：省流量升級：BsdiffBsdiff增量更新增量更新（2 2）針對）針對WebWeb優(yōu)化后的效果優(yōu)化后的效果 先把 zip 僅打包后，進行 bsdiff 計算，然后再將 zip 包進行標準壓縮，減少大小傳輸，客戶端接受到離線包后，進行一次解壓，可獲取 zip 離線包，再進行一次解壓，可獲取文件列表bsdiffbsdiff增量更新極大節(jié)省了用戶流量增量更新極大節(jié)省了用戶流量手手Q Q離線平臺離線平臺 多終端多版本兼容多終端多版本

8、兼容（1 1）背景）背景 多終端多系統(tǒng)版本差異問題，制約離線應用的展開。（2 2）解決方案）解決方案 后臺+前臺雙白名單配置的方法 前臺白名單：在離線加載前進行判斷，防止加載離線異常； 后臺白名單：對于不同機型進行差異化處理，對于無法使用離線的機型， 直接不下發(fā)更新，節(jié)省流量。手手Q Q離線平臺離線平臺 離線內(nèi)容管理系統(tǒng)離線內(nèi)容管理系統(tǒng)需要解決的不只是簡單的發(fā)布問題1 1）發(fā)布）發(fā)布打包工具、系統(tǒng)上傳、后臺api,無縫對接現(xiàn)有發(fā)布系統(tǒng) 2 2）灰度）灰度支持按QQ號碼、按手Q版本、離線版本等灰度發(fā)布3 3）檢測）檢測性能+安全檢測離線離線提速效果提速效果 性能提升性能提升 實現(xiàn)了頁面秒開，平均0.5s內(nèi)加載完離線離線成本優(yōu)化成本優(yōu)化 用戶成本節(jié)省用戶成本節(jié)省 9.24號 群部落 離線包 763.2 kb 9.19號 群部落 離線包 762.4 kb 平均一周更新一個版本 解壓后大?。?.4M，如果直接訪問寫內(nèi)容，按gzip壓縮率50%算， 用戶打開一次需要浪費流量700K，如果是增量更新，則下載整個包只需34.5KB， 節(jié)省了近95%流量，也就是說用戶一天內(nèi)/一周內(nèi) 訪問這個業(yè)務