Использование предварительной загрузки

Одним малоизвестным нововведением HTML 5 является предварительная загрузка контента в браузер. Идея заключается в том, что пока вы просматриваете содержимое страницы, в браузер подгружается, указываемое внутри страницы содержимое, которое, по мнению вебмастера, посетителю сайта потребуется при последующем переходе (без каких-либо манипуляций AJAX).

Вот как это работает.

Вы добавляете такую строку в свою страницу:

<link rel="next" href="page2.html">

Теперь браузер автоматически загрузит page2.html в фоновом режиме, если компьютер пользователя простаивает. Как только пользователь перейдет по ссылке на page2.html, браузер возьмет страницу из кэша, и загрузка будет практически мгновенной.

Такой тип ссылок предварительной загрузки в настоящее время поддерживается только Firefox. Но так как Firefox является весьма популярным браузером в мире, вы можете значительно повысить скорость загрузки для значительной части ваших пользователей, просто добавив одну строку кода в HTML. Неплохо ведь, да?

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

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

* На стартовой странице проекта или его части где используется аннотация и затем следует кнопка «Далее».

* На странице поиска для предварительной загрузки верхнего результата.

Помимо этого, данный метод можно использовать для предварительной загрузки статического содержимого:

<link rel="prefetch" href="/images/big.jpeg">

Некоторые другие интересные моменты:

* Поддержка предварительной загрузки, вероятно, скоро появится в Опере, Chrome и Safari в ближайшее время, и в Internet Explorer где нибудь в 2020.

* Если эта технология станет популярной, то она может исказить статистику. Дело в том что для сервера такой запрос выглядит как обычное посещение пользователем страницы и далеко не факт, что он ее на самом деле посетит.

Firefox сообщает серверу о таком запросе, отправляя в заголовке HTTP, X-moz: prefetch, поэтому такие запросы можно на сервере особым образом отработать.

Более подробно о данной технологии смотрите на сайте Mozilla.

От себя добавлю, конечно как и всякая технология — данная возможность несет в себе, скрытые угрозы — например скачать то, что вы не желаете, но это уж такая плата за все новое. По крайней мере возможность отключения в браузере FireFox данной функции уже предусмотрена. Для отключения этой функции в FireFox можно воспользоваться директивой:

user_pref("network.prefetch-next", false);

Кстати google во всю это уже пользует. Если зайти на google через FireFox и ввести в поиск «Хабрахабр» то в результате в исходнике можно увидеть:

<link rel=prefetch href="http://yapro.ru/system/redirect?to=http://www.habrahabr.ru/">

Источник: habrahabr.ru

Оцени публикацию:
  • 12,48
Оценили человек: 12
Теги : HTML5

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • Классная статья! Спасибо!
    26 октября 2013, 17:21 коммент полезен : -1 # Ярослав1
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Введите изображенные цифры:
Captcha
Главная
X

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2017 YaPro.Ru

Главная » Веб-мастеру » HTML »