整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
Q紅包作為一個已上線4年的基礎功能，在過去的一段時間經歷了定位轉變，用戶數據下滑等問題。隨著幾個新玩法的推出，QQ紅包又重新受到了年輕用戶群體們的關注和歡迎，成為“沙雕”網友們日常的快樂源泉，那么這些玩法是怎么設計出來的呢，本文為你揭開背后的故事。
2019年8月中旬，QQ紅包上線了成語接龍玩法，因為“一個頂倆”這個無解的接龍成語，引發了網友們的熱議，相關的話題沖到了知乎當日問題熱榜第一位，微博上也有很多的討論和轉發，甚至還有網友自發創作了相關的鬼畜視頻和表情包。
8月底，跟隨QQ 8.1.3版本的發布，QQ紅包又上線了畫圖紅包的玩法，瞬間又引起了網友們的關注，在沒有任何推廣的情況下，獲得了超高的熱度。靈魂畫手們紛紛登場，寫實派和抽象派同臺競技，為大家奉獻了一幅幅“精彩”的畫作。
這些紅包玩法受到用戶的歡迎，獲得了許多贊譽。但是，它們的推出并不是一蹴而就的，而是項目團隊許多次探索和打磨的結果。那么，這些QQ紅包新玩法是怎么設計的呢，現在讓我們揭開背后的故事。
在開始之前，讓我們先了解一下QQ紅包這個業務，QQ紅包是什么？
QQ紅包上線于2015年，初期承擔著搶占移動支付市場份額的重任，隨著移動支付滲透率的日趨飽和，QQ紅包原來的戰略使命已逐漸淡化。如今，QQ紅包的角色已經轉變成為一個QQ社交生態中的重要社交工具。
不同于微信紅包和支付寶紅包，QQ紅包的用戶群體更加年輕，90后，95后，00后占比達到了80%。
QQ紅包的用戶群體如此年輕，對于新鮮有趣的事物有著強烈的好奇心，然而QQ紅包原有的拼手氣，專屬紅包，文字口令，語音口令等玩法，上線時間都已經超過2年，用戶對于這些紅包玩法的新鮮感正在逐漸下降。
為了重新給年輕用戶帶來新鮮感，我們明確了QQ紅包的新方向：更加貼合年輕用戶的喜好，不斷拓展紅包新玩法，讓紅包更加年輕化、社交化、娛樂化。
明確了QQ紅包的新方向，那么要如何找到QQ紅包玩法的切入點呢？我們做了許多前期的探索和嘗試。
（1）高效用研，聽取年輕用戶的聲音
我們從身邊的親朋好友尋找QQ紅包的年輕用戶，直接與他們溝通，來獲得他們對QQ紅包的真實反饋。通過自費給予報酬，或者降低自己的年齡，來拉近與年輕用戶的距離，以此與他們維護良好的關系，在后續的設計中，這些年輕用戶給了我們很多的啟發和建議。
（2）整理問題點，推導設計方向
我們通過對年輕用戶進行訪談，了解到了QQ紅包現存的3個主要問題：金額少、場景少、趣味少。
根據用戶反饋的問題，我們對應的推導出了QQ紅包的設計方向。
明確了紅包的設計方向，我們開始了初步玩法嘗試，以情感化作為切入點，設計了語音明信片紅包方案，讓用戶在發送紅包時，編輯一張電子賀卡，并錄制語音消息，連同紅包一起發送出去，以此向好友傳達金錢之外的祝福、感謝、思念之情。
在完成語音明信片紅包的方案設計后，我們找到用戶進行快速CE，以驗證方案的可行性。驗證結果發現用戶對這個玩法不是很感興趣，用戶覺得在發紅包時編輯明信片很麻煩，還有一些用戶認為明信片已經是上個時代的事物，不太喜歡以這種形式發紅包。
情感化的方向不受年輕用戶的歡迎，我們繼續從互動性和趣味性方向尋找切入點。通過與用戶溝通，研究95后，00后相關調研報告，搜集年輕用戶喜好的興趣點，并從中篩選出可行紅包玩法的切入點。
通過對比和篩選，我們最終確認了“K歌”這個切入點。主要有兩個考慮點，一個是互動性，商場迷你KTV的興起，使得K歌成為年輕用戶社交互動的熱門選擇。另一個是趣味性，我們可以與全民K歌合作，采用全民K歌的評分技術，設定領取紅包的門檻。
K歌紅包的主要玩法：唱歌達標領紅包，發紅包者選擇歌曲片段與紅包一同發出，領紅包的人需要唱出歌曲，并且K歌評分達標之后才可領取紅包。
在結合K歌玩法和QQ紅包的過程中遇到了許多問題，我們對體驗細節進行了打磨。
（1）保證紅包基本玩法：搶
對于紅包而言，快速搶到紅包仍然是最基本的玩法。常規的K歌，唱完一首歌大概要3-4分鐘，難度大且投入成本高，用戶會因為擔心紅包被搶光而失去耐心。這里我們只截取每首歌的副歌高潮片段，時長為8-20s，并外顯這一時長信息，讓用戶沒有心里負擔，可以快速唱完并成功搶到紅包。
（2）做減法
全民K歌的K歌主界面有十分豐富的功能，如果全部照搬到QQ紅包上，會給領紅包的流程造成干擾。我們把不必要的功能全部剔除，只保留核心的K歌體驗，讓用戶減少決策，更專注于搶紅包本身。
（3）結合實際場景思考
在進行紅包玩法設計時，我們會更多的思考用戶領紅包的實際場景，而不是依賴思維慣性而設計。舉個例子，K歌紅包領取紅包的主要交互操作，初期有兩個選擇，一個是按住button唱歌，另一個是點擊button唱歌。
因為QQ語音口令紅包，以及QQ發送語音消息，都是按住說話，如果按照思維慣性會選擇按住button的方案，但是結合實際場景思考，如果按住button唱歌，屏幕離眼睛太近，用戶很難看清紅包封皮上的歌詞，所以我們最終選擇了點擊button開始唱歌的方案。
（4）增強用戶間的多向互動
原本發紅包的互動，是發紅包者和收紅包者之間的雙向互動，收紅包的人搶到紅包后，會回復文字“謝謝老板”或是一個感謝表情包，互動的形式較為單一。
新的K歌紅包玩法，用戶K歌的片段以語音的形式發送到聊天窗，并且展示K歌的評分，這樣讓發紅包的人更有滿足感，能引起收紅包者之間的互動討論，甚至能激發用戶的競爭排位心理。
這樣一來，不僅僅是發紅包和收紅包者之間的雙向互動，還有收紅包人之間的多向互動。K歌紅包玩法上線后，受到了用戶的歡迎，許多用戶喜歡用《學貓叫》這首歌來“戲弄”好友。
根據K歌紅包的經驗，項目團隊開始有意識的尋找紅包玩法方案的共性，逐步抽象提煉出一個紅包玩法的創意公式：互動性+趣味性+基礎紅包=新紅包玩法。
其中，互動性是指從年輕用戶喜好的事物篩選，尋找可以激發用戶產生互動的切入點；趣味性是指技術手段可實現的，設定一定的紅包領取門檻，讓用戶更有參與感。
具體的玩法流程，則是發紅包的用戶在輸入紅包金額后，選擇一個互動內容/題目，通過技術手段設定領取門檻；收紅包的用戶需要進行操作，并匹配上預設的門檻，才可成功領取紅包；而操作的過程會生成內容，并發送到聊天窗口，讓用戶間產生多向互動。
以紅包玩法創意公式作為設計思路，項目團隊又一起共同腦暴細化方案，推出了表情紅包，以及本文開頭提到的接龍紅包，畫圖紅包玩法。
做表情領紅包，用戶在發紅包時選擇一個表情模版與紅包金額一同發出，領紅包的人需要打開手機攝像頭，并根據表情模版做出對應的表情動作，通過面部/動作識別技術，判定所做的表情匹配模版后才可領取紅包，領紅包用戶所做的表情也會生成一張表情gif圖發送到聊天窗中。
（1）做減法：減少用戶DIY，預設內容模版
市面上制作表情gif的app，支持用戶DIY內容，但是在領紅包的場景，用戶更關注紅包本身，因而需要做減法，減少用戶的操作。為此，我們根據不同的表情模版配置好對應的濾鏡，貼紙和特效等內容，用戶只需一步操作，就可以錄制生成一個效果完整的gif表情，并成功領取到紅包。
（2）結合實際場景思考：讓用戶先預覽表gif效果
因為用戶拍攝生成的表情gif，最終會發送到聊天窗口中，考慮到用戶對自己個人形象的重視，所以在用戶的表情被成功識別后，我們先讓用戶預覽表情gif的呈現效果，此時用戶可以選擇重新拍攝一個更滿意的效果，也可以點擊button直接領取紅包。
接龍成語領紅包，用戶在發紅包時選擇一個成語與紅包金額一同發出，領紅包的人需要根據初始成語的末字拼音進行接力，通過拼音抓取識別技術，判定接龍成語拼音一致即可領取紅包，下一個領紅包的用戶，需要接龍上一個人的成語繼續領取紅包，以此類推，直至該紅包被領完。
結合實際場景思考：拼音提示信息實時更新
在群聊中搶接龍紅包，有很大幾率會出現一種情況，就是用戶根據上一成語的拼音開始輸入接龍成語時，該拼音的接龍成語已經被其他群友搶先輸入，并已領取到紅包了，此時如果用戶還是按最開始的拼音輸入，無法搶到紅包，體驗會十分糟糕。
這里我們在輸入框上方做了一個小浮層設計，用戶點擊領取紅包，小浮層出現并展示下一個接龍成語的拼音，給予用戶一個快速提示。除此之外，這個浮層的拼音內容是根據最近的接力成語而變化的，這樣用戶只需關注浮層上的拼音內容，就可以輸入當前正確的接力成語，從而成功領取到紅包。
畫圖領紅包，用戶在發紅包時選擇一個畫圖題目與紅包金額一同發出，領紅包的人需要根據題目進行作畫，通過AI圖像識別技術，判定所畫的內容匹配畫圖題目即可領取紅包，領紅包用戶所畫的作品生成一張圖片發送到聊天窗中。
（1）做減法：減少用戶設置，隨機畫筆顏色
在設計初期，項目組為了讓用戶的畫作表現力更加豐富，曾考慮可以讓用戶自主調整畫筆筆觸的大小，畫筆顏色，以及畫板的背顏色景等。經過討論，確定仍遵循了“做減法”的設計原則，減少用戶對畫筆和畫板的設置，選用隨機畫筆色彩這一方案，來保證用戶畫作的差異性和豐富性。
（2）結合實際場景思考：識別成功后，繼續完善畫作再搶紅包
畫圖紅包采用了AI圖像識別技術，只需要識別到畫面中對應題目的特征，就可以判定用戶繪畫成功并可領取紅包。但是也會引發一個問題，就是用戶有時只需畫一筆，比如鯊魚的背鰭，AI技術就可以判定用戶繪畫成功。這對于那些想要表現自己高超畫技的用戶而言是十分掃興的，為了照顧這部分用戶的感受，我們在AI識別成功畫作后，支持讓用戶繼續作畫，豐富更多的細節，并發到QQ群中去獲得贊美。
當然，對于那些只想快速搶到紅包，并且不在意自己被稱為“靈魂畫手”的用戶，在AI識別成功后，也可以直接點擊領取紅包。
（3）增強用戶間互動：給畫作評分
與K歌紅包一樣，畫圖紅包后續期望能引入繪畫評分技術，屆時畫的越好的用戶，獲得的評分越高，這樣能讓大觸們可以一展身手，也能激發用戶畫出更好的作品，引發更多的互動和討論。
這些QQ紅包新玩法上線之后，數據上都有爆發的增長，它們拓展了用戶的社交方式，刺激了群成員之間的互動，表情紅包成了用戶收割好友表情包的利器，接龍紅包讓大家重拾對成語的熱情，還有小學教師用接龍紅包進行成語教學，受到了小學生們的歡迎，而畫圖紅包則讓一眾靈魂畫手們得以揮灑天賦，成了“沙雕”網友們的快樂源泉。
隨著紅包玩法的不斷拓展，一些體驗問題開始暴露，我們又進行全局性的梳理，對紅包進行了體驗優化。
（1）拓展性
紅包玩法的不斷豐富，使得原有發紅包頁面框架無法繼續滿足新增的紅包玩法。為了保證發紅包頁面的拓展性，我們在頁面上劃分了內容區域，其中固定內容是紅包金額、個數這兩個必要信息，而變動內容是紅包玩法信息，例如表情模版，歌曲片段等。
劃分內容區域后，固定內容區域信息不變，而變動內容區域可以根據不同的紅包玩法而切換，以此發紅包頁面框架的拓展性，可以不斷兼容新的紅包玩法。
（2）一致性
因為歷經不同設計師，各個紅包玩法的領取彈窗樣式，交互體驗不一致，我們又劃定了紅包領取彈窗的玩法內容區域，統一主操作button的樣式，精簡提示文案，讓各個紅包玩法的領取彈窗保持一致，給用戶傳一致的QQ紅包品牌感。
（3）趣味性和儀式感
在后續的紅包設計中，我們也會在紅包中做一些趣味性和儀式感嘗試。比如在發紅包時，紅包頁面的背景或輸入框的顏色隨著金額的大小而變化，金額越大變化越強烈，讓這個隱藏的小彩蛋給那些發大金額紅包的用戶一種尊貴感和滿足感。
除此之外，我們希望在收發紅包流程能給予用戶儀式感，比如封裝，拆開紅包的動效，適度加長拆開紅包的等待過程，營造一種拆紅包的儀式，以及收到紅包金額后的音效和光效等。通過多個儀式感元素的運用，讓用戶能在發紅包和收紅包中有更愉悅的體驗。
（1）創新不只是全新創造，也可以是結合和轉化
K歌，自制表情包，成語接龍，以及AI識圖其實并不是新鮮事物，但是結合了紅包玩法，融入了搶紅包拼手氣的屬性，就有了更強的競爭性和互動性。所以，創新可以不是全新創造，也可以是把現有的技術和玩法的做結合，或者進行轉化，只要是這件事原來沒人做過，就可以稱之為創新。
（2）維護用戶群，隨時做用研
設計師可以通過身邊的親朋好友尋找用戶，并維護一個隨時可以進行用研的用戶群體。這樣一來，我們可以快速的驗證設計方案，為方案決策提供依據，或者用于推動和說服項目成員，從而提升設計的決策效率。
（3）結合實際場景思考，而不是依賴設計經驗
長時間的支持某個項目的設計，設計師會很容易形成思維慣性，完全憑借自己的經驗來進行設計，但是遇到一些特殊情況，如果仍然依賴思維慣性設計，就會脫離用戶基礎的需求。因而，設計師在做設計時要結合實際的場景，思考用戶的操作體驗流程，以及會遇到的問題，并為之進行針對性的優化設計。
（4）抽象思維，提取設計共性，形成創意公式
在設計一系列的功能或玩法的時候，設計師可以抽象思維，去尋找方案中的共性，并逐漸提煉成一個創意模版，就像一個數學的公式，同一個公式可以套在不同題目上進行解答，甚至可以不斷的發散，延伸新的解題方式。設計同樣如此，如果提煉出了創意公式，就可以在功能和玩法中套用思路，不斷的拓展系列性的玩法。
（5）關注用戶所喜愛的，通過內容引起傳播
網絡造梗時代，網友們的創作能力是十分強大的，一個具有話題性的內容往往能引起廣泛的傳播，如果說是“一個頂倆”是無心之作，那么在后續的畫圖紅包以及其他紅包玩法中，我們會更加關注年輕用戶喜好的題目類型，去上線一些有一定難度的，并且有一定話題性的內容，滿足用戶的需求，引起更多的互動和傳播。
QQ紅包作為一個上線多年的功能，從最初的發展期，又逐漸進入成熟期衰落期。而新的玩法推出，讓QQ紅包又一次獲得了更多年輕用戶的喜愛，煥發了新的生命。
當然，我們的腳步會不止于此，接下來，我們富有奇思妙想的項目團隊會繼續不斷探索嘗試新的QQ紅包玩法，給有趣可愛的用戶們帶來更多的歡樂。
作者：騰訊isux
來源：https://isux.tencent.com/articles/qq-red-envelope.html
題圖來自 騰訊isux 官網
IM作為騰訊旗下的通信辦公軟件，相比QQ更加簡潔，省去了大量的娛樂功能，更加專注移動在線辦公。但同時TIM也精簡了一些我們需要的功能，這讓我始終覺得缺了什么。
經過一段時間的使用，我發現好多被精簡掉的功能就是H5頁面，可以從原版QQ中復制鏈接，加入TIM收藏，在TIM打開，徹底擺脫QQ。
具體怎么實現呢？我以運動為例講解具體的方法，現在隨我一起做吧！
1.打開動態頁面中的運動。
2.長按頁面中空白的區域，點擊在瀏覽器打開。
3.關閉一些無用的對話框，點擊上方網址欄，復制鏈接。
4.打開TIM，粘貼鏈接并打開。
但我們可以發現并沒有正確打開我們所需的網址。
原因很簡單，這個網頁對瀏覽器做了跳轉處理，我們復制的鏈接是跳轉后的網址。并且從圖中可以看出復制鏈接時的網頁與原來的并不同。
5.返回QQ，重新打開運動頁面，我們需要找找其他的方法。
6.通過探索我們可以發現通過下拉運動紅包頁面可以顯示鏈接：yundong.qq.com。
7.打開TIM，粘貼鏈接并打開，發現成功了。
以上就是尋找運動功能鏈接的過程了。畢竟在TIM中領個運動紅包也是不錯的。
尋找鏈接的方法有很多，關鍵在于細心。這里為之家網友總結了其他一些隱藏的功能鏈接：
QQ運動：yundong.qq.com
游戲：http://m.gamecenter.qq.com（點擊進入手Q游戲中心，需要再次點擊下方的“我”）
興趣部落：https://buluo.qq.com/mobile/buluoindex.html
打卡頁面：https://ti.qq.com/signin/public/index.html
TIM換聊天背景：zb.vip.qq.com/sonic/index
如果常用這些功能可以加入TIM收藏，以備下次使用。
語 | 任何技術優化都依托于業務的發展，隨著QQ會員增值業務的重心轉移到手Q移動端，對H5頁面不僅要求加載更快，還需承載豐富多彩的運營活動，同時由于每個頁面都意味著KPI收入，任何可能導致頁面功能不可用的發布行為都是不可接受的。
本文主要介紹QQ會員的前端開發團隊在手Q的hybrid模式下對H5頁面的性能優化、組件化和持續集成方面的實踐。
隨著移動化浪潮的來臨，QQ增值業務的重心從PC端PCQQ轉移到移動端手機QQ；作為前端開發，我們的工作內容也轉移到基于手機QQ的hybrid模式下H5開發工作。
什么是QQ會員？QQ會員是宇宙第一大包月業務，大部分的會員用戶都很年輕。大家可以猜一下哪個年齡段的QQ會員用戶最多？小學、初中、高中、大學還是白領？所以如果你還不是QQ會員，說明你已經老了 :)
個性張揚是年輕的代名詞，QQ會員用戶在好友列表中的名字是紅色，而且排名靠前，這些都達成了用戶的炫耀心理，就連發紅包時都擁有右圖中的專屬的皮膚。
同時QQ會員還有左圖中的QQ等級加速更快等特權，買電影票、定外賣還能打折。
其實手機QQ在承擔即時通訊等社交功能的同時，還承載著QQ會員數十億的營收重任，其中大部分的營收都來自于內嵌在手Q中的H5頁面，因此保證H5頁面的高質量，是我們的工作重點。
保證H5頁面的高質量，我們有以下三個挑戰：
第一、如何讓H5打開更快？雅虎的一項研究表明，頁面打開每慢400毫秒，將帶來5%-9%的用戶流失；讓頁面更快呈現給用戶是前端工程師們的不懈追求，在hybrid模式下借助于終端的能力我們有了更大的想象空間！
第二、如何讓H5開發更快？好的產品是運營出來的，沃爾瑪每周都有打折，電商有6.18和雙11雙12，同樣QQ會員也需要有持續的H5運營活動以保持用戶的活躍和留存，而H5組件化是我們提高開發效率的手段。
第三、如何保證H5頁面持續高質量。手機QQ一兩個月發布一個版本，但是H5頁面每天都有發布，隨著H5邏輯越來越復雜，比如不同身份用戶（非會員、會員）在不同時間點（到期前和到期后）進入頁面時看到的內容都不一樣；如何不依賴成本很高的人工測試來保證H5頁面的功能持續可用？
首先介紹下我們基于hybrid的sonic方案是如何實現頁面在1秒左右打開的。
1、要打開頁面，在PC端需要先打開一個瀏覽器（chrome或者火狐），在android或者IOS應用中必須先有一個webview（圖中橙色部分）；出于性能考慮手Q并未在后臺常駐一個webview進程，所以要打開頁面需要先初始化webview。
2、在之前版本的手Q中我們時常可以看到類似左邊的白屏，雖然加上了賣萌的文案“別鬧，加載是件正經事”讓用戶感覺萌萌噠，但這掩蓋不了曾經webview初始化慢的事實。雖然經過幾個版本迭代優化，客戶端耗時已經大大降低，但是還需要近900毫秒。好像距離一秒的目標很近了。
3、但是webview初始化完成后，再調用loadUrl接口獲取目標URL的HTML內容并進行渲染（圖中藍色部分）；由于我們的web層基于PHP語言來實現，一個web請求需要新建一個子進程去查詢若干個后臺服務，這里的耗時至少需要200毫秒。算一下終端加后臺的耗時加起來已經超過一秒了。。雖然沒有人能跑的比博爾特更快，但是我們還是有方法來讓我們的頁面打開更快。
第1個優化是把串行改為并行！我們把終端webview初始化工作并行為兩個線程（圖中兩個橙色塊）：webview主線程處理主要的初始化工作，而登錄態獲取、業務插件初始化等工作放在webview子線程，這樣終端的耗時就從之前的兩部分的耗時之和變成了兩部分耗時的最大值。同樣在后臺我們也新建了一個proxy來代理后臺所有服務的查詢工作（右側綠色塊），由proxy來并行發起對其他后臺服務的查詢，proxy的耗時取決于最慢的那個后臺服務接口的耗時。
第2個優化是網絡耗時的優化。電影英雄中有段對白：劍術的最高境界是心中無劍，手中亦無劍。減少網絡耗時最有效的優化方法莫過于不進行網絡請求，也就是Cache。
1、雖然瀏覽器本身有緩存功能，可以通過設置靜態文件的緩存時間來減少請求數，但是我們經過數據驗證，發現移動端瀏覽器緩存有時候并不可靠，緩存還未過期也有可能被清掉重新請求。
2、H5標準中也有一個localstorage特性，我們通過擴展seajs的緩存插件實現在localstorage中緩存JS文件，加快了HTML依賴的JS的加載速度。但是HTML本身仍然需要走網絡請求。
3、其實手Q也實現了一套離線包機制，用來緩存HTML和圖片、CSS、JS等文件，但是只能緩存靜態不變的內容，比如剛開始介紹QQ會員時的會員個性化紅包頁面就利用了離線包的能力。然而我們的頁面有很多用戶數據（比如會員身份、會員成長值、QQ等級成長速度等）需要實時查詢，再加上終端復雜的離線包校驗機制耗時很多，我們新建了HTML Cache機制，在終端緩存了整個HTML。
4、有了緩存之后，webview主線程先發起1.1的loadUrl操作展示本地HTML緩存給用戶，同時發起1.2的HTTP請求去獲取最新的數據內容，如果有變更則通過第3步的jsbridge回調進行頁面刷新，同時終端會異步進行第4步的更新本地的HTML Cache。
5、如果頁面沒有變化，網絡耗時僅為加載本地HTML文件的IO時間，這個時間幾乎為0；如果頁面有變化，由于這里提前并行發起了http請求，網絡耗時也比上一頁中串行的HTTP直連要少很多。
6、這里還有一個問題，就是如果緩存的HTML內容和最新的內容不一致，我們需要刷新整個頁面嗎？答案是否定。大家注意下這里第2步返回內容可能是HTML，也有可能是JSON，下一頁會介紹為什么。
1、我們將HTML拆分為兩部分：模板和數據塊。一個數據塊對應一段HTML片段（上圖中藍色字部分），用注釋語句包裹起來；而數據塊以外的部分為模板，一般情況模板的內容比較固定，dom結構、內聯的樣式等很少變動。
2、比如圖中有三個數據塊：key1，key2和key3，分別對應這個頁面從上到下三個紅框框住的部分。
3、剛才有講到并行HTTP請求回來的內容可能是HTML，也可能是JSON；我們的策略是如果是首次訪問本地沒有緩存或者緩存被清理則返回完整的HTML；如果模板未變化只是數據塊有變化，比如總成長值加了2點，從76660加到76662，或者生活福利模塊更換了2個廣告位，只需要返回JSON即可，由jsbridge觸發頁面回調來替換DOM節點實現頁面的局部刷新。
3、以上兩個優化點需要終端和頁面按照統一規則緊密配合，我們通過擴展HTTP協議來實現。
1、我們擴展了4個HTTP協議頭，2個請求頭和2個返回頭。
2、accept-diff表明終端是否支持增量更新的能力，一般傳true，對于老版本的手Q，無法攜帶該頭部，后臺將會始終返回完整的HTML；template-tag代表終端本地緩存的HTML的SHA1摘要值；
3、template-change代表服務端模板是否有變更，模板和數據塊均無變更返回304，模板無變更僅部分數據塊有變更時為false，首次和模板變更時都是true；cache-offline是后臺告訴終端如何進行頁面刷新和本地HTML緩存更新，如果為true代表刷新頁面并更新緩存，如果為store，代表僅更新緩存不刷新頁面。
下面我們從整個流程上來看一下。
第一種場景是用戶首次或者緩存失效時加載頁面，用戶點擊終端入口后，在初始化webview的同時并行發起http鏈接，在webview初始化好之后會在內核和http流之間建立橋接。內核在讀取完畢之后終端根據模板數據拆分規則對html進行內容分割，并記錄模板和數據的tags信息，異步HTML為模板和數據用于下次與服務器通信實時更新。
1、第二種場景是用戶二次進入頁面，這種情況的占比七成以上。webview優先加載HTML緩存，并且根據http(s)返回碼的同步狀態，進行不同的處理。
2、如果status為200，且返回的是JSON，說明只有數據變更，終端會對數據進行diff處理，和頁面通過js通信進行局部刷新。
3、如果發生模板變更，處理邏輯會有點復雜，終端根據在不同機型和網絡環境下做智能切換處理，速度較快時會拉取完HTML流交給內核渲染，速度不快時仍然會建立橋接流，并且也會對HTML進行拆分；
4、如果status為304說明完全命中緩存，則不作任何處理；
1、左邊的效果是最初頁面局部刷新時的表現，我們可以看到加載本地緩存的HTML后很快看到了整個頁面，然后成長值發生了變動，然后又更新了兩個廣告運營位。但是這里的體驗還是有點問題的，加載圖片需要時間，導致頁面的閃動很明顯。
2、我們又改進了下，先將圖片下載完，再去局部更新這兩個廣告運營位，最終實現了右邊比較平滑的效果。
另外一個圖片的優化是圖片自適應。
網頁中的流量大頭是圖片，圖片加載消耗了很多時間。我們實現了對于同一張圖片，終端看一根據用戶不同的手機分辨率返回不同規格的圖片，而這一切不需要做任何代碼修改，完全透明接入。
比如如果你是iPhone 7S，CDN返回750像素的高清大圖，如果你還在用iPhone 4S，CDN返回480像素的一般清晰度的小圖，這樣在保證體驗的同時減少了加載的圖片大小，頁面更快展現給用戶。
這個項目內部代號sonic，意思是希望頁面加載速度可以像音速一樣快。最終我們也實現了占比70%右側2個場景，局部刷新和完全cache時總耗時1秒左右，而且首次訪問時的總耗時也低于之前最左邊的HTTP直連。
我們除了讓H5頁面加載更快，還需要讓H5頁面開發更快以滿足活動運營的需求。
首先我們看一下什么是運營活動？
1、左邊第一個活動新游戲即將發布，在預約頁面提前預約的用戶在游戲發布后下載完成后可以免費領取福利；
2、左邊第三個活動，QQ會員可以免費領取一張美團的優惠券；
4、最右邊的活動，QQ會員玩天天酷跑游戲可以免費抽獎獲取游戲道具；
1、運營活動有四個要求：一般1-2天需要完成開發測試和上線、不同活動可能有相同的功能邏輯，一般會投入大量推廣資源所以對頁面的質量要求比較高，大量資源推廣時并發訪問用戶多對性能要求比較高。
2、我們的思路是必須盡可能減少開發環節和開發人力，最小化功能邏輯實現顆粒化可復用，對前端代碼和后端服務要求穩定可靠，必須持續的前端性能優化。
3、我們的解決方案是構建一個組件化的活動開發平臺，內部代號ET
1、第一：減少一切可以減少的環節。一般H5頁面的開發流程是交互-設計-重構-開發，我們和交互、設計人員制定好運營活動的交互設計規范，比如統一彈窗樣式，從而減少了交互環節；利用H5的新特性canvas自動對設計稿進行切圖，又省掉了重構環節。
2、第二：組件化開發。開發人員只需要開發組件，組件可以在不同活動中復用。運營人員只需要拖拽組件、配置資源，最后由執行引擎生成包含活動邏輯的HTML頁面，自動發布外網即可。
一個組件由HTML片段，CSS樣式和JS邏輯構成；開發人員完成組件開發之后，運營人員像拼積木一樣，拖動幾個組件組合在一起，就可以生成運營活動頁面。
同時ET平臺實現了一整套發布回滾流程支持，自動對接頁面性能測試工具，可以對運營頁面的性能進行自動化測試，最后也會給大家分享下如何進行性能自動化測試的。
該平臺上線后，月均上線活動達到300個以上，但全職開發人員投入僅1人。
保證H5頁面功能正常，并且讓H5頁面打開更快，不是一錘子買賣，需要可持續。H5頁面的質量不能僅僅靠測試人員的手工測試來保證，我們需要一套自動化解決方案。
1、說到質量標準，IOS9001是我們耳熟能詳的國際質量標準，但是H5頁面的質量標準是什么？
2、PC時代，我們知道performance api就能比較全面的透視整個頁面請求過程的耗時，在hybrid模式下，我們對H5頁面高質量的定義是頁面功能的高可用和頁面加載速度更快。
3、功能高可用需要webview不會crash，頁面能夠正常打開并且業務邏輯符合預期；頁面加載速度更細化，終端耗時、網絡耗時、頁面耗時，同時需要關注總耗時大于5秒以上的慢用戶占比。
1、頁面功能可用性的自動化測試，我們構建于騰訊內部自研的自動化測試工具QTA。該工具不僅可以識別android和ios終端的控件，也可以識別web的dom控件，通過對點擊事件進行模擬，將實際的返回值同期望值比較以確認用例是否通過。
2、測試人員使用python語言編寫自動化測試腳本上傳到SVN，由分布式任務管理系統分配可供測試的手機模擬器或真實的手機，測試人員可以手工或者設置定時任務自動執行測試計劃。
3、同時我們將web發布系統和任務管理系統進行打通，每次發布前自動進行功能自動化測試，只有在預發布環境的通過率達標才能繼續發布，這樣就保證了頻繁變更時H5頁面的功能依然正常。
1、頁面性能自動化測試我們參考了很多現有的工具，比如yslow，雅虎前端優化軍規以及谷歌的pagespeed，但是發現這些對hybrid模式支持的都不是很好，尤其是我們基于手Q環境下有更多的個性化的東西。
2、我們選擇了自研H5頁面性能自動化測試工具，簡稱為WPT，web performance test。參考了yahoo軍規，結合終端環境特性和H5業務特性，對H5頁面加載的全流程進行發布前測試和發布后回歸。
簡單回顧下，我們通過H5頁面和終端的深度融合實現了H5頁面的快速加載，同時通過組件化實現了H5頁面的快速開發，使用自動化工具實現了H5頁面變更時的持續的高可用和高性能，最終實現了高質量的H5的架構實踐。
作者：翟偉，QQ個性化業務前端團隊leader，曾參與過超級QQ和QQ會員的前端開發工作，目前負責手機QQ個性裝扮的開發工作，擁有近10年的項目架構和實踐經驗，專注于手機QQ的hybrid模式下H5優化和持續集成方向。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
