Tecniche minatorie di CSS, JS e immagini per evitare richieste multiple al server

Question

Ho un'applicazione basata su web sviluppata in Java. Ha 10+ file js e 15+ immagini e 10 o più file CSS per ogni pagina da caricare.

Ogni file caricato nel browser tratta come una singola richiesta, quindi sto cercando una soluzione migliore per evitare più richieste al server web per migliorare le prestazioni della mia pagina.

Answer 1

Quasi tutti i browser hanno un meccanismo di cache fino a quando non si definisce esternamente di non memorizzare i file sul browser del client. Una volta scaricato un file verrà memorizzato nella cache del browser in modo che la prossima volta qualsiasi hit per lo stesso file venga restituito dalla cache del browser.

Quindi nel tuo caso tutti i file verranno scaricati una volta e la volta successiva non verranno scaricati. Per il primo colpo sarà lento, ma dopo diventerà veloce.

Answer 2

forse dare un'occhiata a grunt.js si dovrà impostare un processo di generazione in cui è possibile minify/uglify il codice e anche concatenare i file in modo si finisce con un solo file js ...

Answer 3

Dai uno sguardo a jawr o granule. Quelli ridurranno e ottimizzeranno il tuo css/javascript. Jawr può anche incorporare le immagini css nel css stesso usando la codifica base64, ma il progetto non è stato aggiornato per un po 'di tempo, ma lo sto usando con successo in più progetti.

Granello sembra utilizzare Google Closure Compiler che sembra avere avanzato tecniche di ottimizzazione javascript.

Answer 4

Non penso che esista una soluzione esistente per raggruppare tutti i CSS/JS/Immagini in un'unica richiesta, a meno che non si desideri unire il file CSS/JS in un solo file. Per le immagini, sarà ancora richiesta multipla. Ecco le cose che puoi fare per migliorare le prestazioni

1. Per Javascript e CSS, è possibile utilizzare la funzione di riduzione per ridurre le dimensioni del download. Ho scelto YUI in uno dei miei progetti e riduce le dimensioni del 40-50%. Ho lasciato disattivata la funzione di offuscamento in modo che sia più facile per lo sviluppatore eseguire il debug di JavaScript. La minificazione può essere eseguita durante il runtime o il tempo di costruzione. Ho scelto il tempo di costruzione in modo che sia meno invadente.

2. Utilizzo della cache del browser per ridurre le richieste al server. Tuttavia, poiché le impostazioni del browser possono essere diverse in base al client, è preferibile utilizzare l'intestazione relativa al caching lato server per controllare il comportamento. Per i file statici, la maggior parte dei server delle applicazioni ha le proprie impostazioni predefinite. Ad esempio, WebLogic utilizza un FileServlet per servire richieste di contenuto statico come css e javascript ed è il FileServlet imposta tutte le intestazioni al contenuto statico. Per modificare l'intestazione predefinita e controllare con precisione il comportamento di caching, un modo è utilizzare il filtro servlet per modificare l'intestazione nell'oggetto risposta.

Spero che questi aiuti.

Answer 5

Queste sono alcune tecniche di ottimizzazione si dovrebbe usare

1. Minify i js - È possibile utilizzare impacco YUI di Yahoo.
2. Il file CSS può essere unito in uno.
3. file immagine - Usare CSS Sprites - Visita il sito web di Google su come applicare Sprites CSS per ridurre al minimo il round-trips al server

Soprattutto un codice-esame approfondito è il fattore più importante, nel prendere repreated/codice inutilizzato fuori equazione nel file JS.

Per ulteriori ottimizzazioni, prova a misurare JS Performance utilizzando Firebug su Firefox e Page Speed ​​su Chrome. Se si utilizza IE10 quindi utilizzare tutti e tre gli strumenti per giudicare le prestazioni della pagina

Answer 6

Se si sta sviluppando in Java è probabile che si stia utilizzando Maven. Maven ha un paio di ottimi plug-in per CSS e JS minification e anche per creare sprite css. Il seguente codice nel nostro pom xml crea immagini sprite dal nostro css esistente e quindi riduce css e 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> 

Buona fortuna!