如何進行多終端Web前端優(yōu)化

如何進行多終端Web前端優(yōu)化

QQ互聯(lián)中的優(yōu)化經(jīng)驗分享騰訊高級工程師任旻第一頁，共四十四頁。為什么要對QQ互聯(lián)進行性能優(yōu)化？QQ互聯(lián)優(yōu)化實踐Web與客戶端本地應(yīng)用的綜合優(yōu)化Web前端優(yōu)化中的平衡和取舍利用Webkit的新特性，突破傳統(tǒng)優(yōu)化手段嘗試新技術(shù)，利用云平臺提速目錄第二頁，共四十四頁。QQ互聯(lián)是騰訊公司通過開放QQ賬戶體系，幫助第三方網(wǎng)站、媒體、終端進行社會化營銷推廣的開放平臺，主要包括QQ登錄、分享等社交組件及OpenAPI等功能。/

什么是QQ互聯(lián)？第三頁，共四十四頁。QQ互聯(lián)是騰訊公司通過開放QQ賬戶體系，幫助第三方網(wǎng)站、媒體、終端進行社會化營銷推廣的開放平臺，主要包括QQ登錄、分享等社交組件及OpenAPI等功能。QQ帳號登錄的認知度更高，且便于記憶什么是QQ互聯(lián)？第四頁，共四十四頁。QQ互聯(lián)是騰訊公司通過開放QQ賬戶體系，幫助第三方網(wǎng)站、媒體、終端進行社會化營銷推廣的開放平臺，主要包括QQ登錄、分享等社交組件及OpenAPI等功能。強關(guān)系社交平臺的分享API：QQ好友、群、QQ空間、騰訊微博什么是QQ互聯(lián)？第五頁，共四十四頁。QQ帳號登錄的認知度更高，且便于記憶強關(guān)系社交平臺的分享API：QQ好友、群、QQ空間、騰訊微博龐大的QQ在線用戶群體：手機QQ日活躍用戶4億QQ互聯(lián)的優(yōu)勢第六頁，共四十四頁。為什么性能對QQ互聯(lián)如此重要？影響用戶操作的成功率和轉(zhuǎn)化率轉(zhuǎn)化率降低是對合作伙伴的傷害：搜狐微博客戶端：每天新增注冊用戶中，QQ用戶登錄超過40%“唱吧”有超過50%的用戶都來自QQ帳號登錄美圖秀秀：每天分享至不同社交平臺的照片總數(shù)中，分享到QQ空間的照片占94%第七頁，共四十四頁。使用QQ帳號登錄PC手機是否安裝手機QQHTML5頁面SSOAndroid4.0以上1.3以下QQ互聯(lián)的性能優(yōu)化難點多種設(shè)備多種操作系統(tǒng)多種登錄方法多個android的版本成本？第八頁，共四十四頁。為什么要對QQ互聯(lián)進行性能優(yōu)化？QQ互聯(lián)優(yōu)化實踐目錄第九頁，共四十四頁。前端優(yōu)化≠優(yōu)化前端登錄和SSOWeb與Mobile本地應(yīng)用的綜合優(yōu)化定向分享Web前端優(yōu)化中的平衡和取舍QQ查找利用Webkit的新特性，突破傳統(tǒng)優(yōu)化手段后臺綜合優(yōu)化嘗試新技術(shù)，利用云平臺提速第十頁，共四十四頁。一、QQ帳號登錄優(yōu)化實踐登錄場景PC網(wǎng)站、應(yīng)用使用QQ帳號登錄網(wǎng)頁形式：Discuz!等網(wǎng)站客戶端應(yīng)用：金山快盤手機應(yīng)用iOS、Android支持手機QQ、手機Qzone的SSO形式登錄喚起系統(tǒng)瀏覽器登錄第十一頁，共四十四頁。優(yōu)化目標減少登錄時間優(yōu)化注冊環(huán)節(jié)加快打開速度第十二頁，共四十四頁。OAuth2.0登錄流程優(yōu)化目標：加快用戶登錄速度加快頁面顯示速度減少用戶操作時間輸入帳號密碼確認授權(quán)獲得Token和OpenID登錄成功PC端QQ登錄頁OAuth流程優(yōu)化第十三頁，共四十四頁。優(yōu)化方式流程優(yōu)化好處2個頁面合并為1個頁面，既減少了用戶操作，也較少了http的請求次數(shù)。輸入帳號密碼

&

確認授權(quán)獲得Token和OpenID登錄成功第十四頁，共四十四頁。代碼優(yōu)化登錄頁面

