Pull to refresh

HTML5 Prefetching — Предварительная загрузка документов

Reading time2 min
Views8.1K
Аж в 2003 году Mozilla представила новый механизм для оптимизации загрузки страниц. И существует большой шанс, что технология войдет в HTML5.

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

Пометить документы можно тегом link с аттрибутом rel='prefetch':
  1. <!-- подгрузить страницу -->
  2. <link rel="prefetch" href="http://www.example.com/">
  3.  
  4. <!-- подгрузить картинку -->
  5. <link rel="prefetch" href="/images/big.jpeg">
  6.  
  7. <!-- также можно использовать тег meta -->
  8. <meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch">


Где это можно использовать


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


Несмотря на то, что на данный момент технология работает только в Firefox (а также существуют определенные проблемы безопасности), данный метод представляется вполне адекватным механизмом по оптимизации современных сайтов и веб-приложений. Лично мне бы хотелось, чтобы это или подобное решение вошло в бурно развивающийся стандарт html5.

______________________
Link prefetching FAQ
Link prefetching (Wikipedia)
Tags:
Hubs:
+37
Comments36

Articles

Change theme settings