这是我第3篇简书。
虽然做了一些项目了，但是对http整个过程还是有点模糊（相信很多同学也不一定说的出来）。
良好的习惯中有一点就是事后多整理[微笑]，那么我来梳理下。
一次完整的http请求过程
详细见大神的博客：
http://www.blogjava.net/zjusuyong/articles/304788.html
一、传统的页面请求方式
下面是一个非常简单的 HTML 网页文件index.html。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>hello world</h1>
<img src="head.png">
</body>
</html>
这个网页包含一张样式表style.css和一个图片文件head.png。为了渲染这个网页，浏览器会发出三个请求。
这些信息通过请求头（header）发送给服务器。
1.HTTP请求格式主要有四部分组成，分别是：请求行、请求头、空行、消息体，每部分内容占一行。
2.服务器接收处理完请求后返回一个HTTP相应消息给客户端。HTTP响应消息的格式包括：状态行、响应头、空行、消息体。每部分内容占一行。
- 第一个请求是index.html。
GET /index.html HTTP/1.1
- 第二、三个请求： 服务器收到第一个请求，就把index.html发送给浏览器。浏览器发现里面包含了样式表和图片，于是再发出两个请求。
GET /style.css HTTP/1.1 和 GET /head.png HTTP/1.1
这就是传统的网页请求方式。它有两个问题，一是至少需要两轮 HTTP 通信，二是收到样式文件之前，网页都会显示一片空白，这个阶段一旦超过2秒，用户体验就会非常不好（网很慢的话）。
二、传统方式的改进
①减少 HTTP 请求：减少网站上的对象数量；最小化网站上的重定向数量；使用css sprites技术；将js代码和css样式分别合并到一个共享的文件等。
②压缩图片，图片改成 Base64 编码的Data URL等。
③预加载（preload），延迟加载。
一种解决办法就是把外部资源合并在网页文件里面，减少 HTTP 请求。比如，把样式表的内容写在<style>标签之中，把图片改成 Base64 编码的Data URL。
<link rel="preload" href="/styles.css" as="style">
<link rel="preload" href="/head.png" as="image">
对于上例来说，preload命令并没有什么帮助。但是，如果前一个网页就使用这个命令，预加载后一个网页需要的资源，那么用户打开后一个网页时，就会感觉速度飞快。
这两种方法都有缺点。第一种方法虽然减少了 HTTP 请求，但是把不同类型的代码合并在一个文件里，违反了分工原则。第二种方法只是提前了下载时间，并没有减少 HTTP 请求。
三、HTTP/2 服务器推送
服务器推送（server push）指的是，还没有收到浏览器的请求，服务器就把各种资源推送给浏览器。需要自己设置好。
比如，浏览器只请求了index.html，但是服务器把index.html、style.css、head.png全部发送给浏览器。这样的话，只需要一轮HTTP 通信，浏览器就得到了全部资源，提高了性能。
原来的请求头信息（header）是直接传输文本，HTTP/2协议中是压缩后传输。原来是同一个 TCP 连接里面，上一个回应（response）发送完了，服务器才能发送下一个，现在可以多个回应一起发送。
四、Nginx
Nginx (engine x) 是一个高性能的HTTP和反向代理服务器。特点是占有内存少，并发能力强。
首先要做好一个Nginx容器，具体配置方法以后再写。
下面简述一下用nginx来改善上述例子：
server {
listen 443 ssl http2;
server_name localhost;
ssl on;
ssl_certificate /etc/nginx/certs/example.crt;
ssl_certificate_key /etc/nginx/certs/example.key;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
root /usr/mytest/nginx/html;
index index.html index.htm;
http2_push /style.css; //重点在这里！推送请求
http2_push /head.png; //推送请求
}
}
意思是，将 443 端口的部分改成上面的样子，如果用户请求根路径/，就推送style.css和head.png。
启动容器：
$ docker container run \
--rm \
--name mynginx \
--volume "$PWD/html":/usr/mytest/nginx/html \
--volume "$PWD/conf":/etc/nginx \
-p 127.0.0.2:8080:80 \
-p 127.0.0.2:8081:443 \
-d \
nginx
打开浏览器，访问 https://127.0.0.2:8081 。浏览器会提示证书不安全，继续访问。打开"开发者工具"，切换到 Network 面板，可以看到只发送了一次请求，style.css和head.png都是推送过来的。
五、Apache 实现
配置文件httpd.conf或者.htaccess里面打开服务器推送
<FilesMatch "\index.html$">
Header add Link "</styles.css>; rel=preload; as=style"
Header add Link "</head.png>; rel=preload; as=image"
</FilesMatch>
六、后端实现
后端应用产生 HTTP 回应的头信息Link命令。服务器发现有这个头信息，就会进行服务器推送。
Link: </styles.css>; rel=preload; as=style,</head.png>; rel=preload; as=image
最后：
但是，服务器推送有一个很麻烦的问题。
需要推送的资源文件，如果浏览器已经有缓存，推送就是浪费带宽。即使推送的文件版本更新，浏览器也会优先使用本地缓存。
一种解决办法是，只对第一次访问的用户开启服务器推送。下面是 Nginx 官方给出的示例，根据 Cookie 判断是否为第一次访问。
server {
listen 443 ssl http2 default_server;
ssl_certificate ssl/certificate.pem;
ssl_certificate_key ssl/key.pem;
root /var/www/html;
http2_push_preload on;
location = /demo.html {
add_header Set-Cookie "session=1";
add_header Link $resources;
}
}
map $http_cookie $resources {
"~*session=1" "";
default "</style.css>; as=style; rel=preload";
}
网友评论