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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

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

Вот ссылки:

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

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

Статья группы нитей

На самом деле существует множество других решений на основе jQuery, если вы загружаете jquery preload.

Ответ 6

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

Ответ 7

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

например:

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

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

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

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

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

Ура!

Ответ 8

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

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

Ответ 9

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

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