Shulou(Shulou.com)06/02 Report--

What is the real performance of http2? in view of this question, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

I. the purpose of the study

The concept of http2 has been proposed for quite a long time, and there are a lot of articles about http2 on the Internet. However, from the results of the search, most of the existing articles are biased towards the introduction of http2, and few of them are really analyzed in terms of data. In order to fill this gap, this article makes an in-depth study on the performance of http2 through a series of experiments and data analysis. Of course, due to my limited skills, the method used in the experiment will certainly have some inadequacies. If you find any problems, please put forward to me, I will certainly strive to modify and improve the method of the experiment!

Second, basic knowledge

You can refer to the following articles about the basics of HTTP2, but I won't repeat them here.

HTTP,HTTP2.0,SPDY,HTTPS, there's something you should know.

The things about HTTP 2.0.

The wonderful daily life of HTTP2.0

One-minute preview of HTTP2 features and packet capture analysis

HTTP/2 for web application developers

7 Tips for Faster HTTP/2 Performance

By learning the relevant materials, we have a general understanding of HTTP2, and then we will design a model to test the performance of HTTP2.

Third, experimental design

Set up the experimental group: set up a HTTP2 (SPDY) server that can respond to requests in the way of HTTP2. At the same time, the content size and delay time of the response can be customized.

Set up the control group: set up a HTTP1.x server to respond to the request in the way of HTTP1.x, and its custom content is the same as that of the experimental group. In addition, in order to reduce errors, the HTTP1.x server uses the https protocol.

Testing process: the client initiates requests to the experimental group server and the control group server respectively by setting the parameters such as the content size of the response, the number of requested resources, delay time, uplink and downlink bandwidth, and statistics the time required to complete the response.

Because it is necessary to upgrade the nginx version and obtain the https certificate from nginx to http2, and the operation links involved in a variety of custom settings on the server side are relatively complex, under comprehensive consideration, the scheme of using nginx as the experimental server is abandoned and the NodeJS scheme is adopted. In the initial stage of the experiment, we used the native NodeJS with node-http2 module to build the server, and then changed to use express framework with node-spdy module to build. The reason is that the processing of complex requests by native NodeJS is very complex, and the express framework has made a series of optimizations for requests and responses, which can effectively reduce human errors. In addition, the node-http2 module is not compatible with the express framework, and its performance is lower than that of the node-spdy module (General performance, node-spdy vs node-http2 # 98), while the function of the node-spdy module is basically the same as the node-http2 module.

1. Server building

The server logic of the experimental group and the control group is exactly the same, and the key codes are as follows:

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)})

The logic is to dynamically set the size and delay time of the response resource based on the parameters passed in from the client.

2. Build the client

The client can dynamically set the number of requests, the number of resources, the size of resources, and the server delay time. At the same time, with the developer tools of Chrome, you can artificially simulate different network environments. After the resource request response ends, the total elapsed time is automatically calculated. The key code is as follows:

For (let I = 0; I

< reqNum; i++) { $.get(url, function (data) { imageLoadTime(output, pageStart) }) } 客户端通过循环对资源进行多次请求，其数量可设置。每一次循环都会通过imageLoadTime更新时间，以实现时间统计的功能。 3、实验项目 a. http2性能研究 通过研究章节二的文章内容，可以把http2的性能影响因素归结于"延迟"和"请求数目"。本实验增加了"资源体积"和"网络环境"作为影响因素，下面将会针对这四项进行详细的测试实验。其中每一次实验都会重复10次，取平均值后作记录。 b. 服务端推送研究 http2还有一项非常特别的功能——服务端推送。服务端推送允许服务器主动向客户端推送资源。本实验也会针对这个功能展开研究，主要研究服务端推送的使用方法及其对性能的影响。 四、http2性能数据统计 1、延迟因素对性能的影响 2、请求数目对性能的影响 通过上一个实验，可以知道在延迟为10ms的时候，http1.x和http2的时间统计相近，故本次实验延迟时间设置为10ms。 3、资源体积对性能的影响 通过上两个实验，可以知道在延迟为10ms，资源数目为30个的时候，http1.x和http2的时间统计相近，故本次实验延迟时间设置为10ms，资源数目30个。 4、网络环境对性能的影响 通过上两个实验，可以知道在延迟为10ms，资源数目为30个的时候，http1.x和http2的时间统计相近，故本次实验延迟时间设置为10ms，资源数目30个。 五、http2服务端推送实验 本实验主要针对网络环境对服务端推送速度的影响进行研究。在本实验中，所请求/推送的资源都是一个体积为290Kb的JS文件。每一个网络环境下都会重复十次实验，取平均值后填入表格。 从上述表格可以发现一个非常奇怪的现象，在开启了网络节流以后(包括Wifi选项)，服务端推送的速度都远远比不上普通的客户端请求，但是在关闭了网络节流后，服务端推送的速度优势非常明显。在网络节流的Wifi选项中，下载速度为30M/s，上传速度为15M/s。而测试所用网络的实际下载速度却只有542K/s，上传速度只有142K/s，远远达不到网络节流Wifi选项的速度。为了分析这个原因，我们需要理解"服务端推送"的原理，以及推送过来的资源的存放位置在哪里。 普通的客户端请求过程如下图： 服务端推送的过程如下图：

