Comment pré-charger les fichiers JavaScript et CSS en arrière-plan, pour les avoir prêts dans le cache du navigateur lorsque l'utilisateur accède à la page principale?

Je veux précharger un fichier JS et un fichier CSS de la page de destination pour optimiser la charge du site principal, après la conversion à l'atterrissage. Je cherchais des informations à ce sujet et a finalement essayé d'obtenir ce fait en utilisant:Comment pré-charger les fichiers JavaScript et CSS en arrière-plan, pour les avoir prêts dans le cache du navigateur lorsque l'utilisateur accède à la page principale?

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

Avec Firefox ce grand, mais avec Chrome il semble que les appels XHR sont mises en cache dans un cache différent du css et des fichiers js. Nous n'utilisons pas JQuery, la page de destination doit être légère (moins de charge, plus de taux de conversion).

Avez-vous une recommandation d'une autre façon pour résoudre le problème d'origine? (préchargez les composants)

Savez-vous comment faire en sorte que Chrome cache ces demandes?

Source

2010-09-02 Jonathan Barbero

Ceci est une solution testée dans un site à volume élevé qui fonctionne.

En premier lieu, afin d'éviter une concurrence entre les ressources de la page de destination et les ressources préchargées pour la bande passante, vous pouvez retarder la charge avec javascript:

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

window.onload=onLoadPreloadComponents;

Ce n'est pas la façon dont je résolu ce problème parce que dans mon cas d'utilisation un événement flash (utilisant le flash vers JS brigde) signale l'atterrissage final. Mais le code précédent doit aussi fonctionner. Lorsque l'événement charger la page est déclenché par le navigateur, cette fonction exécute le code onLoad précédent et le préchargement.

J'ai mis un cointainer div vide où le iframe sera chargé.

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

Et le code de fonction est:

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

Comme vous pouvez le voir, le lien URL pour iFrame est dynamique, il change entre versions différentes Plataform (différents déploiements) afin d'éviter le cache indésirable du navigateur avec nouveaux déploiements.

Le code HTML qui sera dans le iframe pourrait être quelque chose comme ceci (par exemple):

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

Ici vous pouvez voir les liens vers les composants que je veux précharger. Enfin, le div cointainer aura l'iframe. Après l'événement 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>

Vous pouvez voir la solution de travail here. Utilisez Firebug pour voir la charge différée de ces composants.

Source

2012-01-29 13:52:52

Le problème avec cette approche est que le site peut vraiment empêcher le chargement de certaines URL. De cette façon, dès que la page est chargée, vous ne pouvez pas utiliser AJAX pour ces URL. – Konstantin

pensée au hasard:

Peut-être que vous pourriez inclure un IFrame caché dans votre page de destination qui charge une page qui ne fait rien, mais inclure vos fichiers javascript et CSS. Si vous lancez le chargement de cet IFrame dans votre javascript alors il ne devrait pas bloquer le chargement ou le rendu de la page d'atterrissage, cependant le script et les fichiers CSS seront chargés par le navigateur de la même manière que pour n'importe quelle autre page.

Source

2010-09-02 14:42:51 Herms

C'est une bonne idée, mais au début, je ne voulais pas ajouter dynamiquement l'iframe, car il semble plus compliqué que deux appels XHR. Je dois le faire de façon dynamique afin que les composants ne soient pas en concurrence avec la charge de bannière de la page de destination. Merci. –

Vous n'avez pas besoin d'ajouter dynamiquement l'IFrame. Il peut être dans la source de la page, mais ne l'indique pas initialement. Définissez simplement src (ou quel que soit l'attribut) via javascript pour lancer la page de cache. – Herms

Javascript/DHTML n'est pas requis pour cacher un iframe. Utilisez simplement 'style =" visibility: hidden; height: 0px; width: 0px "' sur un iframe statique et placez-le en dernier dans la page. Les dimensions fixes l'empêcheront de bloquer le rendu et sa position dans la page devrait assurer le chargement de ses ressources après les autres éléments de la page. – SpliFF

ai pas essayé, mais en ajoutant ceci au fond de votre HTML d'atterrissage devrait fonctionner:

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

Le navigateur ne se soucie pas vraiment que les ressources ne sont pas des images qu'il devrait récupérer et les mettre en cache de toute façon . Le navigateur charge généralement les ressources dans l'ordre des pages afin de ne pas retarder d'autres éléments et avec display:none vous ne bloquerez probablement pas le rendu. Vous ne préchargez pas les images définies dans le CSS ou @imports à moins que vous ne les préchargiez manuellement.

Source

2012-01-28 10:53:15 SpliFF

Je suppose que je vais tester cela, bien que j'ai vu une ressource qui a suggéré "display: none" ne pas être chargé dans certains navigateurs, et cela semble être une chose très raisonnable à faire. –

J'ai lu que certains navigateurs ont différentes zones de cache pour différents types de ressources. Ainsi, par exemple, le navigateur pourrait avoir une zone de cache pour les images et une autre pour JS. Donc, l'idée est bonne mais ne fonctionnera probablement pas dans tous les principaux navigateurs. –

@romkyms: 'style =" visibilité: caché; largeur: 0; hauteur: 0 "' devrait en fait télécharger. @Jonathan: Je considère que c'est plutôt improbable, il n'y a pas de bonne raison technique que je puisse imaginer pour compartimenter les ressources de cache comme ça. – SpliFF

Comment pré-charger les fichiers JavaScript et CSS en arrière-plan, pour les avoir prêts dans le cache du navigateur lorsque l'utilisateur accède à la page principale?

Répondre

Questions connexes