Как предварительно загрузить файлы JavaScript и CSS в фоновом режиме, чтобы они были готовы в кеше браузера при переходе пользователя на главную страницу? - PullRequest
Новая
       35

Как предварительно загрузить файлы JavaScript и CSS в фоновом режиме, чтобы они были готовы в кеше браузера при переходе пользователя на главную страницу?

5 голосов
/ 02 сентября 2010

Я хочу предварительно загрузить JS-файл и CSS-файл с целевой страницы, чтобы оптимизировать загрузку основного сайта после преобразования в целевой папке.Я искал информацию об этом и, наконец, попытался сделать это, используя: 

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

С Firefox это замечательно, но с Chrome кажется, что вызовы XHR кэшируются в другом кэше, чем css и jsфайлы.Мы не используем JQuery, целевая страница должна быть легкой (меньше нагрузки, больше коэффициент конверсии).

Есть ли у вас какие-либо рекомендации по решению исходной проблемы?(предварительная загрузка компонентов)

Знаете ли вы, как сделать Chrome кэшировать эти запросы?

Ответы [ 3 ]

2 голосов
/ 29 января 2012

Это проверенное решение для большого сайта, которое работает.

Во-первых, чтобы избежать конкуренции между ресурсами целевой страницы и предварительно загруженными ресурсами для полосы пропускания, вы можете отложить загрузку с помощью javascript: 

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

window.onload=onLoadPreloadComponents;

Это не тот способ, которым я решил это, потому что в моем случае использования событие flash (с использованием Flash to JS brigde) сигнализирует, когда приземление было наконец загружено. Но предыдущий код тоже должен работать. Когда браузер генерирует событие load page , эта функция выполнит предыдущий код onLoad и предварительную загрузку.

Я положил пустой контейнер для монет div, куда будет загружен 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) {
    }
}

Как вы могли видеть, URL ссылки на iframe является динамическим, он изменяется между разными версиями платформы (различные развертывания), чтобы избежать нежелательного кэша браузера при новых развертываниях.

HTML-код, который будет в iframe, может выглядеть примерно так (например): 

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

Здесь вы можете увидеть ссылки на компоненты, которые я хочу предварительно загрузить. Наконец, у divtainer будет 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>

Вы можете увидеть рабочее решение здесь .

Используйте Firebug для просмотра отложенной загрузки этих компонентов.

2 голосов
/ 02 сентября 2010

Случайная мысль:

Может быть, вы могли бы включить в свою целевую страницу скрытый IFrame, который загружает страницу, которая ничего не делает, кроме ваших файлов JavaScript и CSS. Если вы инициируете загрузку этого IFrame в своем javascript, тогда он не должен блокировать загрузку или рендеринг целевой страницы, однако файлы скрипта и CSS будут загружаться браузером так же, как и для любой другой страницы. *

0 голосов
/ 28 января 2012

Не пробовал, но добавление в нижнюю часть HTML-кода вашей посадки должно работать: 

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

Браузеру на самом деле все равно, что ресурсы не являются изображениями, которые он должен извлекать и кэшировать. Браузер обычно загружает ресурсы в порядке страниц, поэтому вы не задерживаете другие элементы, а с display:none вы, вероятно, тоже не будете блокировать рендеринг.

Недостатком является то, что вы не будете предварительно загружать изображения, определенные в CSS или @imports, если вы не загрузите их вручную.

...