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

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

QQ互聯(lián)中的優(yōu)化經(jīng)驗(yàn)分享騰訊高級(jí)工程師任旻個(gè)人經(jīng)歷概述2004年-2005年在北京工業(yè)大學(xué)任教2005年-2009年在微軟，.Net相關(guān)的技術(shù)工作2009年加入騰訊，負(fù)責(zé)開(kāi)發(fā)QQ概念版2011年——今開(kāi)放平臺(tái)：Q+，QQ互聯(lián)O’Reilly《HTML5Canvas》譯者為什么要對(duì)QQ互聯(lián)進(jìn)行性能優(yōu)化？QQ互聯(lián)優(yōu)化實(shí)踐Web與客戶(hù)端本地應(yīng)用的綜合優(yōu)化Web前端優(yōu)化中的平衡和取舍利用Webkit的新特性，突破傳統(tǒng)優(yōu)化手段嘗試新技術(shù)，利用云平臺(tái)提速目錄QQ互聯(lián)是騰訊公司通過(guò)開(kāi)放QQ賬戶(hù)體系，幫助第三方網(wǎng)站、媒體、終端進(jìn)行社會(huì)化營(yíng)銷(xiāo)推廣的開(kāi)放平臺(tái)，主要包括QQ登錄、分享等社交組件及OpenAPI等功能。/

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

&

確認(rèn)授權(quán)獲得Token和OpenID登錄成功代碼優(yōu)化登錄頁(yè)面

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

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

……TGWRoute2Route1TGWTGWTGWServerServerServerServerOSPFOSPFServerClientServerClientServerClientServerClientServerServerServerServer