前端性能优化(五)传输加载优化

一.启动压缩Gzip

1.在传输阶段进行体积压缩,可高达百分之90%

2.如何配置Nginx启用Gzip

如何配置Nginx启用Gzip

首先 下载homebrew
然后 安装nginx brew install nginx
然后 sudo brew services start nginx 开启服务
然后 vim /usr/local/etc/nginx/nginx.conf 查看配置文件

会查看到默认端口8080
前端性能优化(五)传输加载优化

前端性能优化(五)传输加载优化
然后把打包完之后的文件复制到用户名下一级的一个文件夹中
然后修改location 的root定位到打包后的文件夹中
前端性能优化(五)传输加载优化

然后把 有关gzip前面的#号去掉
前端性能优化(五)传输加载优化

第一个 on 代表打开gzip压缩
第二个 min -length 至少多大的文件蔡启动压缩
第三个 comp level 压缩等级 6即可 不要太干 要不然gpu负担太大
第四个 types 要压缩的文件类型

二.使用keep-alive

http 1.1 新增 长连接

请求头:Connection:keep-alive

举个例子:
在network中第一个请求的时间有一个initial connection的时间消耗即TCP连接消耗的时间:
前端性能优化(五)传输加载优化
而在接下来同一台服务器的请求中,就没有initial connection的时间消耗
前端性能优化(五)传输加载优化
就是因为我们请求头设置了长连接
前端性能优化(五)传输加载优化
也可以用nginx配置

前端性能优化(五)传输加载优化
timeout 超时时间,超过这个时间没有使用,就会关闭tcp连接
request 建立TCP连接后,可以发送多少个请求

三.http缓存

cache-control/expires
last-modified+if-modified-since
etag+if-none-match
http缓存机制

四.使用http2

前端性能优化(五)传输加载优化
HTTP2优势
1》多路复用
2》服务器推送:
前端性能优化(五)传输加载优化
nginx用http2_push命令,把服务器的资源提前放到浏览器中,避免请求资源的耗时
3》二进制解析
4》header头部压缩