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

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

Источник

5 ответов

Решение

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

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

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" />

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

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

Или <meta> для имитации того же заголовка HTTP:

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

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

iCab

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

Источник

Есть несколько способов, как вы можете предварительно загрузить страницу:

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

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

<link rel="next" href="http://www.example.com/link-reference">
Источник

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

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

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

Источник

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

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

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

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

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

Это реализовано так.

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

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

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

Источник
Другие вопросы по тегам