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

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

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

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


javascript html jquery css preload
person Jason Young    schedule 29.06.2009    source источник

Ответы (7)


arrow_upward
7
arrow_downward

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

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

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

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

person hugoware    schedule 29.06.2009
comment
Я попробовал это, используя $(window).load(xxx) в jquery. Это сработало отлично. Спасибо за идею iFrame! Предварительно загрузил несколько огромных изображений, и следующая страница загрузилась мгновенно. Я мог видеть использование для этого! - person Jason Young; 30.06.2009
comment
это именно то, что я думал сделать, прежде чем увидеть этот ответ. Хороший трюк! - person Junior Mayhé; 28.02.2010

arrow_upward
4
arrow_downward

Скрытая идея iFrame, которую отстаивают люди, отлично сработает.

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

person Gareth Simpson    schedule 29.06.2009

arrow_upward
2
arrow_downward

Вы сами должны принять решение о пропускной способности.

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

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

person Luca Matteis    schedule 29.06.2009

arrow_upward
1
arrow_downward

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

person Peter Bailey    schedule 29.06.2009

arrow_upward
1
arrow_downward

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

E.g:

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

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

Если вам нужно изменить файл:

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

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

Ваше здоровье!

person Oli    schedule 29.06.2009

arrow_upward
0
arrow_downward

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

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

person AlexA    schedule 29.06.2009

arrow_upward
0
arrow_downward

Вы можете выполнять предварительную загрузку произвольных файлов (CSS, изображений и т. д.). Вопрос заключается в том, делают ли небольшую отдачу и дополнительные затраты на пропускную способность правильной оптимизацией, которую следует проводить сейчас. Правила производительности Yahoo — отличная отправная точка. Если это ваша первая оптимизация производительности, то вы, вероятно, начинаете не с того места. Это определенно оптимизация с большим компромиссом (увеличение пропускной способности), в то время как другие оптимизации, такие как «Минимизировать HTTP-запросы», имеют меньшие затраты и, вероятно, гораздо большую отдачу.

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

person aem    schedule 29.06.2009