3-7 HTTP长连接
2018-12-05 本文已影响0人
伯纳乌的追风少年
在HTTP/1.0中，默认使用的是短连接。即浏览器和服务器每进行一次HTTP操作，就建立一次连接，但任务结束就中断连接。若客户端浏览器访问的某个HTML或其他类型的 Web页中包含有其他的Web资源，如JavaScript文件、图像文件、CSS文件等；当浏览器每遇到这样一个Web资源，就会建立一个HTTP会话。
从 HTTP/1.1起，默认使用长连接，用以保持连接特性。使用长连接的HTTP协议，会在响应头有加入这行代码：Connection:keep-alive
在使用长连接的情况下，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的 TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件中设定这个时间。
HTTP协议的长连接和短连接，实质上是TCP协议的长连接和短连接。
如图可以通过chrome右键新增connectionID来判断资源是否使用的同一个连接拓展，chrome的devTools中，信息列可以开启priority和connectionID来查看请求资源的请求优先级别和采用的连接
connectionID
为了优化网页的加载速度，可以考虑从waterfall进行分析入手，首先waterfall越短越好（表示请求的资源越少）；waiting(TTFB) 时间越短越好（从服务器端响应进行优化）；重要资源从waterfall中越左边越好（即请求优先级的不同）
参考链接：https://www.cnblogs.com/shengulong/p/7449927.html
demo
//server.js
const http=require('http');
const fs=require('fs')
http.createServer(function(request,response){
const img=fs.readFileSync('test.jpg')
if (request.url==='/') {
const html=fs.readFileSync('test.html','utf8')
response.writeHead(200,{
'Content-Type':'text/html',
'Set-Cookie':['id=123;max-age=10','abc=456;HttpOnly','test=789;domain=test.com']
})
response.end(html)
}else{
response.writeHead(200,{
'Content-Type':'image/jpg',
})
response.end(img)
}
}).listen(8888)
console.log('server listening on 8888')
//test.html
<html>
<head>
<title>3-7 HTTP长连接</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<img src="/test1.jpg">
<img src="/test2.jpg">
<img src="/test3.jpg">
<img src="/test4.jpg">
<img src="/test5.jpg">
<img src="/test6.jpg">
<img src="/test11.jpg">
<img src="/test12.jpg">
<img src="/test13.jpg">
<img src="/test14.jpg">
<img src="/test15.jpg">
<img src="/test16.jpg">
<img src="/test21.jpg">
<img src="/test22.jpg">
<img src="/test23.jpg">
<img src="/test24.jpg">
<img src="/test25.jpg">
<img src="/test26.jpg">
</body>
<script type="text/javascript">
</script>
</html>
默认：'Connection':'keep-alive'
如图所示，其中有六个tcp连接分别被复用了三次
当我们设置'Connection':'close'时：
const http=require('http');
const fs=require('fs')
http.createServer(function(request,response){
const img=fs.readFileSync('test.jpg')
if (request.url==='/') {
const html=fs.readFileSync('test.html','utf8')
response.writeHead(200,{
'Content-Type':'text/html',
'Set-Cookie':['id=123;max-age=10','abc=456;HttpOnly','test=789;domain=test.com']
})
response.end(html)
}else{
response.writeHead(200,{
'Content-Type':'image/jpg',
'Connection':'close'
})
response.end(img)
}
}).listen(8888)
console.log('server listening on 8888')
'Connection':'close'
如图所示：每个资源都创建了一条tcp连接
总结
长链接可以设置timeout
同个tcp内是有先后顺序的
chrome浏览器可以并发6个tcp
Connection：keep-alive（长）、close（短）
http2:信道复用 ，同域下，tcp并发发送http请求
http请求是在tcp上发送的，一个tcp可以发送多个http，http1.1是阻塞的
