पृष्ठभूमि में जावास्क्रिप्ट और सीएसएस फ़ाइलों को प्रीलोड करने के लिए, जब उपयोगकर्ता मुख्य पृष्ठ पर जाते हैं तो ब्राउज़र कैश में उन्हें तैयार करने के लिए?

लैंडिंग में रूपांतरण के बाद, मुख्य साइट लोड को अनुकूलित करने के लिए लैंडिंग पृष्ठ से एक जेएस फ़ाइल और एक सीएसएस फ़ाइल प्रीलोड करना चाहता हूं। मैं इस बारे में जानकारी के लिए देख रहा था और अंत में इस का उपयोग किया जाता प्राप्त करने की कोशिश:पृष्ठभूमि में जावास्क्रिप्ट और सीएसएस फ़ाइलों को प्रीलोड करने के लिए, जब उपयोगकर्ता मुख्य पृष्ठ पर जाते हैं तो ब्राउज़र कैश में उन्हें तैयार करने के लिए?

var xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'jsUrl'); 
    xhr.send(''); 
    xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'cssUrl'); 
    xhr.send('');

फ़ायरफ़ॉक्स इस महान के साथ

, लेकिन क्रोम के साथ ऐसा लगता है कि एक्सएचआर कॉल CSS और JS फ़ाइलों से एक अलग कैश में कैश कर रहे हैं। हम JQuery का उपयोग नहीं करते हैं, लैंडिंग पृष्ठ हल्का होना चाहिए (कम लोड, अधिक रूपांतरण दर)।

क्या आपके पास मूल समस्या को हल करने के लिए किसी अन्य तरीके की कोई सिफारिश है? (प्रीलोड घटक)

क्या आप जानते हैं कि इन अनुरोधों को क्रोम कैश कैसे बनाया जाए?

स्रोत

2010-09-02 Jonathan Barbero

यह एक उच्च मात्रा वाली साइट पर एक परीक्षण समाधान है जो काम करता है।

सबसे पहले लैंडिंग पृष्ठ संसाधनों और पहले से लोड संसाधनों के बीच एक प्रतियोगिता बैंडविड्थ के लिए आप जावास्क्रिप्ट के साथ लोड में देरी कर सकता से बचने के लिए:

var prevOnLoad=window.onload; 
function onLoadPreloadComponents() { 
    if(prevOnLoad) { 
     try{ 
      prevOnLoad(); 
     }catch(err){ 
     } 
    } 
    preloadSiteComponents(); 
} 

window.onload=onLoadPreloadComponents;

इस तरह से मैं क्योंकि मेरे उपयोग के मामले में यह हल नहीं किया है लैंडिंग अंततः लोड होने पर एक फ्लैश इवेंट (फ्लैश से जेएस ब्रिगेड का उपयोग करके) संकेत करता है। लेकिन पिछले कोड को भी काम करना चाहिए। जब लोड पेज ईवेंट ब्राउज़र द्वारा निकाल दिया जाता है तो यह फ़ंक्शन पिछले ऑनलोड कोड और प्रीलोडिंग निष्पादित करेगा।

मैंने एक खाली div cointainer डाला जहां iframe लोड किया जाएगा।

<div id="mainSiteComponentsContainer" style="display: none;"> 
</div>

और समारोह कोड है:

function preloadSiteComponents() { 
    try{ 
     document.getElementById('mainSiteComponentsContainer') 
      .innerHTML= 
       "<iframe src=\"http://www-components.renxo-cdn.net/preload-site-components-data-url-scheme-version-1.2.84-css-1.0.53.html\" frameborder=\"no\" height=\"0px\" width=\"0px\"></iframe>"; 
    }catch(err) { 
    } 
}

आप देख सकते हैं के रूप में, आइफ्रेम के लिए लिंक यूआरएल गतिशील है, यह परिवर्तन विभिन्न बीच संस्करणों (अलग परिनियोजन) plataform एक साथ अवांछित ब्राउज़र कैश से बचने के लिए नई तैनाती

<html class=" gecko win js" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta content="noindex,nofollow" name="robots"> 
     <script src="http://www-components.renxo-cdn.net/scripts/lib-1.2.84.js" type="text/javascript"> 
     <link href="http://www-components.renxo-cdn.net/styles/skin-data-url-scheme-1.0.53.css" media="all" type="text/css" rel="stylesheet"> 
    </head> 
    <body> </body> 
</html>

यहाँ आप घटक है कि मैं पहले से लोड करना चाहते हैं के लिए लिंक देख सकते हैं:

एचटीएमएल कि iframe में हो जाएगा (उदाहरण के लिए) कुछ इस तरह हो सकता है। अंत में, div cointainer iframe होगा। onLoad द्वारा स्थापित करने के बाद:

