# 传输加载优化
传输优化主要是对主流的Nginx配置修改。
# 启动压缩 Gzip
#开启gzip压缩
#gzip on;
#设置允许压缩的页面最小字节数
#gzip_min_length 1k;
#申请4个单位为16K的内存作为压缩结果流缓存
#gzip_buffers 4 16k;
#设置识别http协议的版本，默认为1.1
#gzip_http_version 1.1;
#指定gzip压缩比，1-9数字越小，压缩比越小，速度越快
#gzip_comp_level 6;
#指定压缩的类型
#gzip_types text/plain application/x-javascript text/css application/xml;
#让前端的缓存服务器进过gzip压缩的页面
#gzip_vary on;
#对已经压缩过的资源直接利用
#gzip_static on;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Keep-Alive
Keep-Alive 在Http1.1 默认是开启的,可以在 Response Header 中可以看到 Connection: keep-alive
keepalive_timeout 65 # 保持连接的时间，也叫超时时间，单位秒
keepalive_request 100 # 最大连接上限
1
2
2
# HTTP资源缓存
提高重复访问时资源加载的速度
# 缓存方案
只做配置介绍，详细介绍可以查看http中的介绍
Cache-Control/Expires
Last-Modified/If-Modify-Since
Etag/If-None-Match
# Cache-Control/Expires （强缓存）
location / {
#html 不做缓存
if($request_filename ~* .*\.(?:htm|html)$)
{
add_header Cache-Control "no-cache, must-revalidate";
add_header "Pragma" "no-cache";
add_header "Expires" "0";
}
#js|css 缓存7天
if($request_filename ~* .*\.(?:js|css)$)
{
expires 7d;
}
if($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|sbgz|mp4|ogg|ogv|webm)$)
{
expires 7d;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Etag/If-None-Match（协商缓存）
Etag nginx默认是开启的
若未命中强缓存，则浏览器会将请求发送至服务器。服务器根据 http 头信息中的 Last-Modified/If-Modify-Since或Etag/If-None-Match来判断是否命中协商缓存。如果命中，则http返回码为304,浏览器从缓存中加载资源。
Etag 返回的是一个特殊标识（一般都是 hash 生成）. Etag 可以保证每一个资源是唯一的,资源变化都会导致 Etag变化。ETag值的变更则说明资源状态已经被修改。服务器根据浏览器上发送的 If-None-Match 值来判断是否命中缓存。命中缓存返回 304,不命中返回新资源 200
# Service Workers
create-react-app脚手架默认会实现，webpack配置workbox-webpack-plugin可以在webpack文章中看到
加速重复访问
离线支持
注意
延长了首屏时间，但页面总加载时间减少
兼容性
只能在localhost或https下使用
# Http2的提升
# 优点
二进制传输
请求相应多路复用
Server push
# 注意
只能工作在HTTPS下
适用较高的请求量
# nginx开启http2
#server {
# 添加 http2
# listen 443 ssl http2
# server_name localhost;
# ssl on;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 获取自签名证书
openssl genrsa -des3 -passout pass:x -out server.pass.key 2048
openssl rsa -passin pass:x -in server.pass.key -out server.key
openssl req -new -key server.key -out server.csr
openssl x509 -req -sha256 -days 3650 -in server.csr -signkey server.key -out server.crt
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# SSR
详见 SSR 服务端渲染
加速首屏加载
更好的SEO
# 是否使用SSR
架构 - 大型，动态页面，面向公众用户
搜索引擎排名很重要