Web前端优化

Web前端优化访问

1.网站动静分离动态的资源和静态资源分别部署到不同的服务器上，使用Nginx实现静态服务器，因为nginx实现静态服务器访问速度的效果比tomcat实现静态服务器访问效果好很多。

2.一定要使用浏览器缓存，客户端（浏览器）内置缓存技术，只要访问一次静态资源请求，都会缓存到本地客户端，304状态码表示客户端缓存一般服务器上线的时候一定要在静态js、css资源后面加上时间戳，目的是为了防止发布版本与资源有冲突。
3.页面减少Http请求合并CSS或者JS资源，JS或者CSS一定使用压缩技术。压缩文件变为.min
4.使用CDN内容分发，缓存静态资源（JS、图片、CS），让用户从最近的服务器访问，减少客户端与服务器端宽带传输速度。使用CDN可以配置压缩。 nginx 也可以配置。
5.前后分离技术。
异步化、ajax、vue

网站为什么要动静分离：

因为静态资源占带宽比动态资源占带宽大。而且静态资源需要做CDN内容分发加速以提高访问效率。静态资源可以放在第三的服务器上面，例如七牛云。

静态文件压缩的几种方法

1.可以使用在线压缩，把js或者css文件复制到网站中进行压缩。这种方式不推荐，如果静态文件多的话需要一个个文件复制去在线压缩。在线压缩网站：http://tool.chinaz.com/Tools/CssFormat.aspx

2.使用Maven插件进行打包自动压缩，压缩之后以.min格式压缩文件。

3.可以使用Nginx进行压缩。取消 #gzip on 注释即可。

maven 配置文件

<!-- 构建相关配置 -->
<build>
    <!-- maven插件配置 -->
    <plugins>
        <plugin>
            <!-- YUI Compressor Maven压缩插件 -->
            <groupId>net.alchim31.maven</groupId>
            <artifactId>yuicompressor-maven-plugin</artifactId>
            <version>1.3.0</version>
            <configuration>
                <!-- 读取js,css文件采用UTF-8编码 -->
                <encoding>UTF-8</encoding>
                <!-- 不显示js可能的错误 -->
                <jswarn>false</jswarn>
                <!-- 若存在已压缩的文件，会先对比源文件是否有改动。有改动便压缩，无改动就不压缩 -->
                <force>false</force>
                <!-- 在指定的列号后插入新行 -->
                <linebreakpos>-1</linebreakpos>
                <!-- 压缩之前先执行聚合文件操作 -->
                <preProcessAggregates>true</preProcessAggregates>
                <!-- 压缩后保存文件后缀 -->
                <suffix>.min</suffix>
                <!-- 源目录，即需压缩的根目录 -->
                <sourceDirectory>${basedir}/mobile</sourceDirectory>
                <!-- 压缩js和css文件 -->
                <includes>
                    <include>**/*.js</include>
                    <include>**/*.css</include>
                </includes>
                <!-- 以下目录和文件不会被压缩 -->
                <excludes>
                    <exclude>**/*.min.js</exclude>
                    <exclude>**/*.min.css</exclude>
                    <exclude>scripts/data/*.js</exclude>
                </excludes>

            </configuration>
        </plugin>
    </plugins>
</build>

执行maven命令进行压缩

mvn yuicompressor:compress

压缩的目的：是为了减少服务器端与客户端的带宽的传输。

Web前端优化访问

静态文件压缩的几种方法

相关推荐