http2的真正性能到底如何，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

合陽(yáng)ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書(shū)合作）期待與您的合作！

一、研究目的

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

二、基礎(chǔ)知識(shí)

關(guān)于HTTP2的基礎(chǔ)知識(shí)，可以參考下列幾篇文章，在這里就不進(jìn)行贅述了。

• HTTP,HTTP2.0,SPDY,HTTPS你應(yīng)該知道的一些事，

• HTTP 2.0的那些事

• HTTP2.0的奇妙日常

• 一分鐘預(yù)覽 HTTP2 特性和抓包分析

• HTTP/2 for web application developers

• 7 Tips for Faster HTTP/2 Performance

通過(guò)學(xué)習(xí)相關(guān)資料，我們已經(jīng)對(duì)HTTP2有了一個(gè)大致的認(rèn)識(shí)，接下來(lái)將通過(guò)設(shè)計(jì)一個(gè)模型，對(duì)HTTP2的性能進(jìn)行實(shí)驗(yàn)測(cè)試。

三、實(shí)驗(yàn)設(shè)計(jì)

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

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

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

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

1、服務(wù)器搭建

實(shí)驗(yàn)組和對(duì)照組的服務(wù)器邏輯完全一致，關(guān)鍵代碼如下：

app.get('/option/?', (req, res) => {     allow(res)     let size = req.query['size']     let delay = req.query['delay']     let buf = new Buffer(size * 1024 * 1024)     setTimeout(() => {         res.send(buf.toString('utf8'))     }, delay) })

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

2、客戶端搭建

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

for (let i = 0; i < reqNum; i++) {     $.get(url, function (data) {         imageLoadTime(output, pageStart)     }) }

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

3、實(shí)驗(yàn)項(xiàng)目

a. http2性能研究

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

b. 服務(wù)端推送研究

http2還有一項(xiàng)非常特別的功能——服務(wù)端推送。服務(wù)端推送允許服務(wù)器主動(dòng)向客戶端推送資源。本實(shí)驗(yàn)也會(huì)針對(duì)這個(gè)功能展開(kāi)研究，主要研究服務(wù)端推送的使用方法及其對(duì)性能的影響。

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

1、延遲因素對(duì)性能的影響

   

2、請(qǐng)求數(shù)目對(duì)性能的影響

通過(guò)上一個(gè)實(shí)驗(yàn)，可以知道在延遲為10ms的時(shí)候，http1.x和http2的時(shí)間統(tǒng)計(jì)相近，故本次實(shí)驗(yàn)延遲時(shí)間設(shè)置為10ms。

 

 

3、資源體積對(duì)性能的影響

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

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

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

 

五、http2服務(wù)端推送實(shí)驗(yàn)

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

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

普通的客戶端請(qǐng)求過(guò)程如下圖：

服務(wù)端推送的過(guò)程如下圖：

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

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

六、研究結(jié)論

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

在實(shí)際的應(yīng)用中，由于http2多路復(fù)用的優(yōu)勢(shì)，前端應(yīng)用團(tuán)隊(duì)無(wú)須采取把多個(gè)文件合并成一個(gè)，生成雪碧圖之類的方法減少網(wǎng)絡(luò)請(qǐng)求。除此之外，http2對(duì)于前端開(kāi)發(fā)的影響并不大。

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

若要使用服務(wù)端推送，則在服務(wù)端需要對(duì)響應(yīng)的邏輯進(jìn)行擴(kuò)展，這個(gè)需要視情況具體分析實(shí)施。

下面附送實(shí)驗(yàn)所需源碼：1、客戶端頁(yè)面

