Избегайте дополнительных загрузок страницы при использовании #!AJAX навигация - PullRequest
Новая
       14

Избегайте дополнительных загрузок страницы при использовании #!AJAX навигация

1 голос
/ 27 августа 2011

Я пишу веб-сайт, который представляет собой последовательность последовательных страниц. Неквалифицированный URL-адрес указывает на последнюю страницу, а квалифицированные URL-адреса указывают на конкретные страницы. Итак имеем:

У меня есть следующие требования:

  • Я хочу, чтобы страницы динамически загружались с помощью AJAX. Пользователи могут последовательно просматривать множество последовательных страниц за короткое время, и я хочу избежать перезагрузок и перерисовок (и добавить некоторую предварительную выборку JavaScript соседних страниц для ускорения навигации)
  • Я хочу, чтобы страницы были добавлены в закладки
  • Я хочу, чтобы страницы можно было сканировать
  • Я хочу, чтобы это работало для большинства пользователей.

Итак, я придумал следующую схему:

  • Стандартный канонический URL-адрес для страниц архива: http://example.com/3. Страницы, доступные по этому URL-адресу, полностью читаемы, независимо от того, установлен JavaScript или нет. Если JavaScript недоступен, ссылки на другие страницы являются обычными ссылками, и все работает по-старому. Это также работает для сканеров.
  • Если браузер, в котором доступны JavaScript и манипуляции с историей (pushState и replaceState), посещает такие сайты и URL-адреса, содержимое динамически обновляется с помощью AJAX при посещении ссылок на другие страницы. Затем история браузера обновляется с помощью JavaScript.
  • Если браузер, в котором доступен JavaScript, но манипулирование историей недоступно, посещает сайт, пользователь перенаправляется с помощью JavaScript на http://example.com/#!3 при посещении http://example.com/3. Перенаправление не происходит при посещении главной страницы http://example.com. Затем навигация выполняется с использованием событий изменения хеша.
  • Если сканер пытается посетить по внешней ссылке http://example.com/#!3,, он фактически запросит http://example.com/?_escaped_fragment_=3 ( 1 ). Для таких URL-адресов веб-сервер выдаст постоянное перенаправление на http://example.com/3,, которое затем будет правильно просканировано.

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

1. Нет браузера JavaScript

1,1. Браузер JavaScript не посещает корневой URL

Работает как положено.

1.2. Браузер JavaScript не посещает канонический URL

Работает как положено.

1,3. Нет браузера JavaScript посещает Shebang URL

(http://example.com/#!3)

Тихо терпит неудачу! Пользователь получает последнюю страницу вместо страницы 3.

2. Гусеничный

2,1. Crawler посещает корневой URL

Работает как положено.

2,2. Crawler посещает канонический URL

Работает как положено.

2,3. Crawler посещает Шебанг URL

http://example.com/#!3

Сканер фактически запрашивает http://example.com/?_escaped_fragment_=3, и получает перенаправление на канонический URL. Это еще один дополнительный запрос к веб-серверу, но это не составляет особого труда (дополнительная страница не извлекается из базы данных и не возвращается пользователю).

3. Старый браузер

3,1. Старый браузер посещает корневой URL

Ссылки на другие страницы заменены их версиями shebang. AJAX плавно выполняет навигацию.

3,2. Старый браузер посещает канонический URL

Пользователь получает перенаправление на URL-адрес shebang. Проблема: сервер на самом деле получает и обслуживает страницу 3 раза!

  1. http://example.com/3 <- полностью обслуживается сервером </li>
  2. JavaScript выдает перенаправление на http://example.com/#!3
  3. Сервер видит только http://example.com/, и обслуживает последнюю страницу
  4. JSON используется для получения (снова) страницы 3 и замены содержимого на странице.

3,3. Старый браузер посещает Шебанг URL

Перенаправление не требуется, но есть дополнительная загрузка для последней страницы!

  1. Пользователь переходит на http://example.com/#!3
  2. Сервер видит только http://example.com/, и обслуживает последнюю страницу
  3. JSON используется для извлечения страницы 3 и замены содержимого на странице.

4. Современный браузер

4,1. Современный браузер посещает корневой URL

4,2. Современный браузер посещает канонический URL

Нет проблем с этими двумя случаями. Навигация осуществляется с помощью AJAX, канонические URL-адреса заносятся в историю.

4,3. Современный браузер посещает Шебанг URL

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

Итак, подведем итог:

  • Это решение будет в основном работать
  • Но , когда используются URL-адреса shebang, в большинстве случаев это приведет к ненужной загрузке последней страницы, поскольку сервер никогда не узнает, нужно ли сервировать последнюю страницу, ИЛИ на самом деле является частью запроса Шебанга.

У меня вопрос: есть ли у кого-нибудь хорошая идея, как избежать лишних загрузок страницы? Есть ли хорошая практика для решения такой проблемы?

...