日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
深入研究：http2的真正性能到底如何

一、研究目的

http2的概念提出已經(jīng)有相當長一段時間了，而網(wǎng)上關于關于http2的文章也一搜一大把。但是從搜索的結果來看，現(xiàn)有的文章多是偏向于對http2的介紹，鮮有真正從數(shù)據(jù)上具體分析的。這篇文章正是出于填補這塊空缺內(nèi)容的目的，通過一系列的實驗以及數(shù)據(jù)分析，對http2的性能進行深入研究。當然，由于本人技術有限，實驗所使用的方法肯定會有不足之處，如果各位看官有發(fā)現(xiàn)問題，還請向我提出，我一定會努力修改完善實驗的方法的!

二、基礎知識

關于HTTP2的基礎知識，可以參考下列幾篇文章，在這里就不進行贅述了。

  • HTTP,HTTP2.0,SPDY,HTTPS你應該知道的一些事，
  • HTTP 2.0的那些事
  • HTTP2.0的奇妙日常
  • 一分鐘預覽 HTTP2 特性和抓包分析
  • HTTP/2 for web application developers
  • 7 Tips for Faster HTTP/2 Performance

通過學習相關資料，我們已經(jīng)對HTTP2有了一個大致的認識，接下來將通過設計一個模型，對HTTP2的性能進行實驗測試。

三、實驗設計

設置實驗組：搭建一個HTTP2(SPDY)服務器，能夠以HTTP2的方式響應請求。同時，響應的內(nèi)容大小，響應的延遲時間均可自定義。

設置對照組：搭建一個HTTP1.x服務器，以HTTP1.x的方式響應請求，其可自定義內(nèi)容同實驗組。另外為了減少誤差，HTTP1.x服務器使用https協(xié)議。

測試過程：客戶端通過設置響應的內(nèi)容大小、請求資源的數(shù)量、延遲時間、上下行帶寬等參數(shù)，分別對實驗組服務器和對照組服務器發(fā)起請求，統(tǒng)計響應完成所需時間。

