（1）Web性能实战----理解Web性能

为什么Web性能很重要

• 高性能的网站可以改善用户体验
• 网站性能印象搜索结果排名

浏览器如何与服务器通信

sequenceDiagram

participant user as 用户
participant server as Web服务器
user ->> server:1. 发送请求
note left of server: 2. 用户等待响应
server ->> user: 3. 响应请求页面

检查网站

网站优化方式

提高网站性能时，目标很简单：减少传输的数据量。这样做将减少站点在任何设备上的加载时间，无论时HTTP/1和HTTP/2服务器。

最重要的一条建议：传输更少的字节意味着更快的加载速度

减少请求数

对于使用HTTP/1的网站，这个方法最适用，减少了请求阻塞的时间。但是，对于请求数量已经是比较轻量的网站，没有多大作用。

缩小资源

缩小（minification）是从基于文本的资源中去除所有空白和非必要字符的过程。浏览器渲染页面的时候，需要加载html、JavaScript和CSS资源，如果对资源进行压缩，就算静态资源部署在CDN上，那也能降低网络传输的数据量。这类缩小后的文件大都包含.min，常见的如引用缩小后的jQuery文件<script src='js/jquery.min.js'></script>。

• vue项目中常用的缩小资源工具

优化图像

优化图像的理念是尽可能保留源图像的视觉质量，同时丢弃不必要的数据。

服务器端压缩文本资源

服务器压缩的工作方式是用户从服务器请求网页，用户的请求附带一个Accept-Encoding头部信息，向服务器告知浏览器可以使用的压缩格式。如果服务器能按照Accept-Encoding头中的指示对内容进行编码，它将用一个描述压缩方法和压缩内容的Content-Encoding头部信息进行回复。

目前前端项目大都支持打包的时候进行gzip静态压缩，上传至服务器后，开启nginx的gzip功能即可。下面以vue项目为例：

1. webpack项目配置插件compression-webpack-plugin

   修改文件config/index.js

   # config/index.js
   productionGzip: true,
   productionGzipExtensions: ['js', 'css'],
   

   修改文件vue.config.js

   # vue.config.js
    config.when(process.env.NODE_ENV === "production", config =>
      config
        .plugin("compression-webpack-plugin")
        .use(require("compression-webpack-plugin"), [
          {
            filename: "[path].gz[query]",
            algorithm: "gzip",
            test: new RegExp("\\.(" + ["js", "css"].join("|") + ")$"),
            threshold: 10240,
            minRatio: 0.8
          }
        ])
    );
   

2. nginx服务器配置gzip压缩

   编辑conf/nginx.conf文件，加入下列内容：

   #开启gzip功能
   gzip on; 
   #开启gzip静态压缩功能
   gzip_static on; 
   #gzip缓存大小
   gzip_buffers 4 16k;
   #gzip http版本
   gzip_http_version 1.1;
   #gzip 压缩级别 1-10 
   gzip_comp_level 5;
   #gzip 压缩类型
   gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
   # 是否在http header中添加Vary: Accept-Encoding，建议开启
   gzip_vary on;
   

   gzip_static是gzip的静态压缩功能，与之相对应的是动态压缩。开启静态压缩后，nginx会匹配服务器上的gzip压缩后的静态资源，而不是nginx服务器对资源进行gzip压缩，可以降低服务器CPU的使用率。

   若关闭静态压缩，使用nginx的动态压缩，则第一步可以省略，不必对项目资源经行gzip压缩后再上传到服务器。