大家都在用HTTP/2了，而你还没听说过？

最新推荐文章于 2022-08-30 17:10:00 发布

weixin_34252090

最新推荐文章于 2022-08-30 17:10:00 发布

阅读量3.1k

点赞数

文章标签： javascript php 前端 ViewUI

原文链接：https://juejin.im/post/5c26fe40518825678a7bcf5b

版权

自2013年HTTP/2推出以来，HTTP/2已经得到了长足发展，浏览器平台基本提供了HTTP/2的支持，知乎，豆瓣等国内大型平台也已经部分切换到HTTP/2了。

HTTP/2优点

多路复用请求对请求划分优先级压缩HTTP头服务器推送流

HTTP/2支持情况：

chrome,firefox,ie11(win10版)都已经支持

详情可查看：caniuse.com/#search=htt…

HTTP/2缓存情况：

HTTP/2并不像我们所在网上搜索到的那样不能缓存，只是需要在服务器端配置缓存，如："expires":"Tue, 09 Oct 2018 11:27:20 GMT"。

测试方法：

在地图中应用时，加载图片有两种方式，一种是直接在img实例上设置url，让浏览器自己去触发访问图片，另一种是通过ajax加载（xhr.responseType = 'blob';，因为ajax请求过来的都是二进制字符串，所以要解析，后端读取文件和返回文件内容时同样要设置参数为binary），请求的结果通过img.src = window.URL.createObjectURL(data);解析成图片url。

根据两种加载方式，我构造了四组测试代码,并分别选取了每个图片大小为237KB和2KB的大小两组图片进行测试：

HTTP/2&&AJAX加载
HTTP/2&&浏览器加载
http1.1&&AJAX加载
http1.1&&浏览器加载

其它注意事项

使用浏览器访问的时候一定要用https协议访问，http协议访问不到

chrome允许本地https,进入chrome://flags/#allow-insecure-localhost设置其值为enabled

chrome里network内列标题上右键可打开protocol列查看请求的协议是不是h2

初次加载时会自动加载favicon.ico文件，可能会导致出错

代码实现

localhost-cert.pem

localhost-privkey.pem

index.js

const http2 = require('http2');
const fs = require('fs');

const server = http2.createSecureServer({
  key: fs.readFileSync('localhost-privkey.pem'),
  cert: fs.readFileSync('localhost-cert.pem')
});
server.on('error', (err) => console.error(err));
server.on('socketError', (err) => console.error(err));

server.on('request', (request, response) => {
    console.log('./images'+request.url);
    
    //格式必须为 binary 否则会出错'./images'+request.url
    var content =  fs.readFileSync('./images'+request.url,"binary");   
    response.writeHead(200, {
        "Content-Type": "image/png",
        "expires":"Tue, 09 Oct 2018 11:27:20 GMT",
        "Access-Control-Allow-Origin": "http://localhost:8080"
    });
    response.write(content,"binary"); //格式必须为 binary，否则会出错
    response.end();
});

server.listen(8443);
复制代码

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTTP/2测试</title>
        <script src="./http.js"></script>
    </head>
    <body>
123
<div id="imgContainer"></div>
    </body>
    <script>
        for(var i=1; i<16; i++){
            // GET('https://localhost:8443/'+i+'.png',function(response){
            //     drawImg(response);
            // });

            // GET('http://localhost:8080/http2test/images/'+i+'.png',function(response){
            //     drawImg(response);
            // });

            // var myImage = new Image();
            // myImage.src = 'https://localhost:8443/'+i+'.png';
            // document.body.appendChild(myImage);

            var myImage = new Image();
            myImage.src = 'http://localhost:8080/http2test/images/'+i+'.png';
            document.body.appendChild(myImage);

            
        }


        function drawImg(data){
            var img = new Image();
            img.src = window.URL.createObjectURL(data);
            img.onload = function(){
                window.URL.revokeObjectURL(img.src);
            }
            document.body.appendChild(img);
        }
        
    </script>
</html>
复制代码

http.js

/**
 * 发起异步请求的库
 */

 function GET(url,callback){
    var xhr = new XMLHttpRequest();
    xhr.open('GET',url,true);
    xhr.responseType = 'blob';
    xhr.onload = function(){
        if(xhr.readyState === 4 && xhr.status >= 200 && xhr.status <300 && xhr.response){
            callback(xhr.response);
        }
    }
    xhr.send();
 }
复制代码

rename.js（用于快速生成大量不同名的相同文件）

const fs = require('fs');


var path = './images';
var dirs = fs.readdirSync(path);
var n = 0;
for(let i in dirs){
    var filename = dirs[i].split('.');
    var type = filename[filename.length-1];
    if(type=='png'){
        fs.renameSync(path+'/'+dirs[i],path+'/'+n+'.png');
        n +=1;
    }else{
        fs.unlinkSync(path+'/'+dirs[i]);
    }
    console.log('处理完成：'+dirs[i]);
}
复制代码

完整代码地址：可以直接跑起来的http/2与http/1.1的对比测试

测试结果：

因为本地加载实在太快，为尽量模拟生产环境网络情况，以下测试都是使用Chrome的fast3G模式。

类型	请求方式	大（237kb）小（2kb）文件	文件数	加载时间
HTTP/2	浏览器加载	小	40	2.81s
HTTP/1.1	浏览器加载	小	40	5.89s
HTTP/2	AJAX	小	40	2.49s
HTTP/1.1	AJAX	小	40	5.82s
HTTP/2	浏览器加载	大	40	52.59s
HTTP/1.1	浏览器加载	大	40	52.57s
HTTP/2	AJAX	大	40	52.66s
HTTP/1.1	AJAX	大	40	52.58s

由此可见： _HTTP/2的优势主要体现在大量小图片的加载上，对于少量大图片的加载并不占太大优势，并且，网络条件如果非常好的时候，由于加载非常快，HTTP/2也不能体现出优势。

HTTP/2在WebGIS等地图应用上的设想：

WebGIS以瓦片技术得以普及，瓦片即请求和文件，每加载一个瓦片都需要请求一次服务器上的图片或其它格式的文件。地图瓦片大多为40kb左右的png文件，且一次加载数量都在20左右。由于http1.1本身的限制，浏览器只能同时加载6个文件(不同的浏览器策略额细微的差别)，当地图浏览窗口移动时，前端会同时发送大量AJAX请求来加载瓦片。此时浏览器就会受到阻塞，需要先等待队列前面的文件加载完成才能加载后面的文件。

HTTP/2的并发特性正好能解决此问题，也正好能对应这种场景。

高德地图部分使用了HTTP/2, 谷歌地图全部使用了HTTP/2 百度地图还没有使用HTTP/2 mapbox没有使用HTTP/2

目前唯一的问题是需要统计ie11的市场占用率，若占用率还是太高切换之后处理起来是个麻烦事。

参考：

Node.js中HTTP/2的使用：nodejs.org/api/http2.h…

PHP中HTTP/2深入分析：www.phpchina.com/article-402…

weixin_34252090

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大家都在用HTTP/2了，而你还没听说过？

自2013年HTTP/2推出以来，HTTP/2已经得到了长足发展，浏览器平台基本提供了HTTP/2的支持，知乎，豆瓣等国内大型平台也已经部分切换到HTTP/2了。HTTP/2优点多路复用请求对请求划分优先级压缩HTTP头服务器推送流HTTP/2支持情况：chrome,firefox,ie11(win10版)都已经支持详情可查看：caniuse.com/#search=htt…HT...
复制链接

扫一扫