Как я могу предварительно загрузить страницу с помощью HTML5?

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

Ответ 1

Предварительная выборка включена в спецификацию W3C под названием "Советы по ресурсам" . Он реализован в Firefox, Chrome, IE 11, Edge, Opera после 12.1, а Android Browser - с 4.4.4, см. Страницу preietch caniuse для более подробной информации, актуальную информацию.

Также см. страницы caniuse и spec для связанных технологий (поддерживаемые браузеры впоследствии извлекаются из caniuse и обновляются по состоянию на сентябрь 2015 года):

Prerendering caniuse/spec (IE 11, Edge, Chrome, Opera)
Отключение caniuse/spec (Firefox, Chrome 46, Opera 33)
Предварительная выборка DNS caniuse/спецификация (IE9 (см. примечание ниже), IE10, все остальные браузер, кроме Opera Mini и, возможно, iOS Safari и Android Browser).

IE 9 реализовал только предварительную выборку DNS, но назвал ее "prefetch" (осторожно!). Chrome на некоторое время (по крайней мере, до 2013 года) только сделал предварительную предварительную выборку и предварительную выборку DNS. IE11 реализует lazyload, для изображений; Microsoft попыталась получить его в спецификации, но пока это не так. iCab указано, чтобы быть первым браузером, реализующим предварительную выборку, хотя это поведение было автоматическим, а не контролируемым разметкой.

Историческая справка

В Mozilla Application Suite, а затем и в Firefox реализована спецификация (спецификация фактически основана на ранней реализации предварительной загрузки Mozilla, которая была в некоторой степени основана на заголовке Link:, указанном в RFC 2068, который теперь был заменен RFC 2616 [который не ссылается на заголовок Link:]. См. эту старую версию документов (🕔) для более подробной информации.) По документации по MDN (🕔):

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

Браузер ищет либо HTML <link>, либо заголовок HTTP Link: с типом отношения либо next, либо prefetch.

Итак, синтаксис:

<link rel="prefetch" href="/path/to/prefetch" />

Вы также можете использовать заголовок HTTP Link::

Link: </page/to/prefetch>; rel=prefetch

Или a <meta>, чтобы имитировать тот же HTTP-заголовок:

<meta http-equiv="Link" content="&lt;/page/to/prefetch&gt;; rel=prefetch">

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

iCab

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

Ответ 2

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

<link rel="next" href="http://www.example.com/link-reference">

Ответ 3

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

Как это работает

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

Ответ 4

Предварительное кодирование активов - одна из самых сложных и простых задач в проекте FLASH или HTML5, потому что мы сделали FLASH-проекты конверсии HTML5.

Простейшими видами прелоадеров являются статические предварительные загрузчики, используемые для загрузки фильма, в котором они существуют. Для этих предварительных загрузчиков все, что вам нужно сделать, это остановить фильм на экране предварительного натяжения, как правило, в первом кадре фильма и сохранить его там, пока вы не сможете определить, что фильм полностью загружен в проигрыватель Flash.

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

Мы использовали jQuery HMTL5 Loader в наших веб-приложениях (HTML5), вы можете увидеть Github Repo здесь.

Этот плагин нуждается в файле JSON для получения файлов, которые он должен предварительно загружать, и он может предварительно загружать изображения, html5 видео и аудио источники, script и текстовые файлы. В дополнение к этому у него есть разные типы погрузчиков (круговой, линейный, большой счетчик и т.д.) И дополнительные возможности.

Выполняется так.

<script>
    var loaderAnimation = $("#html5Loader").LoaderAnimation();
    $.html5Loader({getFilesToLoadJSON:'json file',
        onUpdate: loaderAnimation.update,
        debugMode:false
    });
</script>

Он отлично работает в разных браузерах, включая Chrome, FireFox, Safari, Opera и т.д. и в мобильных браузерах.

Примечание. Мы использовали это для наших веб-приложений HTML5, которые работают на разных платформах, включая android и iOS.

Ответ 5

Существует несколько способов предварительной загрузки страницы:

Предварительная выборка DNS сообщает браузеру, что некоторые ресурсы из другого домена необходимы, поэтому он может как можно быстрее разрешить DNS. Для этого вам нужно добавить <link rel="dns-prefetch" href="//example.com"> в документ. Это может быть полезно, если вам нужно использовать 3-х партийные элементы.
Preconnect делает шаг дальше, а не только разрешает DNS, но также делает рукопожатие TCP, и если вы предварительно подключаетесь к https, сделают переговоры TLS. В заголовке вы должны добавить <link rel="preconnect" href="#" onclick="location.href='https://example.com/'; return false;">
Prefetch загружает ресурс и сохраняет его в кеше браузера, чтобы использовать его позже. Вы можете сделать <link rel="prefetch" href="imgs/image.png">. Обратите внимание, что это зависит от браузера, чтобы решить, имеет ли смысл загружать ресурс (он может игнорировать вас).
Prerender - самый мощный вариант. Он сообщает браузеру запрашивать URL-адрес и загружать все активы. <link rel="prerender" href="#" onclick="location.href='http://example.com/page'; return false;">. Вы должны быть уверены, что человек откроет страницу, иначе вы просто потеряете пропускную способность.