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

Question

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

Answer 1

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

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

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

В 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

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

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

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

iCab

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

Answer 2

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

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

Answer 3

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

• Предварительная выборка 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">. Вы должны быть почти уверены, что этот человек откроет страницу, иначе вы просто потеряете его пропускную способность.

Answer 4

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

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

Answer 5

Предварительное кодирование ресурсов - это одна из самых сложных и простых задач в проекте 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.