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

Question

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

Есть ли способ заставить браузер начать загрузку и кэширование javascript и CSS для страницы "подробный продукт", пока пользователь просто просматривает страницу "все продукты" и пытается сделать выбор? *

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

Есть предложения о том, как это реализовать?

Answer 1

Если вы используете JavaScript-фреймворк (например, jQuery, protype и т. Д.), Вы можете использовать простой метод для вызова AJAX. Если нет, то вам придется написать такой, который может немного сбить с толку тех, кто не знаком с JavaScript. Базовый пример: здесь .

Вы можете использовать JavaScript для добавления тегов script на свою HTML-страницу, и она будет включать JS. Помните, что если JS настроен на автоматическое выполнение любого кода, это произойдет. Для CSS ваш единственный вариант - использовать JavaScript для отправки запроса на захват файла (см. Выше). Вы можете включить CSS, но он заменит любые стили из вашего исходного файла CSS.

Веб-сайты, которые предварительно кэшируются:
Веб-сайты, в том числе такие крупные, как Google и Yahoo, используют проповеди для повышения производительности. Google для экземпляров загружает спрайт CSS http://www.google.com/images/nav_logo7.png на их главную страницу вместе с другими файлами CSS и JS, которые не полностью используются только на главной странице. Большинство людей уже делают что-то похожее на это, просто объединяя свои CSS и JS-файлы в один файл в процессе производства. HTTP-запросы занимают больше времени, чем загрузка самого контента. Пример проповеди Yahoo здесь здесь

Yahoo говорит об этом с помощью YSlow здесь .

Взято из одной части руководства здесь :
80% времени отклика конечного пользователя тратится на интерфейс. Большая часть этого времени связана с загрузкой всех компонентов на странице: изображений, таблиц стилей, сценариев, Flash и т. Д. Сокращение количества компонентов, в свою очередь, уменьшает количество HTTP-запросов, необходимых для отображения страницы. Это ключ к более быстрым страницам.

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

Сокращение / сжатие :
Помните, что HTTP-запросы - это зло. Сжатый файл JavaScript и сжатый файл CSS настолько малы, что я почти на 100% уверен, что на главной странице есть изображение, которое меньше его. Поэтому бессмысленно беспокоиться о том, чтобы разделить их на странице. На самом деле это скорее повышение производительности, чтобы разделить их на несколько страниц.

CSS-спрайты
Суть CSS спрайтов в том, что на веб-сайте, вероятно, более 40 изображений на странице с использованием CSS. Ну, это 40+ HTTP-запросов на странице загрузки пользователя, это много запросов. Это не только плохо для пользователя, но и множество запросов, которые приходится обрабатывать вашему веб-серверу. Если вы не используете статический контент-сервер и просто используете Apache, который находится на вашем главном хосте, вы плохо работаете с сервером Apache, загружаемым запросами, которые он может обслуживать для вашего веб-приложения. Вы можете уменьшить это, объединяя ваши изображения в один файл или, по крайней мере, в меньшее количество файлов. Используя свойство background-position CSS, вы можете творить чудеса.

Я настоятельно рекомендую прочитать рекомендации YSlow от Yahoo здесь: http://developer.yahoo.com/yslow/help/#guidelines

Answer 2

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

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

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

Answer 3

используйте setTimeout в событии загрузки страницы и установите время ожидания в несколько секунд, после этого вставьте тег страницы и тег css на страницу (те, что на следующей странице)

примерно так: (где url - это URL-адрес того, что вы хотите кешировать)

    //cache a script
    var scriptTag = document.createElement("script");
    scriptTag.setAttribute("type", "text/javascript");
    scriptTag.setAttribute("src", url);
    document.getElementsByTagName("head")[0].appendChild(scriptTag);

    //cache an image:
    var img = new Image(); img.src = url;

    //cache a css
    var css= document.createElement("style");
    css.setAttribute("type", "text/css");
    css.setAttribute("src", url);
    document.getElementsByTagName("head")[0].appendChild(css);