WeTest導讀
自從去年QQ空間移動端頁面開始切換到HTTPS之后,頁面性能遇到了比較大的挑戰,HTTPS對頁面訪問速度帶來了比較大的影響,所以我們通過實踐總結了一些能夠提升HTTPS頁面訪問速度的方法,這些數據都是我們和STGW的同事反復實驗、多次分析所得到的,希望能夠減少大家對於全站啟用HTTPS的顧慮。我們的目的是,在不影響用戶體驗的情況下,竭盡全力保護用戶的信息安全!
頁面在切到HTTPS之前,iOS的訪問速度約為1795ms,切到HTTPS之后,iOS的訪問速度直接飆到2630ms,我的天吶,上漲了900ms,接近50%,嚇得我趕緊把入口又切回了HTTP。之后,便開始踏上了提升HTTPS訪問速度的道路。(文章里的數據以iOS為例,訪問速度指的是頁面html開始請求到頁面js執行完畢的耗時)。先簡單以圖示總結下我們優化的結論:
使用SPDY協議是我們優化的第一步,SPDY(speedy)是Google很早就提出的協議,通過多路復用、請求優先級以及HTTP報頭壓縮,來提升頁面的訪問速度。但是公司貌似沒有一個統一的平台支持SPDY,在尋求了TEG小伙伴的幫助之后,他們首次支持了SPDY。SPDY在iOS的兼容性比較好,iOS 8.0以上的safari和webview都支持,覆蓋了Qzone 85%以上的iOS用戶。所以決定開啟HTTPS+SPDY試試效果。開啟SPDY之后的頁面訪問速度提升了370ms,已經非常不錯了。(在SPDY的兼容性上,iOS大部分都支持了,而安卓tbs內核支持SPDY的版本也正在灰度當中,全量之后預計也能覆蓋80%的Qzone用戶。)
根據第一次SPDY的嘗試,HTTPS的訪問速度有了300多毫秒的提升,但跟HTTP相比差距還是有400ms的差距,分析了一下,這400ms的差距主要是來自於SSL握手的耗時,根據SPDY協議,每個域名建立一個TCP連接,各自要進行一次SSL握手,每次耗時約200ms,頁面一共有兩個關鍵域名,所以HTTPS+SPDY一共比HTTP慢了400ms。根據這個分析結果,我們也有了進一步的優化方向,那就是減少SSL的耗時。
減少SSL握手的耗時,可以有三個方式:
(1)提升TCP連接的復用率;
(2)提升SSL session的復用率;
(3)減少頁面上的域名。
對於提升TCP連接的復用率,我們想了一個方法,在頁面的入口處預建了一個連接,在用戶點擊入口之前,先向h5.qzone.qq.com(頁面的域名)發起一個https請求,可以請求一個返回內容為空的url。同時,服務器端要開啟keep alive, keep alive的時間也並不是越長越好,我們使用的是60秒。這個預建的連接,不止減少了SSL握手的耗時,實際上同時也節省了TCP建立連接的時間。根據我們的實踐數據,在預建連接之后,頁面的訪問速度又提升了400ms。其中,TCP連接復用的命中率大約是75%。
對於提升SSL session 復用率,需要服務器端支持session ticket或者session cache,目前我們的STGW是支持了分布式session cache和全局session ticket key。需要說明一下的是,如果我們前面做了預建連接,復用了TCP連接的請求不會再發生SSL握手,也就不需要session復用。不過還是分享下我們SSL session復用的實踐數據。SSL session復用對大部分安卓用戶的提升非常明顯,可以把SSL握手耗時從之前的400ms優化到100多ms。而對於iOS,由於本身機器性能更好,SSL 握手時間的耗時本身就比安卓用戶少,從之前的200ms優化到100ms,提升了50%,並且iOS由於不支持session ticket,只能使用session cache,復用率比較低。SSL seesion總體的復用率大約是40%。
對於減少頁面上的域名,前面說到頁面有兩個關鍵域名,一個是h5.qzone.qq.com,一個是cdn域名qzonestyle.gtimg.cn。每個域名的SSL握手各多耗時200ms,所以另一個優化的方式就是域名收歸,把頁面收歸到只有一個域名,減少一次SSL握手的耗時。於是我們把頁面上qzonestyle.gtimg.cn的js通過代理的方式也收歸到h5.qzone.qq.com,使這個頁面只有一個關鍵域名,而h5.qzone.qq.com在入口頁面已經做了預建連接,最大程度減少了TCP和SSL的時間。域名收歸后,頁面的訪問速度提升了200ms。這種代理收歸的方式,也有另一個好處,Qzone由於業務復雜,域名非常多,通過中間層代理收歸域名,再轉發到各個業務,這樣切換HTTPS對各個業務都是透明的,可以說大大降低了我們全站切換到HTTPS的開發成本。
推薦使用的TLS協議和cipher suite,在協議和算法層面,我們也做了一些統計來進行對比。在HTTPS握手過程中記錄協議類型、加密套件、握手時間,並且將上述內容返回給頁面。頁面在記錄用戶的訪問速度之后,上報數據的同時,把上述的協議類型等數據也一同上報。
從上表可以看出來,TLS1.2協議的性能要明顯優於1.1和1.0。Cipher suite 方面,ECDHE-RSA-AES128-GCM-SHA256和ECDHE-RSA-AES128-SHA256性能最好。ECDHE-RSA-CHACHA20-POLY1305理論上講對性能提升有較大幫助,但是由於iOS不支持該類算法,所以從數據樣本上無法體現優勢。除了上面所列出來的,后續我們依然會進行協議和算法層面的更多性能分析和優化,包括TCP參數調優,握手過程優化,SSL record size適配等。
做了以上這些優化之后,HTTPS的頁面訪問速度提升了1000+ms,相比HTTP,差距已經非常小了。由於TCP復用,甚至比之前的訪問速度還要快。同時,我們還在馬不停蹄地做更多的嘗試,比如開始寫這篇文章的時候還在用SPDY,寫到結尾的時候我們已經啟用了HTTP/2(喂,難道不是因為作者是拖延症患者嗎?!)親,你還有什么理由再不啟用HTTPS?
如何測試HTTPS頁面優化結果
下面,我們來看一下如何測試HTTPS頁面優化結果
1) 點擊進入壓測大師產品首頁(http://wetest.qq.com/gaps/ )開通項目,創建測試,點擊進入URL測試。名稱和描述可以自己填寫。(圖中示例起始人數50人,每隔60秒增加50人,加到200人為上限)
輸入合適的測試標題和測試設置(此圖為動圖,橫屏觀看效果更佳)
2)新建一個客戶端請求,接口壓測包括讀寫接口,讀接口基本是GET請求,寫接口基本是POST請求。GET請求使用url請求參數,填寫測試用例的基礎數值,選擇正確的URL
配置頁面header信息
3) 隨后進行Header的配置,Header的名稱在選定URL的內,打開URL的鏈接(推薦使用chrome瀏覽器),敲擊F12並刷新頁面,選定Network-Name-Headers-Request Headers(Header的名稱與值均在內查看,如下圖所示)

查看頁面header信息
到這里,基本就完成了對https的配置過程了,是不是很簡單?下面動圖可以再回顧一下操作的流程:

gif動態圖展示操作的流程(此圖為動圖,橫屏觀看效果更佳)
WeTest壓測大師運用了沉淀十多年的內部實踐經驗總結,通過基於真實業務場景和用戶行為進行壓力測試,幫助游戲開發者發現服務器端的性能瓶頸,進行針對性的性能調優,降低服務器采購和維護成本,提高用戶留存和轉化率。
功能目前免費對外開放中,點擊http://wetest.qq.com/gaps 即可體驗!
如果對使用當中有任何疑問,歡迎聯系騰訊WeTest企業qq:800024531
