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

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

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

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

Ответы на вопрос(9)

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

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

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

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

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

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

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

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

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

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

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

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

Вот ссылки:

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

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

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

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

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

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

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

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

На самом деле, существует ряд других решений на основе jQuery, если вы используете google «jquery preload».

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

Например:

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

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

если тыdo должны изменить файл:

Create a different file (i.e. different file name) for images CSS and scripts could be appended a version/date number at the end.

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

Ура!

ВАШ ОТВЕТ НА ВОПРОС