Wie können JavaScript- und CSS-Dateien im Hintergrund geladen werden, um sie im Browser-Cache bereit zu halten, wenn der Benutzer auf die Hauptseite wechselt?

Ich möchte eine JS-Datei und eine CSS-Datei von der Zielseite laden, um die Hauptlast der Website nach der Konvertierung in der Landung zu optimieren. Ich war auf der Suche nach Informationen über diese und versuchte schließlich diese mit zu erledigen:Wie können JavaScript- und CSS-Dateien im Hintergrund geladen werden, um sie im Browser-Cache bereit zu halten, wenn der Benutzer auf die Hauptseite wechselt?

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

Mit Firefox ist dieser große, aber mit Chrome scheint es, dass die XHR Anrufe in einem anderen Cache als die CSS und JS-Dateien zwischengespeichert werden. Wir verwenden JQuery nicht, die Zielseite muss leicht sein (weniger Last, mehr Conversion-Rate).

Haben Sie eine Empfehlung für eine andere Möglichkeit, das ursprüngliche Problem zu lösen? (Komponenten vor dem Laden)

Wissen Sie, wie Sie Chrome dazu bringen, diese Anforderungen zwischenzuspeichern?

Quelle

2010-09-02 Jonathan Barbero

Dies ist eine getestete Lösung in einem großen Volumen, die funktioniert.

zunächst einen Wettbewerb zwischen der Zielseite Ressourcen und den vorgespannten Mitteln für die Bandbreite vermeiden Sie die Last mit Javascript verzögern könnten:

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

window.onload=onLoadPreloadComponents;

Dies ist nicht die Art, wie ich dies, weil in meinem Anwendungsfall gelöst Ein Flash-Ereignis (mit der Flash-to-JS-Brücke) signalisiert, wann die Landung endlich geladen wurde. Aber der vorherige Code muss auch funktionieren. Wenn die Seite vom Browser ausgelöst wird, führt diese Funktion den vorherigen onLoad-Code und das Vorladen aus.

Ich lege eine leere Div-Maintainer, wo der Iframe geladen wird.

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

Und der Funktionscode:

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) { 
    } 
}

Wie könnten Sie die Link-URL zu iframe sehen, ist dynamisch, es ändert sich zwischen differents Versionen (verschiedene Einsätze) Plataform mit einem unerwünschten Browser-Cache zu vermeiden neue Bereitstellungen

Der HTML-Code, in dem iframe sein könnte wie folgt (zum Beispiel):

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

Hier finden Sie die Links zu den Komponenten sehen können, die ich vorab zu laden will. Schließlich wird der div cointainer den iframe haben. Nach dem Ereignis 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>

Sie konnten die Arbeitslösung here sehen.

Verwenden Sie Firebug, um die verzögerte Belastung dieser Komponenten zu sehen.

Quelle

2012-01-29 13:52:52

Das Problem mit diesem Ansatz ist, dass die Website das Laden bestimmter URLs wirklich verhindern kann. Auf diese Weise können Sie, sobald die Seite geladen ist, AJAX nicht mehr für diese URLs verwenden. – Konstantin

Zufällige Gedanken:

Vielleicht könnten Sie ein verstecktes IFrame in der Zielseite enthalten, die eine Seite lädt, die nichts tut, sondern auch Ihre Javascript und CSS-Dateien. Wenn Sie das Laden dieses IFrame in Ihrem Javascript auslösen, sollte es nicht das Laden oder Rendern der Zielseite blockieren, aber das Skript und die CSS-Dateien werden vom Browser auf die gleiche Weise wie für jede andere Seite geladen.

Quelle

2010-09-02 14:42:51 Herms

Das ist eine gute Idee, aber zuerst wollte ich den iframe nicht dynamisch hinzufügen, weil er komplizierter aussieht als zwei XHR-Aufrufe. Ich muss dies dynamisch tun, damit die Komponenten nicht in Bandwidth mit dem Banner Donwload der Landing Page konkurrieren. Danke. –

Sie müssen den IFrame nicht dynamisch hinzufügen. Es kann in der Quelle für die Seite sein, einfach nicht auf etwas anfänglich hinweisen. Setzen Sie einfach seinen src (oder was auch immer das Attribut ist) über Javascript, um die Cache-Seite zu starten. – Herms

Javascript/DHTML ist nicht erforderlich, um einen Iframe zu verbergen. Verwenden Sie einfach "style =" visibility: hidden; height: 0px; width: 0px "' auf einem statischen iframe und platzieren Sie ihn zuletzt auf der Seite. Die festen Dimensionen verhindern, dass das Rendern blockiert wird, und seine Position auf der Seite sollte sicherstellen, dass die Ressourcen nach anderen Seitenelementen geladen werden. – SpliFF

habe nicht versucht aber, diese zu der Unterseite Ihrer Landung HTML sollte funktionieren:

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

Der Browser tatsächlich kümmert sich nicht darum, dass die Ressourcen nicht Bilder, die sie holen sollte und cachen sie trotzdem . Browser laden Ressourcen normalerweise in Seitenreihenfolge, so dass Sie andere Elemente nicht verzögern und mit display:none werden Sie wahrscheinlich auch nicht das Rendern blockieren.

Nachteil ist, dass Sie Bilder, die in CSS oder @imports definiert sind, nur dann laden, wenn Sie sie manuell laden.

Quelle

2012-01-28 10:53:15 SpliFF

Ich denke, ich werde das testen, obwohl ich eine Ressource gesehen habe, die "display: none" vorgeschlagen hat, wird in einigen Browsern nicht geladen, und das klingt nach einer sehr vernünftigen Sache zu tun. –

Ich habe gelesen, dass einige Browser verschiedene Cache-Zonen für verschiedene Arten von Ressourcen haben. So könnte beispielsweise der Browser eine Cache-Zone für Bilder und eine weitere für JS haben. Also, die Idee ist gut, aber wird wahrscheinlich nicht in allen gängigen Browsern funktionieren. –

@romkyms: 'style =" visibility: hidden; width: 0; height: 0 "sollte eigentlich heruntergeladen werden. @ Jonathan: Ich halte das für ziemlich unwahrscheinlich, es gibt keinen guten technischen Grund, um Cache-Ressourcen so zu kompartimentieren. – SpliFF

Wie können JavaScript- und CSS-Dateien im Hintergrund geladen werden, um sie im Browser-Cache bereit zu halten, wenn der Benutzer auf die Hauptseite wechselt?

Antwort

Verwandte Themen