CSS，JS和图像的最小化技术，以避免对服务器的多个请求
Posted
技术标签:
【中文标题】CSS，JS和图像的最小化技术，以避免对服务器的多个请求【英文标题】：Minnifying techniques of CSS, JS and images to avoid multiple requests to server 【发布时间】：2013-01-19 23:57:50 【问题描述】：我有一个用 Java 开发的基于 Web 的应用程序。它有 10+ js 文件和 15+ 图像和 10+ css 文件供每个页面加载。
浏览器上的每个文件加载都视为单个请求，因此我正在寻找更好的解决方案来避免对网络服务器的多个请求以提高我的页面性能。
【问题讨论】：
将所有 CSS/javascript 文件合并为一个。如果您谈论的图像用于图标，请查找“css image sprites”。 对于 JS 文件 -- crockford.com/javascript/jsmin.html 只是以防万一不清楚，我认为@xFortyFourx 可能意味着一个CSS文件和一个JS文件 我的意思正是@phenomnomnominal 所说的，对不起，我不认为这是令人困惑的。 【参考方案1】：如果您使用 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>
祝你好运！
【讨论】：
【参考方案2】：这些是您应该使用的某些优化技术
-
缩小 js - 您可以使用 Yahoo 的 YUI 压缩。
CSS 文件可以合并为一个。
图像文件 - 使用 CSS Sprites - 访问 Google 的网站，了解如何应用 CSS Sprites 以最大程度地减少与服务器的往返次数
首先，彻底的代码审查是最重要的因素，在 JS 文件中将重复/未使用的代码排除在外。
为了进一步优化，请尝试使用 Firefox 上的 Firebug 和 Chrome 上的 Page Speed 来衡量你的 JS 性能。如果你是jave IE10那么使用这三个工具来判断页面性能
【讨论】：
【参考方案3】：我认为没有任何现有的解决方案可以将所有 CSS/JS/图像捆绑到一个请求中，除非您愿意自己将 CSS/JS 文件合并到一个文件中。对于图像，它仍然是多个请求。您可以采取以下措施来提高性能
对于 Javascript 和 CSS，您可以使用缩小功能来减小下载大小。我在我的一个项目中选择了 YUI，它减少了 40-50% 的大小。我关闭了混淆功能，以便开发人员更容易调试 JavaScript。可以在运行时或构建时进行缩小。我选择构建时间是为了减少干扰。
利用浏览器缓存减少对服务器的请求。但是，由于浏览器设置可能因客户端而异，因此最好使用服务器端缓存相关标头来控制行为。对于静态文件，大多数应用服务器都有自己的默认设置。例如，WebLogic 使用 FileServlet 来处理对 css 和 javascript 等静态内容的请求，并且 FileServlet 将所有标头设置为静态内容。为了改变默认header和精细控制缓存行为，一种方法是使用servlet过滤器修改响应对象中的header。
希望这些有所帮助。
【讨论】：
【参考方案4】：看看jawr 或granule。这些将缩小和优化您的 css/javascript。 Jawr 还可以使用 base64 编码将您的 css 图像嵌入到 css 本身中，但是该项目已经有一段时间没有更新了，但我已经在多个项目中成功使用它。
Granule 似乎使用了Google Closure Compiler，它似乎拥有先进的 javascript 优化技术。
【讨论】：
【参考方案5】：也许看看 grunt.js 您将必须设置一个构建过程，在该过程中您可以缩小/丑化您的代码并连接您的文件，这样您最终只会得到一个 .js 文件...
【讨论】：
【参考方案6】：几乎所有浏览器都具有缓存机制，直到您在外部未定义不在客户端浏览器上存储文件。一旦文件下载将被缓存在浏览器中，因此下次对同一文件的任何命中都将从浏览器缓存中返回。
因此，在您的情况下，所有文件都将下载一次，下次不会下载。第一次命中会很慢，之后会变快。
【讨论】：
以上是关于CSS，JS和图像的最小化技术，以避免对服务器的多个请求的主要内容，如果未能解决你的问题，请参考以下文章