大学JavaWeb项目加载静态资源的优化方法

在我大二与同学开发的JavaWeb项目时，我使用阿里云进行项目上线，但我们项目中有视频音频资源非常占空间，并且因为是免费的服务器，服务器配置差，在我们正常使用的过程中加载时间非常长，所以我针对项目静态资源进行优化。

javaweb项目加载静态资源的优化方法：

压缩静态资源：使用gzip或其他压缩工具对静态资源进行压缩，减小文件大小，加快加载速度。
缓存静态资源：将静态资源缓存在浏览器中，下次访问时直接从本地获取，减少服务器请求和加载时间。
使用CDN加速：使用CDN（内容分发网络）可以将静态资源分发到全球不同的节点上，让用户从最近的节点获取资源，提高访问速度。
优化图片：将图片压缩、裁剪或者转换成webp格式，减小图片大小并且保证质量。
合并请求：合并多个小文件为一个大文件，在一次请求中完成多个文件的下载和加载，减少HTTP请求次数和延迟时间。
异步加载：将页面中不需要立即显示的静态资源异步加载，在页面初次渲染时只加载必要的资源。
减少重定向：避免使用过多的重定向或者重复跳转，在网站性能方面有很大影响。

压缩静态资源

可以使用gzip或其他压缩工具来实现，以下是使用gzip进行压缩的示例：

安装gzip

在Linux系统中，可以通过以下命令安装gzip：

sudo apt-get install gzip

在Windows系统中，需要下载并安装gzip软件包。

配置服务器

对于Apache服务器，可以通过修改.htaccess文件来开启gzip压缩。在.htaccess文件中添加以下代码：

<IfModule mod_deflate.c>
    # Compress HTML, CSS, JavaScript, Text, XML and fonts
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css 
</IfModule>

这将会开启对HTML、CSS、JavaScript、Text、XML和字体文件的gzip压缩。

测试

在配置完成后，可以使用浏览器开发工具来查看静态资源是否被压缩。在Network面板中，查看Response Headers中的Content-Encoding字段是否为gzip。如果是，则说明该文件已经被成功压缩。

注意：需要注意的是，对于小文件进行压缩可能会导致反而变慢，所以需要根据实际情况来确定哪些文件需要被压缩，并设置合适的阈值。

Tomcat

中启用Gzip压缩静态资源，您需要进行以下配置：

打开Tomcat的server.xml文件，该文件位于Tomcat安装目录的conf文件夹中。
在<Connector>元素中添加以下属性来启用Gzip压缩：

compression="on"
compressableMimeType="text/html,text/xml,text/plain,text/css,application/javascript,application/json,application/xml"

这将启用Gzip压缩，并指定要进行压缩的MIME类型。

在<Connector>元素中添加以下属性来配置Gzip压缩的级别：

compressionMinSize="2048"
noCompressionUserAgents="gozilla, traviata"

compressionMinSize属性指定只有大于等于该大小的响应内容才会被压缩，单位为字节。noCompressionUserAgents属性指定不需要被压缩的用户代理（浏览器）。

在<Connector>元素中添加以下属性来配置压缩的输出流缓冲区大小：

compressionBufferSize="2048"

这将设置输出流缓冲区的大小，单位为字节。

保存server.xml文件并重新启动Tomcat。

完成上述配置后，Tomcat将自动启用Gzip压缩，并对指定的MIME类型的静态资源进行压缩。压缩后的资源将通过HTTP响应发送给客户端浏览器，从而减少传输大小和提高加载速度。

请注意，启用Gzip压缩可能会对Tomcat服务器的性能产生一定影响，因为压缩和解压缩需要额外的计算资源。在实际应用中，您可能需要根据服务器的性能和负载情况来调整和优化Gzip压缩的配置。

压缩woff2文件

woff2文件是一种字体格式，也可以使用gzip等压缩工具来进行压缩。

在配置服务器时，只需要将woff2文件加入到需要被压缩的文件列表中即可。以下是一个示例Apache服务器配置：

