अन्य पृष्ठों के लिए पूर्व-लोडिंग बाहरी फ़ाइलें (सीएसएस, जावास्क्रिप्ट)

Question

मुझे उत्सुकता है कि साइट के लोड पेज के सामने वाले पृष्ठ की प्रतीक्षा करने का एक प्रभावी तरीका है, और फिर मुझे पता है कि सीएसएस और स्क्रिप्ट फ़ाइलों को प्री-लोड करें साइट पर अन्य पृष्ठों के लिए शायद इसकी आवश्यकता होगी।

मैं साइट के सामने वाले पृष्ठ को यथासंभव तेज़ी से (दुबला और मतलब) चाहता हूं। यह संभावना है कि उपयोगकर्ता तुरंत एक लिंक पर क्लिक नहीं करेगा। चूंकि कुछ निष्क्रिय समय होने की संभावना है, यह कुछ बाहरी संपत्तियों को प्री-लोड करने के लिए एक उपयुक्त समय की तरह लगता है। प्री लोडिंग उन्हें कैश बनने का कारण बनना चाहिए। जब उपयोगकर्ता किसी अन्य पृष्ठ पर क्लिक करता है, तो केवल एक ही अनुरोध सामग्री और संभवतः कुछ छवियों आदि के लिए होगा।

क्या किसी ने ऐसा किया है? क्या यह एक बुरा विचार है? क्या इसे लागू करने का एक शानदार तरीका है?

Answer 1

यह एक दिलचस्प विचार है, मुझे यकीन नहीं है कि यह जावास्क्रिप्ट (कम से कम सीएसएस भाग) के माध्यम से किया जा सकता है।

आप अन्य संसाधनों आप लोड करना चाहते हैं के साथ पृष्ठ पर एक IFRAME जगह सकता है, लेकिन कुछ सीएसएस यह इसे छिपाने के लिए पर डाल दिया ...

.preload { 
    position : absolute; 
    top  : -9999px; 
    height : 1px; 
    width : 1px; 
    overflow : hidden; 
} 

आप पृष्ठ के अंत में यह डाल दिया तो मुझे लगता है कि पृष्ठ के बाकी हिस्सों के बाद लोड होगा। यदि नहीं तो आप पेज लोड के बाद वास्तव में IFRAME बनाने के लिए कुछ जावास्क्रिप्ट और सेटटाइमआउट का उपयोग कर सकते हैं।

Answer 2

बैंडविड्थ निर्णय लेने के लिए आप पर निर्भर है।

आप पूर्व लोड सब कुछ हैं, तो आप एक बेहतर उपयोगकर्ता के अनुभव लेकिन एक बहुत ही उच्च बैंडविड्थ की खपत पाने उपयोगकर्ता भी कभी उस सामान है कि लोड किया गया है का उपयोग नहीं हो सकता है के बाद से, यह बहुत अक्षम बना रही है।

यदि आप कुछ भी लोड नहीं करते हैं, बैंडविड्थ का न्यूनतम उपयोग किया जाता है, और उपयोगकर्ता केवल लोड करता है जो इसकी आवश्यकता है।

Answer 3

आप सिर्फ उन्हें ब्राउज़र के कैश में लोड करना चाहते हैं, मैं आपको लगता है कि कर सकता है एक छिपा iframe में एक दस्तावेज के माध्यम से लगता है।

Answer 4

छुपा आईफ्रेम विचार है कि लोग वकालत कर रहे हैं ठीक काम करेंगे।

लैंडिंग पृष्ठ की पृष्ठ लोड समय एक प्राथमिकता है, तो भी हालांकि, जावास्क्रिप्ट में गतिशील रूप से iFrame बनाने के लिए एक बार पेज लोड हो जाए, हो सकता है ऐसा करने के लिए करने के लिए बात।

Answer 5

