Java 利用CSS、JS和图像的细化技术避免对服务器的多次请求

我用Java开发了一个基于web的应用程序。它有10+js文件、15+图像和10+css文件供每个页面加载

---

浏览器上的每个文件加载都被视为一个请求，因此我正在寻找一个更好的解决方案，以避免对Web服务器的多个请求，从而提高我的页面性能。

几乎所有浏览器都有缓存机制，直到您从外部定义不在客户端浏览器上存储文件。。文件下载后将缓存在浏览器中，以便下次对同一文件的任何点击都将从浏览器缓存中返回

---

因此，在您的情况下，所有文件将下载一次，下次将不会下载。对于第一次点击，它会变慢，但之后会变快。

也许可以看看grunt.js 你必须设置一个构建过程，在这个过程中，你可以缩小/丑化你的代码，并连接你的文件，这样你就只有一个.js文件了…

看看或。这些将缩小并优化您的css/javascript。Jawr还可以使用base64编码将css图像嵌入css本身，但是该项目已经有一段时间没有更新了，但是我已经在多个项目中成功地使用了它

---

Granular似乎使用了高级javascript优化技术。

我认为没有任何现有的解决方案可以将所有CSS/JS/图像捆绑到一个请求中，除非您愿意自己将CSS/JS文件合并到一个文件中。对于图像，仍将是多个请求。以下是可以提高性能的方法

对于Javascript和CSS，您可以使用缩小功能来减少下载大小。我在我的一个项目中选择了YUI，它将尺寸缩小了40-50%。我关闭了混淆功能，以便开发人员更容易调试JavaScript。缩小可以在运行时或构建时完成。我选择了构建时间，以减少干扰

利用浏览器缓存减少对服务器的请求。但是，由于浏览器设置可能因客户端而异，因此最好使用服务器端缓存相关头来控制行为。对于静态文件，大多数应用程序服务器都有自己的默认设置。例如，WebLogic使用FileServlet为静态内容（如css和javascript）的请求提供服务，FileServlet将所有头设置为静态内容。为了更改默认头并精确控制缓存行为，一种方法是使用servlet过滤器修改响应对象中的头

---

希望这些有帮助。

这些是您应该使用的某些优化技术

缩小js-你可以使用雅虎的YUI压缩

CSS文件可以合并为一个

图像文件-使用CSS精灵-访问谷歌网站，了解如何应用CSS精灵以最大限度地减少往返服务器的次数

最重要的是，彻底的代码审查是最重要的因素，可以将重新创建/未使用的代码从JS文件中剔除

---

为了进一步优化，请尝试使用Firefox上的Firebug和Chrome上的页面速度来衡量JS性能。如果您是JAVIE10，那么使用这三种工具来判断页面性能

如果您是用Java开发的，那么您可能会使用Maven。Maven有两个非常棒的插件，用于CSS和JS缩小以及创建CSS精灵。pom xml中的以下代码使用现有css创建sprites图像，然后缩小css和js

<plugin>
                <groupId>net.jangaroo</groupId>
                <artifactId>smartsprites-maven-plugin</artifactId>
                <version>1.5</version>
                <configuration>
                    <rootDirPath>${webappDirectory}/resources/css/sprites/</rootDirPath>
                    <outputDirPath>${webappDirectory}/resources/css/generated_sprites/</outputDirPath>
                    <cssFileSuffix>-generated-sprite</cssFileSuffix>
                    <logLevel>WARN</logLevel>
                    <spritePngDepth>AUTO</spritePngDepth>
                    <spritePngIeSix>false</spritePngIeSix>
                    <cssFileEncoding>UTF-8</cssFileEncoding>
                    <documentRootDirPath>${webappDirectory}</documentRootDirPath>
                </configuration>
                <executions>
                    <execution>
                        <id>createSprites</id>
                        <phase>generate-sources</phase>
                        <goals>
                             <goal>createSprites</goal>  
                        </goals>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <groupId>com.samaxes.maven</groupId>
                <artifactId>minify-maven-plugin</artifactId>
                <version>1.6</version>
                <executions>
                    <execution>
                        <id>minify-initial-load-css</id>
                        <phase>generate-sources</phase>
                        <configuration>
                            <charset>utf-8</charset>
                            <verbose>false</verbose>
                            <debug>true</debug>
                            <timeout>180</timeout>
                            <webappTargetDir>${targetDirectory}/resources/</webappTargetDir>
                            <cssSourceDir>/resources/css/</cssSourceDir>
                            <cssSourceIncludes>
                                <cssSourceInclude>initial_load/*.css</cssSourceInclude>
                                <cssSourceInclude>generated_sprites/*.css</cssSourceInclude>
                            </cssSourceIncludes>
                            <cssFinalFile>initial_load.css</cssFinalFile>
                        </configuration>
                        <goals>
                            <goal>minify</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>minify-internal-pages-css</id>
                        <phase>generate-sources</phase>
                        <configuration>
                            <charset>utf-8</charset>
                            <verbose>false</verbose>
                            <debug>true</debug>
                            <timeout>180</timeout>
                            <webappTargetDir>${targetDirectory}/resources/</webappTargetDir>
                            <cssSourceDir>/resources/css/</cssSourceDir>
                            <cssSourceIncludes>
                                <cssSourceInclude>internal_pages/*.css</cssSourceInclude>
                                <cssSourceInclude>generated_sprites/*.css</cssSourceInclude>
                            </cssSourceIncludes>
                            <cssFinalFile>internal_pages.css</cssFinalFile>
                        </configuration>
                        <goals>
                            <goal>minify</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>minify-initial-load-js</id>
                        <phase>generate-sources</phase>
                        <configuration>
                            <charset>utf-8</charset>
                            <verbose>false</verbose>
                            <debug>true</debug>
                            <timeout>180</timeout>
                            <jsEngine>closure</jsEngine>
                            <webappTargetDir>${targetDirectory}/resources/</webappTargetDir>
                            <jsSourceDir>/resources/js/initial_load</jsSourceDir>
                            <jsSourceIncludes>
                                <jsSourceInclude>jquery-1.7.1.min.js</jsSourceInclude>
                                <jsSourceInclude>*.js</jsSourceInclude>
                            </jsSourceIncludes>
                            <jsSourceExcludes>
                                <jsSourceExclude>*gui.nocache.js</jsSourceExclude>                              
                            </jsSourceExcludes>
                            <jsFinalFile>initial_load.js</jsFinalFile>
                        </configuration>
                        <goals>
                            <goal>minify</goal>
                        </goals>
                    </execution>

net.jangaroo
smartsprites maven插件
1.5
${webappDirectory}/resources/css/sprites/
${webappDirectory}/resources/css/generated\u sprites/
-生成的精灵
警告
自动的
假的
UTF-8
${webappDirectory}
创造精灵
生成源
创造精灵
com.samaxes.maven
缩小maven插件
1.6
缩小初始负载
生成源
utf-8
假的
真的
180
${targetDirectory}/resources/
/资源/css/
初始加载/*.css
生成的\u sprites/*.css
初始加载.css
缩小
缩小内部页面css
生成源
utf-8
假的
真的
180
${targetDirectory}/resources/
/资源/css/
内部页面/*.css
生成的\u sprites/*.css
内部页面.css
缩小
减小初始荷载
生成源
utf-8