As can be seen from the above schematic diagram, the server push can send the resources needed by the client to the client along with the index.html, eliminating the step of repeated requests by the client. Just because there are no operations such as initiating requests, establishing connections, etc., static resources can greatly improve the speed by pushing through the server. But here is another question: where are these pushed resources stored? After referring to this article Issue 5: HTTP/2 Push, I finally found the reason. We can delve into the schematic diagram of the server push process:

The resources pushed by the server will be placed in a place between the network and the http cache, which can be understood as "local" here. When the client has parsed the index.html, it will request this resource locally. Because the resource has been localized, the speed of this request is very fast, which is one of the advantages of server push performance. Of course, the localized resource returns a 200 status code instead of a localStorage-like 304or 200 (from cache) status code. Chrome's network throttling tool will add throttling between any "network request". Because the static resource pushed by the server also returns a 200status code, Chrome will treat it as a network request, which leads to the problems seen in the above experiments.

VI. Research conclusions

Through the above series of experiments, we can know that the performance advantages of http2 are mainly reflected in "multiplexing" and "server push". In the case of a small number of requests (about less than 30), there is little difference between the performance of http1.x and http2, and the performance advantage of http2 can only be realized when the number of requests is large and the delay is greater than 30ms. For environments with poor network conditions, the performance of http2 is higher than that of http1.x. At the same time, if the static resources are all pushed by the server, the loading speed will be greatly improved.

In practical applications, because of the advantages of http2 multiplexing, the front-end application team does not need to merge multiple files into one to generate sprite and other methods to reduce network requests. In addition, http2 has little impact on front-end development.

If the server upgrades http2, if you are using NodeJS scheme, you only need to upgrade the node-http module to node-spdy module and add the certificate. For nginx plan, you can refer to this article: Open Source NGINX 1.9.5 Released with HTTP/2 Support

To use server-side push, the response logic needs to be extended on the server side, which needs to be analyzed and implemented on a case-by-case basis.

The following is the source code required for the experiment: 1. Client page

Http1 vs http2 .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;} Http1.x

Time:

× Unfinished...

Get Response Http2

Time:

× Unfinished...

Get Response Options

Request Num:

Request Size (Mb):

Request Delay (ms):

Function imageLoadTime (id, pageStart) {let lapsed = Date.now ()-pageStart Document.getElementById (id) [xss_clean] = ((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 = 100let reqSize = 0.1let reqDelay = 300reqNumInput.value = reqNum reqSizeInput.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] [xss_clean] ='× Unfinished...' For [index] .style.color = 'pink' boxes [index] .style.borderColor =' pink' let pageStart = Date.now () for (styleI = 0; I

< reqNum; i++) { $.get(url, function (data) { console.log(server + ' data') imageLoadTime(output, pageStart) if (i === reqNum - 1) { doneTip[index][xss_clean] = '√ 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') } 2、服务端代码(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) ) 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). (err) = > {/ / http2 server port is 1002 if (err) throw new Error (err) console.log ('Http1.x server listening on port 1001.')}) the answer to the question about the real performance of http2 is shared here. I hope the above content can help you to a certain extent, if you still have a lot of doubts to be solved, you can follow the industry information channel to learn more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.