आप इस तरह मनमानी फाइलों (सीएसएस, छवियों इत्यादि) prefetch कर सकते हैं, सवाल यह है कि छोटी वापसी और अतिरिक्त बैंडविड्थ लागत अब इसे आगे बढ़ाने के लिए सही अनुकूलन बनाते हैं। The Yahoo performance rules एक उत्कृष्ट प्रारंभिक बिंदु है। यदि यह आपका पहला प्रदर्शन अनुकूलन है, तो संभवतः आप गलत जगह पर शुरू हो रहे हैं। यह निश्चित रूप से एक प्रमुख ट्रेडऑफ (बढ़ी हुई बैंडविड्थ) के साथ एक अनुकूलन है, जबकि अन्य अनुकूलन जैसे "HTTP अनुरोधों को कम करें" की लागत कम है और संभवतः एक बड़ा भुगतान है।

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

Answer 6

मुझे लगता है कि आपको विश्लेषण करना चाहिए कि उपयोगकर्ता को आपके मुख्य पृष्ठ पर उतरने के बाद किसी दूसरे पृष्ठ पर जाने के लिए कितना समय लगता है।

फिर जांचें कि मुख्य पृष्ठों पर कौन से लिंक सबसे अधिक बार जाते हैं और मुख्य पृष्ठ/ऑनलोड ईवेंट पर एक टाइमर फ़ंक्शन सेटटाइमऑट आग लगती है जो आपके संभावित सहायक फ़ंक्शन को सबसे संभावित अगले लिंक के लिए प्री-लोडिंग कोड के साथ निष्पादित करेगी।

Answer 7

मैं गैरेथ से सहमत हूं, मैं गतिशील रूप से iframe बनाया होगा। आप इस कोड को अपने लैंडिंग पृष्ठ पर आखिरी चीज़ के रूप में रखना चाहेंगे।

उदा:

.... 
    <script type="text/javascript"> 
    preloadContent(); 
    </script> 
</body> 
</html> 

कैशिंग का सवाल है, वह वास्तव में अपने स्थापना पर निर्भर करता है। लेकिन याहू पर संदर्भ! वेबसाइट एक अच्छी शुरुआत होनी चाहिए: http://developer.yahoo.com/performance/rules.html#expires संक्षेप में, एक अच्छी तकनीक है कि आपकी स्थिर फाइलें (सीएसएस, छवियां, संभावित रूप से स्क्रिप्ट) 1 वर्ष की समाप्ति तिथि के साथ हों। इस तरह, आपके क्लाइंट को जो कुछ भी लाया गया है उसे ब्राउज़र कैश में भी नए संस्करणों की जांच किए बिना रखा जाएगा।

तुम क्या हैं है एक फ़ाइल को संशोधित करने के लिए: अंत में

• छवियों के लिए एक अलग फ़ाइल (यानी अलग फ़ाइल नाम) बनाएँ संस्करण/दिनांक संख्या
• सीएसएस और लिपियों संलग्न किया जा सकता है ।

यह सुनिश्चित करता है कि कोई ग्राहक कभी भी पुरानी सामग्री का उपयोग न करे।

चीयर्स! अगर आप 'jQuery प्रीलोड' google

Filament Group article

वास्तव में, वहाँ अन्य jQuery आधारित समाधान की एक संख्या हैं:

Answer 8

रेशा समूह एक अच्छा jQuery स्क्रिप्ट है कि एक सीएसएस फ़ाइल से छवियों को पहले से लोड होगा।

Answer 9

एक छिपे हुए आईफ्रेम में सबकुछ लोड करना एकमात्र तरीका नहीं है। ऑप्टिमाइज़ेशन के लिए जेएस और सीएसएस फाइलों को preloading/prefetching पर Stoyan Stefanov द्वारा दो शानदार पोस्ट हैं।

http://www.phpied.com/the-art-and-craft-of-postload-preloads/

http://www.phpied.com/preload-cssjavascript-without-execution/

मैं व्यक्तिगत रूप से AJAX की तरह के रूप में अच्छी एक बहुत दृष्टिकोण:

यहाँ लिंक कर रहे हैं। यह अच्छा और साफ है और जब तक आप क्रॉस-डोमेन सामग्री नहीं लेना चाहते हैं तब तक ठीक काम करता है।

दूसरी कड़ी में उनकी नवीनतम तकनीक भी अत्यंत होनहार लग रहा है (हालांकि मैं इसे अभी तक प्रयास नहीं किया है।)