Front-end performance analysis and optimization

Front-end performance problem analysis

(1) Page loading performance problems mainly focus on downloading associated static files, such as CSS, JS, pictures, etc. These network requests have the greatest impact on page loading

(2) Too many HTTP requests

(3) Synchronous and asynchronous issues

(4) CDN network access bottleneck, if a foreign CDN address is introduced, the network request will inevitably be time-consuming

(5) The specification of the front-end code, for example, random copying leads to the introduction of unnecessary components, the position of CSS and JS is not standardized, and the repeated introduction of components

(6) Put too many computing tasks on the front-end processing, the front-end and back-end processing is unreasonable, and the excessive processing and calculation are handed over to the front-end

Optimization

(1) Nginx dynamic and static separation

Separation of dynamic and static refers to pictures, css, js and the like are handed over to nginx for processing. These static files are placed in Nginx and returned directly, and business requests are handed over to the application server for processing to achieve dynamic and static separation.
Insert picture description here

【Operation Reference】

Modify nginx.conf
to add a new location under locaction:

   location ~\.(css|js|png)$ {
    
    
        	root XXX/webapps/ROOT;
	}
(2) Compress static files

YUI CompressorJava is a JavaScript compressor. In addition to removing comments and spaces, it also uses the smallest possible variable names to obfuscate local variables. This confusion is safe, even using structures such as eval or with (although compression is not optimal in those cases) compared to jsmin, saving an average of about 20%. YUI Compressor can also compress CSS files safely.

Project homepage: https://yui.github.io/yuicompressor
github address: https://github.com/yui/yuicompressor

yuicompressor-maven-plugin
yuicompressor-maven-plugin is a maven plugin encapsulated based on YUI Compressor. It can be combined with our project to facilitate us to compress project js and css.

Project homepage: https://davidb.github.io/yuicompressor-maven-plugin/

Configuration and use
Add yuicompressor-maven-plugin to the maven project pom.xml file and configure it according to your needs

<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>

Execute the install command, and you will see the following output in the console:
Insert picture description here

When we open the target directory, we can see the compressed files in the static directory of the project, click to view, and the contents of the files are compressed.
Insert picture description here

(3) Front-end code specification reference

1: All CSS imports are placed in <Head>

2: All JS must be placed at the bottom of <Body>

3: All imported CSS and JS should be min compressed version as far as possible

4: Try not to introduce all types of plug-ins, if you only use individual functions, do not use an oversized toolkit

5: Don't repeat the introduction, such as introducing XX.all.JS and then introducing XX.JS in it

6: It is forbidden to introduce irrelevant plugins (you need to be careful when copying code)

Tips:
The following introduction is repeated, and the introduction is too large and redundant
Insert picture description here

Tips:
Only the introduction of layui.js appears layer undefined solution

<script>
    layer = layui.use(['layer', 'form', 'element'], function () {
    
    
        var layer = layui.layer
            , form = layui.form
            , element = layui.element
    });
</script>
(4) Code optimization

1: Pay attention to the problem of synchronous and asynchronous requests, try to use asynchronous AJAX

2: For pages with too many charts, they must be loaded asynchronously. At the same time, only a part of it can be loaded at the initial stage. For the other part, it can be loaded after a unit time delay or use streaming loading. Load only when the user pulls down. Try to load Distribute HTTP requests

3: Front-end asynchronous processing, the back-end sometimes needs asynchronous @Async processing. For large task requests, you can use divide and conquer, split the task, use multi-threaded processing, and maintain the front-end and back-end while improving processing efficiency. Ultimately achieve the overall performance improvement

Guess you like

Origin blog.csdn.net/Octopus21/article/details/112015059