<IfModule mod_deflate.c>
    # Compress HTML, CSS, JavaScript, Text, XML and fonts
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/font-woff2   # 添加该行代码以支持woff2字体压缩
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon    
</IfModule>

这样就可以对woff2字体文件进行gzip压缩了。

缓存静态资源

实现方式有以下几种：

HTTP Cache-Control Header：通过设置HTTP响应头中的Cache-Control字段来控制浏览器或客户端缓存静态资源。可以设置max-age、public、private等参数，来指定缓存时间和缓存范围。
ETag/If-None-Match：在HTTP响应头中添加ETag（Entity Tag）标识文件的版本号，客户端请求时可以携带If-None-Match头部信息，服务端会根据该信息判断是否使用本地缓存。
Last-Modified/If-Modified-Since：在HTTP响应头中添加Last-Modified表示文件最后一次修改时间，客户端请求时可以携带If-Modified-Since头部信息，服务端会根据该信息判断是否使用本地缓存。
CDN（Content Delivery Network）：CDN是将静态资源分布到全球各地的服务器节点上，并由最近的节点提供服务，从而加速网页加载速度和提高访问质量。
Service Worker：Service Worker 是运行在浏览器后台线程中的 JavaScript 脚本，它能够拦截网络请求并决定如何处理这些请求。Service Worker 可以自定义缓存策略，并且能够离线访问已经被缓存过的页面。

对于字体文件

可以通过以下方式实现缓存静态资源：

在HTTP响应头中添加Cache-Control和Expires字段，来控制浏览器或客户端缓存字体文件。例如：
```
Cache-Control: public, max-age=31536000
Expires: Fri, 31 Dec 2021 23:59:59 GMT
```
这里设置了字体文件的最大缓存时间为一年。
使用ETag/If-None-Match和Last-Modified/If-Modified-Since机制，来判断客户端是否需要使用本地缓存。可以在服务器上生成一个唯一标识符，并将其添加到HTTP响应头中的ETag字段中。同时也可以添加Last-Modified字段表示字体文件的最后修改时间。当客户端请求时，会携带If-None-Match和If-Modified-Since头部信息，服务端会根据这些信息来判断是否使用本地缓存。
如果网站使用了CDN（Content Delivery Network），可以将字体文件分布到全球各地的节点上，并由最近的节点提供服务，从而加速字体加载速度和提高访问质量。
使用Service Worker来自定义缓存策略，并且能够离线访问已经被缓存过的页面。在Service Worker中可以通过Cache API来进行缓存管理。

总之，在开发过程中需要考虑到不同浏览器的兼容性问题，同时也要注意字体文件的版权问题。

使用的是Apache服务器

可以在.htaccess文件中添加以下代码：

<IfModule mod_headers.c>
    <FilesMatch "\.(ttf|otf|woff)$">
        Header set Cache-Control "public, max-age=31536000"
        Header set Expires "Fri, 31 Dec 2021 23:59:59 GMT"
    </FilesMatch>
</IfModule>

这样浏览器就会按照设置缓存字体文件了。请确保你的服务器上已经安装了mod_headers模块。

Tomcat

web.xml文件中添加以下代码来设置缓存控制：

<filter>
  <filter-name>ExpiresFilter</filter-name>
  <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>

 <!-- HTML -->
 <init-param>
   <param-name>ExpiresByType text/html</param-name>
   <param-value>access plus 1 year</param-value>  // 30 days
 </init-param>

 <!-- JavaScript -->
 <init-param>
   <param-name>ExpiresByType application/javascript</param-name>
   <param-value>access plus 1 year</param-value>
 </init-param>

 <!-- CSS -->
 <init-param>
    <param-name>ExpiresByType text/css</param-name>
    <param-value>access plus 30 days</param-value>
 </init-param>
    
 <!-- WOFF2 -->
 <init-param>
    <param-name>ExpiresByType application/font-woff2</param-name>
    <param-value>access plus 1 year</param-value>
 </init-param>

 <!-- WebP -->
 <init-param>
    <param-name>ExpiresByType image/webp</param-name>
    <param-value>access plus 1 year</param-value>
 </init-param>

 <!-- MP4 Video -->
 <init-param>
   <param-name>ExpiresByType video/mp4</param-name>
   <param-value>access plus 1 year</param-value>
 </init-param>

