Предварительная загрузка внешних файлов (CSS, JavaScript) для других страниц

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

Я хочу, чтобы первая страница сайта была как можно быстрее (худой и средний). Вполне вероятно, что пользователь не сразу нажмет на ссылку. Поскольку, вероятно, будет некоторое время простоя, это кажется подходящим временем для предварительной загрузки некоторых внешних активов. Поджимать должно привести к их кэшированию. Когда пользователь нажимает на другую страницу, единственный необходимый запрос будет для содержимого и, возможно, некоторых изображений и т. д.

кто-нибудь делал это? Это плохая идея? Есть ли элегантный способ его реализации?

11
css html javascript jquery preload

9 ответов

Это интересная идея, я не уверен, что это можно сделать с помощью Javascript (по крайней мере, часть CSS).

вы можете разместить IFRAME на странице с другими ресурсами, которые хотите загрузить, но поместите на него CSS, чтобы скрыть его...

.preload {
    position : absolute;
    top      : -9999px;
    height   : 1px;
    width    : 1px;
    overflow : hidden;
}

Если вы поместите это в конце страницы, то я думаю, что он будет загружать после остальная часть страницы. Если нет, вы можете использовать Javascript и setTimeout для фактического создания IFRAME после страницы нагрузки.

7

загрузка всего в скрытом iframe-не единственный способ. Есть два фантастических сообщения Стояна Стефанова о предварительной загрузке / предварительной выборке JS и CSS-файлов для оптимизации.

вот ссылки:

http://www.phpied.com/the-art-and-craft-of-postload-preloads/

http://www.phpied.com/preload-cssjavascript-without-execution/

Мне лично очень нравится подход AJAX. Его хороший и чистый и работает отлично, если вы не хотите получать междоменные вещи.

его последняя техника во второй ссылке также выглядит чрезвычайно многообещающей (хотя я еще не пробовал ее.)

8

скрытая идея iFrame, которую люди защищают, будет работать просто отлично.

Если время загрузки страницы целевой страницы также является приоритетом, то нужно будет создать iframe динамически в javascript после завершения загрузки страницы.

4

Это до вас, чтобы принять решение пропускную способность.

Если вы предварительно загрузите все, вы получите лучший пользовательский опыт, но очень высокий потребление пропускной способности, так как пользователь может даже не использовать этот материал, который был загружен, что делает его очень неэффективным.

Если вы ничего не загружаете, пропускная способность используется как минимум, и пользователь загружает только что для этого нужно.

2

группа нитей имеет хороший скрипт jQuery, который будет предварительно загружать изображения из файла CSS:

группа накаливания артикул

на самом деле, есть ряд других решений на основе jQuery, если вы google "jQuery preload".

2

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

1

Я согласен с Гаретом, я бы создал iframe динамически. Вы захотите поместить этот код как самую последнюю вещь на вашей целевой странице.

например:

....
  <script type="text/javascript">
    preloadContent();
  </script>
</body>
</html>

что касается кэширования, это действительно зависит от вашей настройки. Но ссылка на Yahoo! веб-сайт должен быть хорошим началом:http://developer.yahoo.com/performance/rules.html#expires Короче говоря, хорошая техника - иметь статические файлы (CSS, изображения, потенциально даже скрипты) с 1 годом срок годности. Таким образом, все, что ваш клиент извлек, будет храниться в кэше браузера, даже не проверяя наличие новых версий.

Если вы do необходимо изменить файл:

  • создать другой файл (т. е. другое имя файла) для изображений
  • CSS и скрипты могут быть добавлены номер версии / даты в конце.

Это гарантирует, что клиент не использует устаревший контент.

Ура!

1

Я думаю, вы должны проанализировать, сколько времени требуется пользователю, чтобы перейти на другую страницу после посадки на главной странице.

затем проверьте, какие ссылки на главных страницах следуют чаще всего, и на главной странице/onload событие запускает функцию таймера setTimeOut, которая выполнит вашу вспомогательную функцию с кодом предварительной загрузки для наиболее вероятных следующих ссылок.

0

вы можете предварительно выбирать произвольные файлы (CSS, изображения и т. д.) таким образом, вопрос заключается в том, делает ли небольшая отдача и добавленная стоимость полосы пропускания правильной оптимизацией. правила производительности Yahoo являются отличной отправной точкой. Если это ваша первая оптимизация производительности, то вы, вероятно, начинаете не в том месте. Это, безусловно, оптимизация с основным компромиссом (увеличение пропускной способности), в то время как другие оптимизации, такие как " минимизация HTTP Запросы " имеют меньшие затраты и, вероятно, гораздо большую отдачу.

чтобы сделать это совместимым с кросс-браузером способом, вы в основном добавите код к событию onload вашей страницы, которое создает объект DOM , например, и устанавливает его src в URL, который вы хотите предварительно выбрать. Обратите внимание, что, поскольку большая часть посетителей, вероятно, посещают только вашу первую страницу, они никогда не запросили бы файлы, которые вы предварительно загрузили. Я видел, как такая предварительная загрузка приводит к увеличению запросов в несколько раз и пропускная способность для предварительно выбранных файлов.

0