由于nginx切換成http2需要升級nginx版本以及取得https證書，且在服務器端的多種自定義設置所涉及的操作環(huán)節(jié)相對復雜，綜合考慮之下放棄使用nginx作為實驗用服務器的方案，而是采用了NodeJS方案。在實驗的初始階段，使用了原生的NodeJS搭配node-http2模塊進行服務器搭建，后來改為了使用express框架搭配node-spdy模塊搭建。原因是，原生NodeJS對于復雜請求的處理非常復雜，express框架對請求、響應等已經(jīng)做了一系列的優(yōu)化，可以有效減少人為的誤差。另外node-http2模塊無法與express框架兼容，同時它的性能較之node-spdy模塊也更低(General performance, node-spdy vs node-http2 #98)，而node-spdy模塊的功能與node-http2模塊基本一致。

1、服務器搭建

實驗組和對照組的服務器邏輯完全一致，關鍵代碼如下：

 
 
      
  
  1. app.get('/option/?', (req, res) => { 
    2.   
  
  2.     allow(res) 
    3.   
  
  3.     let size = req.query['size'] 
    4.   
  
  4.     let delay = req.query['delay'] 
    5.   
  
  5.     let buf = new Buffer(size * 1024 * 1024) 
    6.   
  
  6.     setTimeout(() => { 
    7.   
  
  7.         res.send(buf.toString('utf8')) 
    8.   
  
  8.     }, delay) 
    9.   
  
  9. })  
    10.

其邏輯是，根據(jù)從客戶端傳入的參數(shù)，動態(tài)設置響應資源的大小和延遲時間。

2、客戶端搭建

客戶端可動態(tài)設置請求的次數(shù)、資源的數(shù)目、資源的大小和服務器延遲時間。同時搭配Chrome的開發(fā)者工具，可以人為模擬不同網(wǎng)絡環(huán)境。在資源請求響應結束后，會自動計算總耗時時間。關鍵代碼如下：

 
 
      
  
  1. for (let i = 0; i < reqNum; i++) { 
    2.   
  
  2.     $.get(url, function (data) { 
    3.   
  
  3.         imageLoadTime(output, pageStart) 
    4.   
  
  4.     }) 
    5.   
  
  5. }  
    6.

客戶端通過循環(huán)對資源進行多次請求，其數(shù)量可設置。每一次循環(huán)都會通過imageLoadTime更新時間，以實現(xiàn)時間統(tǒng)計的功能。

3、實驗項目

a. http2性能研究

通過研究章節(jié)二的文章內(nèi)容，可以把http2的性能影響因素歸結于“延遲”和“請求數(shù)目”。本實驗增加了“資源體積”和“網(wǎng)絡環(huán)境”作為影響因素，下面將會針對這四項進行詳細的測試實驗。其中每一次實驗都會重復10次，取平均值后作記錄。

b. 服務端推送研究

http2還有一項非常特別的功能——服務端推送。服務端推送允許服務器主動向客戶端推送資源。本實驗也會針對這個功能展開研究，主要研究服務端推送的使用方法及其對性能的影響。

四、http2性能數(shù)據(jù)統(tǒng)計

1、延遲因素對性能的影響

2、請求數(shù)目對性能的影響

通過上一個實驗，可以知道在延遲為10ms的時候，http1.x和http2的時間統(tǒng)計相近，故本次實驗延遲時間設置為10ms。

3、資源體積對性能的影響

通過上兩個實驗，可以知道在延遲為10ms，資源數(shù)目為30個的時候，http1.x和http2的時間統(tǒng)計相近，故本次實驗延遲時間設置為10ms，資源數(shù)目30個。

4、網(wǎng)絡環(huán)境對性能的影響

通過上兩個實驗，可以知道在延遲為10ms，資源數(shù)目為30個的時候，http1.x和http2的時間統(tǒng)計相近，故本次實驗延遲時間設置為10ms，資源數(shù)目30個。

五、http2服務端推送實驗

本實驗主要針對網(wǎng)絡環(huán)境對服務端推送速度的影響進行研究。在本實驗中，所請求/推送的資源都是一個體積為290Kb的JS文件。每一個網(wǎng)絡環(huán)境下都會重復十次實驗，取平均值后填入表格。

從上述表格可以發(fā)現(xiàn)一個非常奇怪的現(xiàn)象，在開啟了網(wǎng)絡節(jié)流以后(包括Wifi選項)，服務端推送的速度都遠遠比不上普通的客戶端請求，但是在關閉了網(wǎng)絡節(jié)流后，服務端推送的速度優(yōu)勢非常明顯。在網(wǎng)絡節(jié)流的Wifi選項中，下載速度為30M/s，上傳速度為15M/s。而測試所用網(wǎng)絡的實際下載速度卻只有542K/s，上傳速度只有142K/s，遠遠達不到網(wǎng)絡節(jié)流Wifi選項的速度。為了分析這個原因，我們需要理解“服務端推送”的原理，以及推送過來的資源的存放位置在哪里。

普通的客戶端請求過程如下圖：

服務端推送的過程如下圖：

從上述原理圖可以知道，服務端推送能把客戶端所需要的資源伴隨著index.html一起發(fā)送到客戶端，省去了客戶端重復請求的步驟。正因為沒有發(fā)起請求，建立連接等操作，所以靜態(tài)資源通過服務端推送的方式可以極大地提升速度。但是這里又有一個問題，這些被推送的資源又是存放在哪里呢?參考了這篇文章Issue 5: HTTP/2 Push以后，終于找到了原因。我們可以把服務端推送過程的原理圖深入一下：

服務端推送過來的資源，會統(tǒng)一放在一個網(wǎng)絡與http緩存之間的一個地方，在這里可以理解為“本地”。當客戶端把index.html解析完以后，會向本地請求這個資源。由于資源已經(jīng)本地化，所以這個請求的速度非常快，這也是服務端推送性能優(yōu)勢的體現(xiàn)之一。當然，這個已經(jīng)本地化的資源會返回200狀態(tài)碼，而非類似localStorage的304或者200 (from cache)狀態(tài)碼。Chrome的網(wǎng)絡節(jié)流工具，會在任何“網(wǎng)絡請求”之間加入節(jié)流，由于服務端推送活來的靜態(tài)資源也是返回200狀態(tài)碼，所以Chrome會把它當作網(wǎng)絡請求來處理，于是導致了上述實驗所看到的問題。

六、研究結論

通過上述一系列的實驗，我們可以知道http2的性能優(yōu)勢集中體現(xiàn)在“多路復用”和“服務端推送”上。對于請求數(shù)目較少(約小于30個)的情況下，http1.x和http2的性能差異不大，在請求數(shù)目較多且延遲大于30ms的情況下，才能體現(xiàn)http2的性能優(yōu)勢。對于網(wǎng)絡狀況較差的環(huán)境，http2的性能也高于http1.x。與此同時，如果把靜態(tài)資源都通過服務端推送的方式來處理，加載速度會得到更加巨大的提升。

在實際的應用中，由于http2多路復用的優(yōu)勢，前端應用團隊無須采取把多個文件合并成一個，生成雪碧圖之類的方法減少網(wǎng)絡請求。除此之外，http2對于前端開發(fā)的影響并不大。

服務端升級http2，如果是使用NodeJS方案，只需要把node-http模塊升級為node-spdy模塊，并加入證書即可。nginx方案的話可以參考這篇文章：Open Source NGINX 1.9.5 Released with HTTP/2 Support

若要使用服務端推送，則在服務端需要對響應的邏輯進行擴展，這個需要視情況具體分析實施。

七、后記

紙上得來終覺淺，絕知此事要躬行。如果不是真正的設計實驗、進行實驗，我可能根本不會知道原來http2也有坑，原來使用Chrome做調(diào)試的時候也有需要注意的地方。

希望這篇文章能夠?qū)ρ芯縣ttp2的同學有些許幫助吧，如文章開頭所說，如果你發(fā)現(xiàn)我的實驗設計有任何問題，或者你想到了更好的實驗方式，也歡迎向我提出，我一定會認真研讀你的建議的!

