目录

1. 观察百度首页的tcp连接
2. 测试chrome并行的tcp连接数量
3. 连接相关的头参数
4. http2中的tcp连接

0. 概述

长连接：一次请求+响应结束后不会关闭连接。
短连接：一次请求+响应结束后就关闭连接。

1. 观察百度首页的tcp连接

1. 选中Disable cache不使用本地缓存（避免你使用之前缓存的百度首页）。
2. 右键勾选Connection ID。
3. 每一个Connection ID都是一个tcp连接，同一个域名会复用同一条tcp连接，但是在HTTP1.1中tcp是同步的，因此请求时会先检查当前的tcp是否能用，如果不能用就创建新的，Chrome中在一个域名中最多会创建6条tcp。
4. 只有域名相同的情况，才会复用tcp，可以观察下图中的37725
   

2. 测试chrome并行的tcp连接数量

• 完成html部分

1. 随意找张图片放入目录中。
2. 在html中加载7张图片，url不同。

<img src="image1.jpg" alt="">
<img src="image2.jpg" alt=""> 
<img src="image3.jpg" alt=""> 
<img src="image4.jpg" alt="">
<img src="image5.jpg" alt=""> 
<img src="image6.jpg" alt="">
<img src="image7.jpg" alt="">  

• 完成js部分

const http = require('http')
const fs = require('fs')

const port = 9000

http.createServer(function(request, response) {
    const html = fs.readFileSync('index.html', 'utf-8')
    // 图片直接二进制就行
    const img = fs.readFileSync('image.jpg')
    
    // 如果是根目录就返回html，否则返回图片
    if (request.url === '/') {
        response.writeHead(200, {
            'Content-Type': 'text/html',
        })
        response.end(html)
    } else {
        response.writeHead(200, {
            'Content-Type': 'image/jpg',
        })
        response.end(img)
    }
}).listen(port)

console.log('server listen ', port)

• 测试

1. 先将网速设为Fast 3G，保证每次发图片时，之前的tcp还被使用中。
2. 可以看到前6张图片使用的tcp都不同，最后一张图片使用的是第一个图片。

3. localhost也为同一个tcp的原因是，必须先请求服务端，获取到html之后才能加载图片，这时候第一个tcp链接已经空闲了，可以直接使用。

   
   

3. 连接相关的头参数

• 概述

头参数Connection有两个值keep-alive和close，默认情况下是keep-alive。

• 修改js

在发送图片时关闭长连接。

response.writeHead(200, {
    'Content-Type': 'image/jpg',
    'Connection': 'close'
})
response.end(img)

• 测试

1. 每张图片都是不同的tcp连接。

2. 但是主页的tcp连接仍是复用的，因为我们只在发送图片的响应头中设置了关闭长连接，同样的在主页中也设置同样的参数，这个tcp连接也不会被复用了。

   
   

4. http2中的tcp连接

1. 访问谷歌翻译（记得降低网速），谷歌已经使用http2.x的版本，国内例如上例中的百度使用的仍是http1.1的版本。

2. 观察图片发现同一个域名时只会有一个tcp连接。