前端性能问题分析
（1）页面加载性能问题主要集中于下载关联的静态文件，比如CSS、JS、图片等，这些网络请求对网页加载影响最大
（2）过多的HTTP请求
（3）同步和异步的问题
（4）CDN网络访问瓶颈，如果引入了国外的CDN地址那么网络请求必然耗时
（5）前端代码的规范，比如随便复制导致引入不必要的组件、CSS和JS位置不规范、重复引入组件
（6）把过多的计算任务放在前端处理，前后端处理不合理，过多处理计算交给前端
优化方案
（一）Nginx动静分离
动静分离就是指图片，css, js之类的都交给nginx来处理，讲这些静态文件放在Nginx直接返回，对于业务请求交给应用服务器处理，达到动静分离
【操作参考】
修改nginx.conf
在locaction下面添加一个新的location:
location ~\.(css|js|png)$ {
root XXX/webapps/ROOT;
}
（二）压缩静态文件
YUI CompressorJava编写的是一个JavaScript压缩器，除了删除注释和空格外，还使用尽可能小的变量名来模糊局部变量。这种混淆是安全的，即使使用诸如eval或with之类的结构（尽管在那些情况下压缩不是最佳的）与jsmin相比，平均节省约20％。YUI Compressor还能够安全地压缩CSS文件。
项目主页：https://yui.github.io/yuicompressor
github地址：https://github.com/yui/yuicompressor
yuicompressor-maven-plugin
yuicompressor-maven-plugin是基于YUI Compressor 封装的maven plugin，使用它可以结合到我们的项目，来方便我们对项目js、和css进行压缩。
项目主页：https://davidb.github.io/yuicompressor-maven-plugin/
配置使用
将yuicompressor-maven-plugin添加至maven项目pom.xml文件中，并根据自己的需求进行配置
<plugin>
<!-- YUI Compressor Maven压缩插件 -->
<groupId>net.alchim31.maven</groupId>
<artifactId>yuicompressor-maven-plugin</artifactId>
<version>1.5.1</version>
<executions>
<execution>
<goals>
<goal>compress</goal>
</goals>
</execution>
</executions>
<configuration>
<!-- 读取js,css文件采用UTF-8编码 -->
<encoding>UTF-8</encoding>
<!-- 不显示js可能的错误 -->
<jswarn>false</jswarn>
<!-- 若存在已压缩的文件，会先对比源文件是否有改动 有改动便压缩，无改动就不压缩 -->
<force>false</force>
<!-- 在指定的列号后插入新行 -->
<linebreakpos>-1</linebreakpos>
<!-- 压缩之前先执行聚合文件操作 -->
<preProcessAggregates>true</preProcessAggregates>
<!-- 压缩后保存文件后缀 无后缀 -->
<nosuffix>true</nosuffix>
<!-- 源目录，即需压缩的根目录 -->
<sourceDirectory>src/main/static</sourceDirectory>
<!-- 输出目录，即压缩后的目录-->
<outputDirectory>target/classes</outputDirectory>
<force>true</force>
<!-- 压缩js和css文件 -->
<includes>
<include>**/*.js</include>
<include>**/*.css</include>
</includes>
<!-- 以下目录和文件不会被压缩 -->
<excludes>
<exclude>**/*.min.js</exclude>
<exclude>**/*.min.css</exclude>
</excludes>
</configuration>
</plugin>
执行install命令，将在控制台看到如下输出：
我们打开target目录，可以看到项目静态目录下压缩后的文件，点开查看，文件内容被压缩。
（三）前端代码规范参考
1：所有的CSS引入放在< Head>内
2：所有的JS必须放在< Body>最下面
3：所有引入的CSS和JS尽量都是min压缩版
4：尽量不要引入all类型的插件，如果只用到个别功能，不要使用过大的工具包
5：不要重复引入，比如引入XX.all.JS然后又引入了其中的XX.JS
6：禁止引入无关的插件（复制代码时需要细心）
Tips:
下面的引入重复，而且引入过大，冗余
Tips：
只引入layui.js出现layer未定义解决方案
<script>
layer = layui.use(['layer', 'form', 'element'], function () {
var layer = layui.layer
, form = layui.form
, element = layui.element
});
</script>
（四）代码优化
1：注意同步和异步请求问题，尽量使用异步AJAX方式
2：对于页面过多图表的页面必须异步加载，同时可以在初始阶段只加载一部分，对于另一部分可以采用延迟单位时间后加载也或者使用流式加载，只有当用户下拉操作时才去加载，尽量让HTTP请求分散
3：前端异步处理，后端某些时候也需要异步@Async处理，对于任务大的请求可以采用分治的方式，将任务拆分，采用多线程处理，保持前端和后端同时提高处理效率，最终达到整体性能的提升