<div id="mainSiteComponentsContainer" style="display: none;"> 
    <iframe width="0px" height="0px" frameborder="no" src="http://www-components.renxo-cdn.net/preload-site-components-data-url-scheme-version-1.2.84-css-1.0.53.html"> 
     <html class=" gecko win js" xmlns="http://www.w3.org/1999/xhtml"> 
      <head> 
       <meta content="noindex,nofollow" name="robots"> 
       <script src="http://www-components.renxo-cdn.net/scripts/lib-1.2.84.js" type="text/javascript"> 
       <link href="http://www-components.renxo-cdn.net/styles/skin-data-url-scheme-1.0.53.css" media="all" type="text/css" rel="stylesheet"> 
      </head> 
      <body> </body> 
     </html> 
    </iframe> 
</div>

आप काम कर रहे समाधान here देख सकता था।

इस घटकों के देरी लोड को देखने के लिए फ़ायरबग का उपयोग करें।

स्रोत

2012-01-29 13:52:52

इस दृष्टिकोण के साथ समस्या यह है कि साइट वास्तव में कुछ यूआरएल से लोडिंग को रोक सकती है। इस तरह, जैसे ही पृष्ठ लोड हो जाता है आप AJAX का उपयोग उन यूआरएल में नहीं कर सकते हैं। – Konstantin

रैंडम सोचा:

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

स्रोत

2010-09-02 14:42:51 Herms

यह एक अच्छा विचार है, लेकिन पहले मैं गतिशील रूप से iframe जोड़ना नहीं चाहता था क्योंकि यह दो एक्सएचआर कॉल से अधिक जटिल दिखता है। मुझे यह गतिशील रूप से करने की आवश्यकता है ताकि घटक लैंडिंग पृष्ठ के बैनर डोनलोड के साथ बैंडविड्थ में प्रतिस्पर्धा नहीं कर सकें। धन्यवाद। –

आपको गतिशील रूप से IFrame जोड़ने की आवश्यकता नहीं है। यह पृष्ठ के स्रोत में हो सकता है, बस शुरुआत में कुछ भी इंगित न करें। कैश पृष्ठ लॉन्च करने के लिए जावास्क्रिप्ट के माध्यम से बस अपना स्रोत (या जो भी विशेषता है) सेट करें। – Herms

जावास्क्रिप्ट/डीएचटीएम को आईफ्रेम छिपाने की आवश्यकता नहीं है। बस 'शैली = "दृश्यता का उपयोग करें: छुपा; ऊंचाई: 0px; चौड़ाई: 0px" 'स्थिर आईफ़्रेम पर और इसे पृष्ठ में अंतिम स्थान दें। निश्चित आयाम इसे प्रतिपादन को अवरुद्ध करने से रोकेंगे और पृष्ठ में इसकी स्थिति को अन्य संसाधन तत्वों के बाद अपने संसाधनों को लोड करना सुनिश्चित करना चाहिए। – SpliFF

इस की कोशिश की है, लेकिन अपने लैंडिंग HTML के नीचे करने के लिए इस जोड़ने काम करना चाहिए:

<!-- Preload --> 
<img src="/path/to/preload.js" style="display:none"> 
<img src="/path/to/preload.css" style="display:none">

ब्राउज़र वास्तव में परवाह नहीं करता कि संसाधनों छवियों यह प्राप्त करना चाहिए नहीं कर रहे हैं और फिर भी उन्हें कैश । ब्राउज़र आमतौर पर पेज ऑर्डर में संसाधन लोड करता है ताकि आप अन्य तत्वों में देरी न करें और display:none के साथ आप शायद प्रतिपादन को अवरुद्ध नहीं करेंगे।

डाउनसाइड यह है कि आप सीएसएस या @imports में परिभाषित छवियों को प्रीलोड नहीं करेंगे जबतक कि आप उन्हें मैन्युअल रूप से प्रीलोड नहीं करते।

स्रोत

2012-01-28 10:53:15 SpliFF

मुझे लगता है कि मैं इसका परीक्षण करूंगा, हालांकि मैंने एक संसाधन देखा है जो "डिस्प्ले: कोई नहीं" कुछ ब्राउज़रों में लोड नहीं होता है, और यह करने के लिए एक बहुत ही उचित चीज की तरह लगता है। –

मैंने पढ़ा है कि कुछ ब्राउज़रों के पास विभिन्न प्रकार के संसाधनों के लिए अलग-अलग कैश जोन हैं। तो उदाहरण के लिए ब्राउज़र में छवियों के लिए कैश जोन हो सकता है और जेएस के लिए दूसरा। तो, विचार अच्छा है लेकिन शायद सभी मुख्य ब्राउज़रों में काम नहीं करेगा। –

@romkyms: 'style =" दृश्यता: छुपा; चौड़ाई: 0; ऊंचाई: 0 "वास्तव में डाउनलोड होना चाहिए। @ जोनाथन: मुझे लगता है कि बहुत संभावना नहीं है, इस तरह के कैश संसाधनों को विभाजित करने के बारे में सोचने के लिए कोई अच्छा तकनीकी कारण नहीं है। – SpliFF

उत्तर

संबंधित मुद्दे