【猿眼电影售票系统】前端性能优化

MonkeyEye（电影售票系统）项目地址：https://github.com/SYSUMonkeyEye/MonkeyEye-FE

图片系列

1. 静态资源（如图片资源）因为不会经常更改，所以可以设置比较长的缓存时间。如下，在Nginx中设置缓存时间：

    # 配置静态文件（用户头像和电影海报）代理
   location ^~ /static/images {
       root /root/Desktop/MonkeyEye-Server/Flask-Server/app;
       expires max;
   }

2. 将图片进行压缩，包括等比例压缩和采用webp格式储存图片。如下：

   width, height = img.size
   ratio = 1.0
   if (height > 600):
       ratio = width / 600.0
   # 重新设置图片大小，等比例压缩
   img = img.resize((int(width / ratio), int(height / ratio)), Image.BILINEAR)
   # 储存为webp格式
   img.save('poster/%s.webp' % x[:x.rfind('.')])

3. 前端页面实现图片懒加载，实现细节请看图片滚动懒加载。

压缩系列

1. 静态文件服务器开启gzip压缩，压缩效果显著，js第三方库文件从299KB压缩至83KB。如下：

   const compression = require('compression')
   
   let app = express()
   // 压缩中间件
   app.use(compression())

2. Nginx代理服务器开启gzip压缩，如下：

   # 开启gzip压缩输出，减少网络传输。
   gzip on;
   gzip_disable "msie6";
   
   # gzip压缩比，1压缩比最小处理速度最快，9压缩比最大但处理速度最慢(传输快但比较消耗cpu)。
   gzip_comp_level 6;
   # 设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。
   gzip_buffers 16 8k;
   gzip_http_version 1.1;
   # 匹配mime类型进行压缩。
   gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript image/jpeg image/gif image/png image/jpg;

3. 第三方库Vue Material实现按需加载，因为我们使用的UI控件只是一部分，因此不必要全部加载。以下为实现按需加载前后的大小：

缓存系列

1. Nginx服务器开启文件缓存，详情请看Nginx配置。

2. 前端H5缓存，具体为将需要缓存的静态文件写进.manifest文件中。当浏览器重新访问这个网站时，假如manifest文件未被修改，将从浏览器缓存中读取资源，加快网站加载速度，并且减少浏览器负载。如下：

   CACHE MANIFEST
   # version 1496739629311
   
   CACHE:
   /static/css/app.024352893c441ef741dbcde2c1ddd4a3.css
   /static/js/app.a051ccf75146d938db32.js
   /static/js/manifest.a892727e73deefe54a89.js
   /static/js/vendor.499b8d4e9f0ef39fe160.js
   /app
   
   NETWORK:
   *