<!-- http1_vs_http2.html -->  <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>http1 vs http2</title>    <script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>    <style>        .box {            float: left;            width: 200px;            margin-right: 100px;            margin-bottom: 50px;            padding: 20px;            border: 4px solid pink;            font-family: Microsoft Yahei;        }        .box h3 {            margin: 5px 0;        }        .box .done {            color: pink;            font-weight: bold;            font-size: 18px;        }        .box button {            padding: 10px;            display: block;            margin: 10px 0;        }    </style> </head> <body>    <div class="box">        <h3>Http1.x</h3>        <p>Time: <span id="output-http1"></span></p>        <p class="done done-1">&times; Unfinished...</p>        <button class="btn-1">Get Response</button>    </div>     <div class="box">        <h3>Http2</h3>        <p>Time: <span id="output-http2"></span></p>        <p class="done done-1">&times; Unfinished...</p>        <button class="btn-2">Get Response</button>    </div>     <div class="box">        <h3>Options</h3>        <p>Request Num: <input type="text" id="req-num"></p>        <p>Request Size (Mb): <input type="text" id="req-size"></p>        <p>Request Delay (ms): <input type="text" id="req-delay"></p>    </div>     <script>        function imageLoadTime(id, pageStart) {          let lapsed = Date.now() - pageStart;          document.getElementById(id).innerHTML = ((lapsed) / 1000).toFixed(2) + 's'        }                let boxes = document.querySelectorAll('.box')        let doneTip = document.querySelectorAll('.done')        let reqNumInput = document.querySelector('#req-num')        let reqSizeInput = document.querySelector('#req-size')        let reqDelayInput = document.querySelector('#req-delay')         let reqNum = 100        let reqSize = 0.1        let reqDelay = 300         reqNumInput.value = reqNum        reqSizeInput.value = reqSize        reqDelayInput.value = reqDelay         reqNumInput.onblur = function () {            reqNum = reqNumInput.value        }         reqSizeInput.onblur = function () {            reqSize = reqSizeInput.value        }         reqDelayInput.onblur = function () {            reqDelay = reqDelayInput.value        }         function clickEvents(index, url, output, server) {            doneTip[index].innerHTML = '&times; Unfinished...'            doneTip[index].style.color = 'pink'            boxes[index].style.borderColor = 'pink'            let pageStart = Date.now()            for (let i = 0; i < reqNum; i++) {                $.get(url, function (data) {                    console.log(server + ' data')                    imageLoadTime(output, pageStart)                    if (i === reqNum - 1) {                        doneTip[index].innerHTML = '&radic; Finished!'                        doneTip[index].style.color = 'lightgreen'                        boxes[index].style.borderColor = 'lightgreen'                    }                })            }        }         document.querySelector('.btn-1').onclick = function () {            clickEvents(0, 'https://localhost:1001/option?size=' + reqSize + '&delay=' + reqDelay, 'output-http1', 'http1.x')        }         document.querySelector('.btn-2').onclick = function () {            clickEvents(1, 'https://localhost:1002/option?size=' + reqSize + '&delay=' + reqDelay, 'output-http2', 'http2')        }    </script> </body> </html>

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

const http = require('https') // 若為http2則把'https'模塊改為'spdy'模塊 const url = require('url') const fs = require('fs') const express = require('express') const path = require('path')  const app = express()  const options = {   key: fs.readFileSync(`${__dirname}/server.key`),   cert: fs.readFileSync(`${__dirname}/server.crt`) }  const allow = (res) => {   res.header("Access-Control-Allow-Origin", "*")   res.header("Access-Control-Allow-Headers", "X-Requested-With")   res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS") }  app.set('views', path.join(__dirname, 'views')) app.set('view engine', 'ejs') app.use(express.static(path.join(__dirname, 'static')))  app.get('/option/?', (req, res) => {     allow(res)     let size = req.query['size']     let delay = req.query['delay']     let buf = new Buffer(size * 1024 * 1024)     setTimeout(() => {         res.send(buf.toString('utf8'))     }, delay) })  http.createServer(options, app).listen(1001, (err) => { // http2服務(wù)器端口為1002     if (err) throw new Error(err)     console.log('Http1.x server listening on port 1001.') })

關(guān)于http2的真正性能到底如何問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

本文標(biāo)題：http2的真正性能到底如何
網(wǎng)站路徑：http://www.chinadenli.net/article28/jdhsjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、商城網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站收錄、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)