打點：記錄加載時間Body之前一次，之后一次。以快速顯示頁面為目的：HTML由后臺生成JS主要邏輯寫在Body之后次要邏輯寫在外部文件中不使用JS框架，用原生代碼：21K→13K用CSS替代圖片：28K→6K優(yōu)化HTTP請求：6個→1個第十五頁，共四十四頁。登錄頁面第十六頁，共四十四頁。優(yōu)化效果第十七頁，共四十四頁。手機SSO登錄優(yōu)化手機QQ每天的活躍用戶約4.4億。智能手機覆蓋率：80%+利用手機QQ登錄不僅可以優(yōu)化性能，還可以表面重復(fù)輸入用戶名、密碼產(chǎn)品優(yōu)化效果更好技術(shù)優(yōu)化：正常的手Q登錄界面需要加載很多東西獨立的登錄界面，減少App加載時間和內(nèi)存占用第十八頁，共四十四頁。小結(jié)：產(chǎn)品形態(tài)優(yōu)化的效果通常比技術(shù)優(yōu)化的效果要好在智能手機上要善于利用客戶端資源明確優(yōu)化目標，在工作量和性能上進行平衡和取舍做好“時間打點”等基礎(chǔ)工作。第十九頁，共四十四頁。二、定向分享的多終端優(yōu)化定向分享=分享給QQ好友第二十頁，共四十四頁。PC分享界面第二十一頁，共四十四頁。手機分享場景第二十二頁，共四十四頁。優(yōu)化難點與思路難點：好友列表的數(shù)據(jù)量大600人的好友列表：頭像圖片思路：針對不同平臺的特點減少數(shù)據(jù)量LazyLoad（延時加載）26K第二十三頁，共四十四頁。第二十四頁，共四十四頁。PC的網(wǎng)頁優(yōu)化PC端特點：網(wǎng)速快有鍵盤：拼音檢索有鼠標：頭像是20x20的功能全：創(chuàng)建臨時討論組LazyLoad的力度：一次性加在所有好友數(shù)據(jù)僅在展開分組時，加載頭像頭像并行加載第二十五頁，共四十四頁。移動端的特點和優(yōu)化策略移動端特點沒有鍵盤，無需拼音JS減少50K手指觸摸頭像用40x40網(wǎng)速慢對聯(lián)系進行LazyLoad滑動時一定要流暢聯(lián)系人LazyLoad策略默認顯示什么？頭像LazyLoad加載時機是什么？挑戰(zhàn)第二十六頁，共四十四頁。首頁加載ScrollEnd第二十七頁，共四十四頁。其他優(yōu)化消息展現(xiàn)形式的優(yōu)化App中也可以支持Gzip壓縮使用了CSS3的漸變色、圓角等特性，避免使用圖片，節(jié)省流量。第二十八頁，共四十四頁。小結(jié)劃分lazyload粒度的時候要充分考慮用戶場景和平臺特性。在手機側(cè)要同時考慮有app和無app的情況，建議在無app時打開H5頁面，增強用戶體驗。比如瘋狂猜圖、唱吧、papa善用HTML5、CSS3新特性第二十九頁，共四十四頁。3、突破傳統(tǒng)優(yōu)化手段

QQ查找是PC端Hybrid項目新版采用了WebKit第三十頁，共四十四頁。對于傳統(tǒng)優(yōu)化方法的思考1減少HTTP請求數(shù)把圖片以DataURI的方式內(nèi)聯(lián)在CSS文件中結(jié)果：CSS文件變大，加載時間長，出現(xiàn)白屏優(yōu)化：改為外聯(lián)，CSS加載時間明顯下降第三十一頁，共四十四頁。對于傳統(tǒng)優(yōu)化方法的思考2在HTML中整合前端模版目前的標配，減少HTTP請求數(shù)結(jié)果難以維護，HTML膨脹HTML底部的JS執(zhí)行時間推遲優(yōu)化：剝離模版51K→18K將模版預(yù)編譯為JS模塊，加快顯示速度第三十二頁，共四十四頁。對于傳統(tǒng)優(yōu)化方法的思考3JS放在頁面最后執(zhí)行快速顯示頁面結(jié)果AJAX在DomReady之后，數(shù)據(jù)獲取滯后，顯示變慢優(yōu)化在Head中即進行數(shù)據(jù)初始化內(nèi)嵌100+行的JS代碼Ajax請求不會阻塞頁面后續(xù)的加載JS加載后可以立即顯示數(shù)據(jù)第三十三頁，共四十四頁。對于傳統(tǒng)優(yōu)化方法的思考3（續(xù)）第三十四頁，共四十四頁。利用Webkit的新特性嘗試WebPWebP(發(fā)音"weppy")，一種有損壓縮的圖形檔格式，派生自圖像編碼格式VP8。我們使用WebP有損壓縮后圖片從23k壓縮到只有9K，縮減達52%第三十五頁，共四十四頁。小結(jié)沒有銀彈，勇于打破傳統(tǒng)擁抱新技術(shù)第三十六頁，共四十四頁。后臺綜合優(yōu)化后臺對性能起決定性作用負載均衡多通接入：電信、聯(lián)通、移動（鐵通）、教育就近接入容災(zāi)、備份、監(jiān)控、防御……第三十七頁，共四十四頁?；ヂ?lián)管理系統(tǒng)QQ互聯(lián)登錄授權(quán)流程API接口開放平臺的APPInfo應(yīng)用部的APPInfo應(yīng)用授權(quán)信息用戶授權(quán)信息第三十八頁，共四十四頁。遷移到云平臺云主機集群控制流數(shù)據(jù)流實時熱點數(shù)據(jù)關(guān)鍵數(shù)據(jù)（接入流程，帳號）游戲流水?dāng)?shù)據(jù)快速云通道羅盤大數(shù)據(jù)解決方案進行數(shù)據(jù)挖掘TGW負載均衡移動端PC端CMEM云緩存CBS云硬盤CDB云數(shù)據(jù)庫第三十九頁，共四十四頁。TGW-外網(wǎng)負載均衡集群外TGW

……TGWRoute2Route1TGWTGWTGWServerServerServerServerOSPFOSPFServerClientServerClientServerClientServerClientServerServerServerServer七層TGW四層TGW第四十頁，共四十四頁。CDB（CloudDatabase）