Topsummit如何進行多終端Web前端優(yōu)化-騰訊任旻

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

QQ互聯(lián)中的優(yōu)化經(jīng)驗分享騰訊高級工程師任旻個人經(jīng)歷概述2004年-2005年在北京工業(yè)大學任教2005年-2009年在微軟，.Net相關的技術工作2009年加入騰訊，負責開發(fā)QQ概念版2011年——今開放平臺：Q+，QQ互聯(lián)O’Reilly《HTML5Canvas》譯者為什么要對QQ互聯(lián)進行性能優(yōu)化？QQ互聯(lián)優(yōu)化實踐Web與客戶端本地應用的綜合優(yōu)化Web前端優(yōu)化中的平衡和取舍利用Webkit的新特性，突破傳統(tǒng)優(yōu)化手段嘗試新技術，利用云平臺提速目錄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等功能。強關系社交平臺的分享API：QQ好友、群、QQ空間、騰訊微博什么是QQ互聯(lián)？QQ帳號登錄的認知度更高，且便于記憶強關系社交平臺的分享API：QQ好友、群、QQ空間、騰訊微博龐大的QQ在線用戶群體：手機QQ日活躍用戶4億QQ互聯(lián)的優(yōu)勢為什么性能對QQ互聯(lián)如此重要？影響用戶操作的成功率和轉化率轉化率降低是對合作伙伴的傷害：搜狐微博客戶端：每天新增注冊用戶中，QQ用戶登錄超過40%“唱吧”有超過50%的用戶都來自QQ帳號登錄美圖秀秀：每天分享至不同社交平臺的照片總數(shù)中，分享到QQ空間的照片占94%使用QQ帳號登錄PC手機是否安裝手機QQHTML5頁面SSOAndroid4.0以上1.3以下QQ互聯(lián)的性能優(yōu)化難點多種設備多種操作系統(tǒng)多種登錄方法多個android的版本成本？為什么要對QQ互聯(lián)進行性能優(yōu)化？QQ互聯(lián)優(yōu)化實踐目錄前端優(yōu)化≠優(yōu)化前端登錄和SSOWeb與Mobile本地應用的綜合優(yōu)化定向分享Web前端優(yōu)化中的平衡和取舍QQ查找利用Webkit的新特性，突破傳統(tǒng)優(yōu)化手段后臺綜合優(yōu)化嘗試新技術，利用云平臺提速一、QQ帳號登錄優(yōu)化實踐登錄場景PC網(wǎng)站、應用使用QQ帳號登錄網(wǎng)頁形式：Discuz!等網(wǎng)站客戶端應用：金山快盤手機應用iOS、Android支持手機QQ、手機Qzone的SSO形式登錄喚起系統(tǒng)瀏覽器登錄優(yōu)化目標減少登錄時間優(yōu)化注冊環(huán)節(jié)加快打開速度OAuth2.0登錄流程優(yōu)化目標：加快用戶登錄速度加快頁面顯示速度減少用戶操作時間輸入帳號密碼確認授權獲得Token和OpenID登錄成功PC端QQ登錄頁OAuth流程優(yōu)化優(yōu)化方式流程優(yōu)化好處2個頁面合并為1個頁面，既減少了用戶操作，也較少了http的請求次數(shù)。輸入帳號密碼

&

確認授權獲得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)化性能，還可以表面重復輸入用戶名、密碼產品優(yōu)化效果更好技術優(yōu)化：正常的手Q登錄界面需要加載很多東西獨立的登錄界面，減少App加載時間和內存占用小結：產品形態(tài)優(yōu)化的效果通常比技術優(yōu)化的效果要好在智能手機上要善于利用客戶端資源明確優(yōu)化目標，在工作量和性能上進行平衡和取舍做好“時間打點”等基礎工作。二、定向分享的多終端優(yōu)化定向分享=分享給QQ好友PC分享界面手機分享場景優(yōu)化難點與思路難點：好友列表的數(shù)據(jù)量大600人的好友列表：頭像圖片思路：針對不同平臺的特點減少數(shù)據(jù)量LazyLoad（延時加載）26KPC的網(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é)省流量。小結劃分lazyload粒度的時候要充分考慮用戶場景和平臺特性。在手機側要同時考慮有app和無app的情況，建議在無app時打開H5頁面，增強用戶體驗。比如瘋狂猜圖、唱吧、papa善用HTML5、CSS3新特性3、突破傳統(tǒng)優(yōu)化手段

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

……TGWRoute2Route1TGWTGWTGWServerServerServerServerOSPFOSPFServerClientServerClientServerClientServerClientServerServerServerServer