我有一个用 Java 开发的基于 Web 的应用程序。它有 10+ js 文件和 15+ 图像和 10+ css 文件供每个页面加载。
浏览器上的每个文件加载都视为单个请求，因此我正在寻找更好的解决方案来避免对网络服务器的多个请求以提高我的页面性能。
问问题
665 次
6 回答
2
如果您使用 Java 进行开发，您可能会使用 Maven。Maven 有几个非常棒的插件，用于 CSS 和 JS 缩小以及创建 css sprites。我们的 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>
祝你好运！
于 2013-02-07T22:18:15.857 回答
0
也许看看 grunt.js 你将不得不设置一个构建过程，在这个过程中你可以缩小/丑化你的代码并连接你的文件，所以你最终只有一个 .js 文件......
于 2013-02-05T07:34:55.140 回答
0
几乎所有浏览器都具有缓存机制，直到您在外部未定义不在客户端浏览器上存储文件。一旦下载文件将缓存在浏览器中，因此下次对同一文件的任何命中都将从浏览器缓存中返回。
因此，在您的情况下，所有文件都将下载一次，下次不会下载。对于第一次打击，它会很慢，但之后会变得很快。
于 2013-02-05T06:11:04.157 回答
0
这些是您应该使用的某些优化技术
- 缩小 js - 您可以使用 Yahoo 的 YUI 压缩。
- CSS文件可以合并为一个。
- 图像文件 - 使用 CSS Sprites - 访问 Google 的网站，了解如何应用 CSS Sprites 以最大程度地减少到服务器的往返行程
最重要的是，彻底的代码审查是最重要的因素，在 JS 文件中将重复/未使用的代码排除在外。
为了进一步优化，请尝试使用 Firefox 上的 Firebug 和 Chrome 上的 Page Speed 来衡量您的 JS 性能。如果你是jave IE10那么使用这三个工具来判断页面性能
于 2013-02-07T19:13:01.670 回答
0
我认为没有任何现有的解决方案可以将所有 CSS/JS/图像捆绑到一个请求中，除非您愿意自己将 CSS/JS 文件合并到一个文件中。对于图像，它仍然是多个请求。您可以采取以下措施来提高性能
对于 Javascript 和 CSS，您可以使用缩小功能来减小下载大小。我在我的一个项目中选择了 YUI，它减少了 40-50% 的大小。我关闭了混淆功能，以便开发人员更容易调试 JavaScript。可以在运行时或构建时进行缩小。我选择构建时间是为了减少干扰。
利用浏览器缓存减少对服务器的请求。但是，由于浏览器设置可能因客户端而异，因此最好使用服务器端缓存相关标头来控制行为。对于静态文件，大多数应用服务器都有自己的默认设置。例如，WebLogic 使用 FileServlet 来处理对 css 和 javascript 等静态内容的请求，并且 FileServlet 将所有标头设置为静态内容。为了改变默认标头并精细控制缓存行为，一种方法是使用 servlet 过滤器来修改响应对象中的标头。
希望这些有所帮助。
于 2013-02-05T23:16:45.923 回答
0
看看颚或颗粒。这些将缩小和优化您的 css/javascript。Jawr 还可以使用 base64 编码将您的 css 图像嵌入到 css 本身中，但是该项目已经有一段时间没有更新了，但我已经在多个项目中成功使用它。
Granule 似乎使用了Google Closure Compiler，它似乎具有先进的 javascript 优化技术。
于 2013-02-05T07:52:42.423 回答