前言：前端网页编写完成部署后，生产环境上的网页访问速度让人不太满意，有时候基本会延迟好几秒加载页面，查询了相关资料，整理出本篇文章。

一、网页性能分析

首先需要对目标网页进行性能分析，找到相应的待优化项
网页端谷歌性能分析工具
谷歌浏览器插件：PageSpeed Insights、Lighthouse。

二、Nginx传输时压缩文本

使用Nginx反向代理时，可以使用gzip压缩传输文件到浏览器，可以大大提高性能

修改Nginx的配置文件：

  1. gzip on;
  2.     gzip_min_length 1k;
  3.     gzip_buffers 4 16k;
  4.     gzip_http_version 1.0;
  5.     gzip_comp_level 9;
  6.     gzip_types text/plain application/x-javascript application/javascript application/json application/x-font-woff text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  7.     gzip_vary off;
  8.     gzip_disable "MSIE [1-6]\.";

相关文章：https://www.cnblogs.com/mitang/p/4477220.html

三、消除渲染阻塞资源

脚本（Script）加载
加载页面时，是按照HTML的代码顺序加载的，当头部中引用了脚本或者样式表时，会优先加载这些资源然后再渲染页面，导致页面展示速度降低，将脚本改为异步或者改为页面渲染完成后再加载，可以加快页面渲染速度。

  1. <!-- 若脚本之间没有依赖关系可以使用该标签 -->
  2. <script type="text/javascript" src="demo.js" async></script>
  3. <script type="text/javascript" src="test.js" async></script>
  5. <!-- 若脚本之间有依赖关系可以使用该标签 -->
  6. <script type="text/javascript" src="demo1.js" defer></script>
  7. <script type="text/javascript" src="demo2.js" defer></script>
  1. async
    设置async使script脚本异步加载并在允许的情况下执行，多脚本先加载完先执行，因此有依赖关系时使用该标签可能出错。
  2. defer
    若script标签设置了该属性，则浏览器会异步的下载该文件且不会影响到后续DOM的渲染；
    若有多个设置了defer的script标签存在，则会按照顺序执行所有的script；
    defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行。

相关文章：https://www.cnblogs.com/jiasm/p/7683930.html

样式表（CSS）加载
样式表可以分为重要部分和不重要部分，重要部分可以在头部使用<style>标签，在HTML中直接编写；不重要部分可以使用media属性编写想要规则。

四、使用浏览器缓存

在首次加载页面后，再次加载时，HTTP请求可以附带资源的相关信息，当HTTP响应中显示资源信息，可以对比出资源是否变更，若无变更则可以在浏览器缓存中获取相关资源。

五、本地压缩文件

将外部脚本（js）和样式表（css）压缩成min形式，清除空白字符等。

六、waiting（TTFB）时间过长

  1. DNS解析网址耗时

访问的为网址而不是IP时，需要DNS解析，耗时较长
127.0.0.1无需解析，localhost还要本地DNS解析，所有127.0.0.1会更快

  1. 连接数据库等耗时

七、查询数据库耗时

前端频繁查询数据库不仅会降低页面的访问速度，也会增大数据库访问量，增加服务器后端的负载，拖慢访问速度，所以在后端的数据库查询中最好增加数据库访问数据的缓存，缓存数据可以使用spring中的cache内容，使用@EnableCaching在springboot主类中开启缓存功能，使用@CacheConfig、@Cacheable、@CachePut、@CacheEvict等注解添加查询方法的结果缓存。