CSS，JS和圖像Minnifying技術，以避免多個請求到服務器

對於Javascript和CSS，您可以使用縮小功能縮小下載大小。我在我的一個項目中選擇了YUI，它縮小了40-50％的尺寸。我關閉了混淆功能，以便開發人員更輕鬆地調試JavaScript。縮小可以在運行時或構建時完成。我選擇了編譯時間，以減少侵入性。
利用瀏覽器的緩存，以減少對服務器的請求。但是，由於瀏覽器設置可能因客戶端而異，因此最好使用服務器端緩存相關頭來控制行爲。對於靜態文件，大多數應用程序服務器都有自己的默認設置例如，WebLogic使用FileServlet爲靜態內容（如css和javascript）提供請求，FileServlet將所有標題設置爲靜態內容。爲了更改默認頭並精確控制緩存行爲，一種方法是使用servlet過濾器來修改響應對象中的頭。

希望這些幫助。

來源

2013-02-05 23:16:45 Lan

這些是一定的優化技巧，你應該使用

縮減大小的JS - 您可以使用雅虎的YUI壓縮。
可以將CSS文件合併爲一個。
圖像文件 - 使用CSS精靈 - 訪問谷歌對如何運用CSS精靈的網站，以儘量減少往返於服務器

首先進行徹底的代碼審查是最重要的因素，採取repreated在JS文件中出現/未使用的代碼。

爲了進一步優化，請嘗試使用Firefox上的Firebug和Chrome上的Page Speed來測量您的JS性能。如果你喜歡IE10，那麼使用所有三種工具來判斷頁面性能

來源

2013-02-07 19:13:01 user1428716

如果你正在用Java開發，你很可能會使用Maven。 Maven有幾個非常棒的CSS和JS縮小插件，還有用於創建css精靈的插件。我們的pom xml中的以下代碼會在我們現有的css之外創建精靈圖像，然後縮小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-07 22:18:15

CSS，JS和圖像Minnifying技術，以避免多個請求到服務器

回答

相關問題