<!-- Add more ExpiresByType for different file types -->

</filter>

<filter-mapping>
  <filter-name>ExpiresFilter</filter-name>
  <url-pattern>*</url-pattern>
</filter-mapping>

这将为所有类型的文件添加缓存控制，包括HTML和JavaScript。您可以根据需要添加更多的ExpiresByType参数。

catalina.filters.ExpiresFilter报错问题

这可能是因为您缺少Tomcat Catalina JAR包或该类不在您的类路径中。

请按照以下步骤检查并解决问题：

确保已经将Tomcat Catalina JAR包添加到您的项目中。可以在TOMCAT_HOME/lib目录下找到这个JAR包。如果您使用Maven，则可以将以下依赖项添加到pom.xml文件中：

<dependency>
    <groupId>org.apache.tomcat</groupId>
    <artifactId>tomcat-catalina</artifactId>
    <version>8.5.86</version>
</dependency>

如果您使用的是Eclipse或IntelliJ等IDE，请确保已经正确配置了Tomcat服务器，并将其添加到项目中。否则，编译器可能无法找到所需的类。
检查是否存在拼写错误。请确保标签中指定的类名正确拼写，并且与实际的Java类名匹配（大小写敏感）。
如果以上步骤都没有解决问题，请尝试清理和重新构建项目，并重启IDE和Tomcat服务器。有时候缓存问题会导致编译器无法正确处理库文件，这样做可能会帮助解决问题。

<?xml version="1.0" encoding="UTF-8"?>
<Server port="8005" shutdown="SHUTDOWN">
  <Listener className="org.apache.catalina.startup.VersionLoggerListener" />
  <Listener className="org.apache.catalina.core.AprLifecycleListener" SSLEngine="on" />
  <Listener className="org.apache.catalina.core.JreMemoryLeakPreventionListener" />
  <Listener className="org.apache.catalina.mbeans.GlobalResourcesLifecycleListener" />
  <Listener className="org.apache.catalina.core.ThreadLocalLeakPreventionListener" />
  <GlobalNamingResources>
    <Resource name="UserDatabase" auth="Container"
              type="org.apache.catalina.UserDatabase"
              description="User database that can be updated and saved"
              factory="org.apache.catalina.users.MemoryUserDatabaseFactory"
              pathname="conf/tomcat-users.xml" />
  </GlobalNamingResources>
  <Service name="Catalina">
    <Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" />

               <!-- 启用Gzip压缩 -->
    <Connector compression="on"
               compressableMimeType="text/html,text/xml,text/plain,text/css,application/javascript,application/json,application/xml,application/font-woff2"
               compressionMinSize="2048"
               noCompressionUserAgents="gozilla,traviata"
               compressionBufferSize="2048" />
    <Engine name="Catalina" defaultHost="localhost">
      <Realm className="org.apache.catalina.realm.LockOutRealm">
        <Realm className="org.apache.catalina.realm.UserDatabaseRealm"
               resourceName="UserDatabase"/>
      </Realm>
      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
               prefix="localhost_access_log" suffix=".txt"
               pattern="%h %l %u %t &quot;%r&quot; %s %b" />
      </Host>
    </Engine>
  </Service>
</Server>

posted @ 2024-03-04 13:28 韩续贤阅读(157) 评论(0) 收藏举报

刷新页面返回顶部

韩续贤

我要成为代码高手！

大学JavaWeb项目加载静态资源的优化方法

javaweb项目加载静态资源的优化方法：

压缩静态资源

Tomcat

压缩woff2文件

缓存静态资源

对于字体文件

使用的是Apache服务器

Tomcat

catalina.filters.ExpiresFilter报错问题

公告