सर्वर

Question

पर एकाधिक अनुरोधों से बचने के लिए सीएसएस, जेएस और छवियों की तकनीक को कम करना, मेरे पास जावा में विकसित एक वेब आधारित एप्लिकेशन है। प्रत्येक पृष्ठ को लोड करने के लिए इसमें 10+ जेएस फ़ाइलें और 15+ छवियां और 10+ सीएसएस फ़ाइलें हैं।

ब्राउज़र पर प्रत्येक फ़ाइल लोड एक अनुरोध के रूप में व्यवहार करता है, इसलिए मैं अपने पृष्ठ के प्रदर्शन को बेहतर बनाने के लिए वेबसर्वर को एकाधिक अनुरोधों से बचने के लिए एक बेहतर समाधान की तलाश में हूं।

Answer 1

लगभग सभी ब्राउज़रों के पास कैश तंत्र है जब तक कि आप क्लाइंट ब्राउज़र पर फ़ाइलों को स्टोर न करने के लिए बाहरी रूप से परिभाषित नहीं करते हैं .. एक बार फ़ाइल डाउनलोड हो जाने पर ब्राउज़र में कैश किया जाएगा, अगली बार ब्राउज़र फ़ाइल कैश से उसी फ़ाइल के लिए कोई भी हिट वापस कर दी जाएगी।

तो आपके मामले में सभी फाइलें एक बार डाउनलोड की जाएंगी और अगली बार इसे डाउनलोड नहीं किया जाएगा। पहली हिट के लिए यह धीमा हो जाएगा लेकिन उसके बाद यह तेजी से हो जाएगा।

Answer 2

शायद grunt.js पर एक नजर है आप सेटअप करने के लिए एक निर्माण प्रक्रिया है जिसमें आप कम करें कर सकते हैं/अपने कोड बदसूरत करना है और यह भी तो आप केवल एक .js फ़ाइल के साथ अंत के लिए अपनी फ़ाइलें जोड़ होगा ...

Answer 3

jawr या granule पर एक नज़र डालें। वे आपके सीएसएस/जावास्क्रिप्ट को कम और अनुकूलित करेंगे। जौर आपको बेस 64 एन्कोडिंग का उपयोग कर सीएसएस छवियों को सीएसएस में भी एम्बेड कर सकता है, लेकिन परियोजना को थोड़ी देर के लिए अपडेट नहीं किया गया है, लेकिन मैं इसे कई परियोजनाओं में सफलतापूर्वक उपयोग कर रहा हूं।

ग्रेनेल Google Closure Compiler का उपयोग करने लगता है जो उन्नत जावास्क्रिप्ट अनुकूलन तकनीकों का प्रतीत होता है।

Answer 4

मुझे नहीं लगता कि सभी सीएसएस/जेएस/छवियों को एक ही अनुरोध में बंडल करने का कोई मौजूदा समाधान है, जब तक कि आप सीएसएस/जेएस फ़ाइल को एक फ़ाइल में विलय करने के इच्छुक नहीं हैं। छवियों के लिए, यह अभी भी एकाधिक अनुरोध होगा। प्रदर्शन

1. जावास्क्रिप्ट और सीएसएस के लिए, आप डाउनलोड आकार को कम करने के लिए खनन सुविधा का उपयोग कर सकते हैं। मैंने अपनी परियोजना में से एक में यूयूआई चुना और यह आकार 40-50% कम कर देता है। मैंने obfuscation सुविधा को बंद कर दिया ताकि डेवलपर को जावास्क्रिप्ट डीबग करना आसान हो। रनटाइम या बिल्ड समय के दौरान छोटा किया जा सकता है। मैंने निर्माण का समय चुना ताकि यह कम घुसपैठ कर सके।

2. सर्वर को अनुरोधों को कम करने के लिए ब्राउज़र कैश का लाभ उठाना। हालांकि, क्लाइंट के आधार पर ब्राउज़र सेटिंग्स अलग-अलग हो सकती हैं, व्यवहार को नियंत्रित करने के लिए सर्वर साइड कैशिंग संबंधित शीर्षलेख का उपयोग करना बेहतर होता है। स्थिर फ़ाइलों के लिए, अधिकांश एप्लिकेशन सर्वरों की अपनी डिफ़ॉल्ट सेटिंग्स होती है। उदाहरण के लिए, वेबलॉगिक सीएसएस और जावास्क्रिप्ट जैसी स्थैतिक सामग्री के अनुरोधों को पूरा करने के लिए एक फ़ाइल सर्लेट का उपयोग करता है और यह फाइलसेवेट सभी शीर्षकों को स्थिर सामग्री पर सेट करता है। डिफ़ॉल्ट शीर्षलेख बदलने और कैशिंग व्यवहार को ठीक-नियंत्रित करने के लिए, प्रतिक्रिया ऑब्जेक्ट में शीर्षलेख को संशोधित करने के लिए सर्वलेट फ़िल्टर का उपयोग करना एक तरीका है।

आशा है कि ये मदद करता है। आप याहू YUI संपीड़ित उपयोग कर सकते हैं -

Answer 5

ये कुछ अनुकूलन तकनीकों आप

1. कम करें js का उपयोग करना चाहिए रहे हैं।
2. सीएसएस फ़ाइल को एक में विलय किया जा सकता है।
3. छवि फ़ाइलें - उपयोग CSS स्प्राइट - सभी पूरी तरह से कोड की समीक्षा से ऊपर सर्वर

के राउंड ट्रिप कम करने के लिए कैसे CSS स्प्राइट लागू करने के लिए पर गूगल की वेबसाइट पर जाएं सबसे महत्वपूर्ण कारक है, repreated लेने में है/जेएस फ़ाइल में समीकरण के बाहर अप्रयुक्त कोड।

आगे के अनुकूलन के लिए, फ़ायरफ़ॉक्स पर फ़ायरबग और क्रोम पर पेज स्पीड का उपयोग करके जेएस प्रदर्शन को मापने का प्रयास करें। यदि आप IE10 को जेव करते हैं तो पेज प्रदर्शन का न्याय करने के लिए सभी तीन टूल का उपयोग करें

Answer 6

यदि आप जावा में विकसित कर रहे हैं तो आप मेवेन का उपयोग करने की संभावना रखते हैं। मेवेन में सीएसएस और जेएस मिनीफिकेशन के लिए वास्तव में बहुत अच्छे प्लग-इन हैं और सीएसएस स्प्राइट्स बनाने के लिए भी हैं। हमारे पोम एक्सएमएल में निम्नलिखित कोड हमारे मौजूदा सीएसएस से बाहर sprites छवियों बनाता है और फिर सीएसएस और जेएस को कम करता है।

<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> 

गुड लक!