Jak wczytać pliki JavaScript i CSS w tle, aby przygotować je w pamięci podręcznej przeglądarki, gdy użytkownik przejdzie na stronę główną?

Chcę wstępnie wczytać plik JS i plik CSS ze strony docelowej, aby zoptymalizować obciążenie strony głównej, po konwersji na etapie lądowania. Szukałem informacji na ten temat i wreszcie starał się to zrobić za pomocą:Jak wczytać pliki JavaScript i CSS w tle, aby przygotować je w pamięci podręcznej przeglądarki, gdy użytkownik przejdzie na stronę główną?

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

Z Firefox to wielki, ale z Chrome wydaje się, że rozmowy XHR są buforowane w innej pamięci podręcznej niż pliki CSS i JS. Nie używamy JQuery, strona docelowa musi być lekka (mniejsze obciążenie, wyższy współczynnik konwersji).

Czy masz jakieś zalecenia dotyczące innego sposobu rozwiązania pierwotnego problemu? (wstępnie zainstalowane komponenty)

Czy wiesz, jak sprawić, by Chrome buforował te żądania?

Źródło

2010-09-02 Jonathan Barbero

To jest przetestowane rozwiązanie na stronie o dużej objętości, która działa.

Po pierwsze, aby uniknąć konkurencji między zasobów strony docelowej oraz preinstalowanym zasobów dla pasma można opóźnić obciążenie z javascript:

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

window.onload=onLoadPreloadComponents;

To nie jest tak, jak rozwiązać to dlatego, że w moim przypadku użycia zdarzenie flash (z użyciem Flasha do JS brigde) sygnalizuje, kiedy lądowanie zostało ostatecznie załadowane. Ale poprzedni kod również musi działać. Kiedy zdarzenie zostanie wywołane przez przeglądarkę, ta funkcja wykona poprzedni kod onLoad i wstępne ładowanie.

Położyłem pusty element, w którym zostanie załadowany element iframe.

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

a kod funkcji jest:

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

Jak można zobaczyć, link url do iframe jest dynamiczna, zmienia między zróżnicowanych plataform wersje (różne wdrożeń), aby uniknąć niechcianego pamięć podręczną przeglądarki z nowe wdrożenia.

HTML, który będzie w iframe może być coś takiego (na przykład):

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

Tutaj można zobaczyć linki do elementów, które chcę przekręceniem. Wreszcie, element div elementu div będzie miał element iframe. Po zdarzeniu 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>

Widać roztworu roboczego here.

Użyj Firebug, aby zobaczyć opóźnione obciążenie tych komponentów.

Źródło

2012-01-29 13:52:52

Problem z tym podejściem polega na tym, że witryna może naprawdę zapobiec ładowaniu z niektórych adresów URL. W ten sposób, zaraz po załadowaniu strony, nie możesz używać AJAX do tych adresów URL. – Konstantin

Losowe myśl:

Być może można to ukryty iframe w stronę docelową, która ładuje stronę, która nic nie robi, ale podać swoje pliki JavaScript i CSS. Jeśli uruchomisz ładowanie tego elementu IFrame w javascript, nie powinno to blokować ładowania lub renderowania strony docelowej, ale pliki skryptu i css będą ładowane przez przeglądarkę w taki sam sposób, jak w przypadku każdej innej strony.

Źródło

2010-09-02 14:42:51 Herms

To dobry pomysł, ale na początku nie chciałam dodawać dynamicznie elementu iframe, ponieważ wygląda on bardziej skomplikowanie niż dwa wywołania XHR. Muszę to zrobić dynamicznie, aby komponenty nie konkurowały w pasmach z banerem donwload strony docelowej. Dzięki. –

Nie trzeba dynamicznie dodawać ramki IFrame. Może znajdować się w źródle strony, po prostu nic nie wskazuje na nic. Wystarczy ustawić jego src (lub jakikolwiek atrybut jest) za pośrednictwem javascript, aby uruchomić stronę pamięci podręcznej. – Herms

JavaScript/DHTML nie jest wymagany do ukrycia elementu iframe. Po prostu użyj "style =" visibility: hidden; height: 0px; width: 0px "" na statycznym elemencie iframe i umieść go na ostatniej stronie. Ustalone wymiary zapobiegną blokowaniu renderowania, a jego pozycja na stronie powinna zapewniać ładowanie zasobów po innych elementach strony. – SpliFF

nie próbowałem tego, ale dodanie tego do dołu lądowania HTML powinno działać:

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

Przeglądarka faktycznie nie obchodzi, że zasoby nie są obrazy powinny pobierał i tak je w pamięci podręcznej . Przeglądarka zazwyczaj ładuje zasoby w kolejności stron, więc nie opóźnisz innych elementów, a przy display:none prawdopodobnie również nie będziesz blokować renderowania.

Wadą jest to, że nie wczytasz wstępnie obrazów zdefiniowanych w CSS lub @imports, chyba że wstępnie załadujesz je ręcznie.

Źródło

2012-01-28 10:53:15 SpliFF

Chyba przetestuję to, chociaż widziałem zasób, który sugerował "display: none", nie ładuj się w niektórych przeglądarkach, a to brzmi jak bardzo rozsądna rzecz do zrobienia. –

Przeczytałem, że niektóre przeglądarki mają różne strefy pamięci podręcznej dla różnych rodzajów zasobów. Na przykład przeglądarka może mieć strefę pamięci podręcznej dla obrazów i inną dla JS. Pomysł jest dobry, ale prawdopodobnie nie będzie działać we wszystkich głównych przeglądarkach. –

@romkyms: 'style =" visibility: hidden; width: 0; height: 0 "' should actually download. @ Jonathan: Uważam, że jest to mało prawdopodobne, nie ma dobrego technicznego powodu, dla którego mógłbym pomyśleć o rozdzieleniu zasobów pamięci podręcznej w ten sposób. – SpliFF

Jak wczytać pliki JavaScript i CSS w tle, aby przygotować je w pamięci podręcznej przeglądarki, gdy użytkownik przejdzie na stronę główną?

Odpowiedz

Powiązane problemy