下面附送實驗所需源碼：1、客戶端頁面

 
 
      
  
  1.  
    2.   
  
  2.  
    3.   
  
  3.  
    4.   
  
  4.  
    5.   
  
  5.  
    6.   
  
  6.     
    7.   
  
  7.    http1 vs http2 
    8.   
  
  8.     
    9.   
  
  9.     
    10.   
  
  10.  
    11.   
  
  11.  
    12.   
  
  12.     
    13.   
  
  13.        
    Http1.x
     
    14.   
  
  14.        
    Time: 
     
    15.   
  
  15.        × Unfinished...
     
    16.   
  
  16.        Get Response 
    17.   
  
  17.    
 
  •  
  •     
  •        

    Http2

     
  •        

    Time: 

     
  •        × Unfinished...

     
  •        Get Response 
  •    
    •  
  •  
  •     
  •        

    Options

     
  •        

    Request Num: 

     
  •        

    Request Size (Mb): 

     
  •        

    Request Delay (ms): 

     
  •    
    •  
  •  
  •     
  •  
  •   

    • 2、服務端代碼(http1.x與http2僅有一處不同)

     
 
        
  
    1. const http = require('https') // 若為http2則把'https'模塊改為'spdy'模塊 
      2.   
  
    2. const url = require('url') 
      3.   
  
    3. const fs = require('fs') 
      4.   
  
    4. const express = require('express') 
      5.   
  
    5. const path = require('path') 
      6.   
  
    6.  
      7.   
  
    7. const app = express() 
      8.   
  
    8.  
      9.   
  
    9. const options = { 
      10.   
  
    10.   key: fs.readFileSync(`${__dirname}/server.key`), 
      11.   
  
    11.   cert: fs.readFileSync(`${__dirname}/server.crt`) 
      12.   
  
    12. } 
      13.   
  
    13.  
      14.   
  
    14. const allow = (res) => { 
      15.   
  
    15.   res.header("Access-Control-Allow-Origin", "*") 
      16.   
  
    16.   res.header("Access-Control-Allow-Headers", "X-Requested-With") 
      17.   
  
    17.   res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS") 
      18.   
  
    18. } 
      19.   
  
    19.  
      20.   
  
    20. app.set('views', path.join(__dirname, 'views')) 
      21.   
  
    21. app.set('view engine', 'ejs') 
      22.   
  
    22. app.use(express.static(path.join(__dirname, 'static'))) 
      23.   
  
    23.  
      24.   
  
    24. app.get('/option/?', (req, res) => { 
      25.   
  
    25.     allow(res) 
      26.   
  
    26.     let size = req.query['size'] 
      27.   
  
    27.     let delay = req.query['delay'] 
      28.   
  
    28.     let buf = new Buffer(size * 1024 * 1024) 
      29.   
  
    29.     setTimeout(() => { 
      30.   
  
    30.         res.send(buf.toString('utf8')) 
      31.   
  
    31.     }, delay) 
      32.   
  
    32. }) 
      33.   
  
    33.  
      34.   
  
    34. http.createServer(options, app).listen(1001, (err) => { // http2服務器端口為1002 
      35.   
  
    35.     if (err) throw new Error(err) 
      36.   
  
    36.     console.log('Http1.x server listening on port 1001.') 
      37.   
  
    37. })  
      38.

    當前標題：深入研究：http2的真正性能到底如何
    標題網(wǎng)址：http://www.5511xx.com/article/dpieipg.html