前端性能分析优化

约定不等于承诺〃 2023-01-01 04:55 237阅读 0赞

### 文章目录 ###

*   *   *   *  前端性能问题分析
             *  优化方案
             *   *  （一）Nginx动静分离
                 *  （二）压缩静态文件
                 *  （三）前端代码规范参考
                 *  （四）代码优化

#### 前端性能问题分析 ####

（1）页面加载性能问题主要集中于下载关联的静态文件，比如CSS、JS、图片等，这些网络请求对网页加载影响最大

（2）过多的HTTP请求

（3）同步和异步的问题

（4）CDN网络访问瓶颈，如果引入了国外的CDN地址那么网络请求必然耗时

（5）前端代码的规范，比如随便复制导致引入不必要的组件、CSS和JS位置不规范、重复引入组件

（6）把过多的计算任务放在前端处理，前后端处理不合理，过多处理计算交给前端

#### 优化方案 ####

##### （一）Nginx动静分离 #####

动静分离就是指图片，css, js之类的都交给nginx来处理，讲这些静态文件放在Nginx直接返回，对于业务请求交给应用服务器处理，达到动静分离  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70]

【操作参考】

修改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>
        
        <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>
            
            <encoding>UTF-8</encoding>
            
            <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>
            
            <includes>
                <include>**/*.js</include>
                <include>**/*.css</include>
            </includes>
            
            <excludes>
                <exclude>**/*.min.js</exclude>
                <exclude>**/*.min.css</exclude>
            </excludes>
        </configuration>
    </plugin>

执行install命令，将在控制台看到如下输出：  
![在这里插入图片描述][2020123115294298.png]

我们打开target目录，可以看到项目静态目录下压缩后的文件，点开查看，文件内容被压缩。  
![在这里插入图片描述][20201231152949677.png]

##### （三）前端代码规范参考 #####

1：所有的CSS引入放在< Head>内

2：所有的JS必须放在< Body>最下面

3：所有引入的CSS和JS尽量都是min压缩版

4：尽量不要引入all类型的插件，如果只用到个别功能，不要使用过大的工具包

5：不要重复引入，比如引入XX.all.JS然后又引入了其中的XX.JS

6：禁止引入无关的插件（复制代码时需要细心）

Tips:  
下面的引入重复，而且引入过大，冗余  
![在这里插入图片描述][20201231153032687.png]

Tips：  
只引入layui.js出现layer未定义解决方案

##### （四）代码优化 #####

1：注意同步和异步请求问题，尽量使用异步AJAX方式

2：对于页面过多图表的页面必须异步加载，同时可以在初始阶段只加载一部分，对于另一部分可以采用延迟单位时间后加载也或者使用流式加载，只有当用户下拉操作时才去加载，尽量让HTTP请求分散

3：前端异步处理，后端某些时候也需要异步@Async处理，对于任务大的请求可以采用分治的方式，将任务拆分，采用多线程处理，保持前端和后端同时提高处理效率，最终达到整体性能的提升

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70]: /images/20221120/25ad74cc529c4af9b34538d3d878ecd8.png
[2020123115294298.png]: https://img-blog.csdnimg.cn/2020123115294298.png
[20201231152949677.png]: https://img-blog.csdnimg.cn/20201231152949677.png
[20201231153032687.png]: https://img-blog.csdnimg.cn/20201231153032687.png