1. требования
2. использование
3. Проверка скорости
4. Оптимизация сервера
5. рассмотрение
6. Cons

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

Самый быстрый способ сделать это - сделать это локально, а не через удаленный сервер!

Но это невозможно. Таким образом, альтернативой является то, что локальный пользовательский интерфейс отвечает за общий пользовательский интерфейс, и по крайней мере необходимые данные передаются на сервер. Это в основном используется в методе SPA (одностраничное приложение), например AngularJS, ReactJS и т. Д., Которые в настоящее время становятся популярными.

Тем не менее, SPA лучше всего подходит для быстрого реагирования, но неэффективно получать огромный пакетный файл, потому что какой-то контент-сервис (сообщество, блог и т. Д.) Является относительно более SEO. , Конечно, SPA также может оптимизировать SEO.

требования

• SEO должно быть возможно.
• История браузера должна соблюдаться.
• Скорость отклика страницы должна быть быстрой.
• Разработка и сопровождение не должны быть сложными.

pjax

https://github.com/defunkt/jquery-pjax

Пьякс очень прост. Когда pjax привязан к определенному селектору (тегу привязки), при щелчке по соответствующей ссылке на сервер делается запрос о целевом адресе, и принимается только DOM части, подлежащей изменению, и pushState (HTML5) Адрес адреса также изменен. Это кажется чем-то сложным, но принцип, что вы получаете только нужные вам части и меняете их, похож на ajax (на самом деле используйте ajax для внутреннего использования). Тем самым мы можем удовлетворить все вышеперечисленные требования.

использование

Ниже приведен скрипт, который я использовал для настоящего блога плитки здесь. Мы слегка изменили базовое использование, используя события и методы, предоставляемые pjax. Это возможность оптимизировать скорость, не касаясь какого-либо сервера. Каждое описание закомментировано в сценарии.

Проверка скорости

Я тестировал pjax, когда я не писал и когда писал его через преобразование страниц этого блога. Каждый тест был выполнен 10 раз, и минимальные и максимальные значения были исключены и затем усреднены. Разница примерно в 2,4 раза. На самом деле, из-за задержек в сети это значение не будет существенно отличаться, если оно не будет кэшировано, но важно то, что при использовании pjax частота обновления будет намного выше, поскольку устраняется мерцание экрана.

Оптимизация сервера

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

pjax также отправляет _pjax = true с параметром get, чтобы вы могли распознать это значение и переместить нижний колонтитул. В этой публикации я не буду вдаваться в подробности того, как сделать разметку шаблона на каждом языке очень разным, на самом деле сам сервер имеет некоторое кэширование и другие альтернативы, такие как пример здесь, Это не хуже, чем я думал.

рассмотрение

Контент на стороне тела теперь является динамически генерируемой областью контента (в данном случае # posts-container). Следовательно, необходимо заменить метод привязки, который использовался, когда существующая статическая страница была выполнена, чтобы, по крайней мере, соответствовать низкому контейнеру.

Cons

Нет. Это очень базовая спецификация HTML5, поэтому технология не исчезнет внезапно. Кроме того, не нужно беспокоиться о совместимости (т. Е. Она работает так же, как обычная веб-страница для сканера), поскольку в старой версии Explorer вы не можете использовать pushState, это просто обычное перемещение страницы. С SEO нет проблем, потому что вы уже нацелены на SEO - единственную страницу, к которой можно получить доступ. Я должен беспокоиться о том, чтобы заставить эту ссылку работать с pjax во время разработки.

Ссылки по теме

Похожие

Комментарии