3-7 HTTP长连接

作者: 伯纳乌的追风少年 | 来源:发表于2018-12-05 09:21 被阅读0次

3-7 HTTP长连接
http的长连接和短连接(TCP连接)
http 长连接
Http长连接
分析 HTTP，TCP 的长连接和短连接以及 sock
HTTP长连接和短连接
RestTemplate Httpclient连接池
HTTP长连接、短连接
HTTP长连接、短连接
HTTP 长连接和短连接

在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是阻塞的