History API и hash‑навигация на Ajax‑сайтах
Загрузка контента при помощи Ajax и навигация, построенная на этой схеме, позволяют значительно повысить отзывчивость интерфейса разрабатываемого сайта или веб‑приложения. Однако такой подход заставляет решать проблемы, связанные с отображением адреса в браузере.
Сама загрузка через Ajax отдельных блоков на странице (или даже всего содержания страницы) не вызывает смены адреса в браузере. Минус такого поведения в том, что пользователь не может работать с историей просмотров — кнопка «назад» работает не так, как ожидается (не происходит «отката» последней Ajax‑загрузки, а осуществляется переход на страницу, которая была просмотрена до текущей и до всех Ajax‑запросов), а URL в адресной строке браузера не коррелирует с текущим содержанием страницы.
В современных браузерах, которые поддерживают спецификацию HTML5, для устранения этого нежелательного поведения есть методы History API. History API — это набор функций для работы с историей браузера, который позволяет записывать в неё адреса страниц и перемещаться по этой самой истории. Функция window.history.pushState(data, title [, url]) — записывает в историю новый переход, и отображаемый на странице адрес изменяется.
History API — замечательная штука, но в устаревших браузерах не работает. Тут на замену приходит навигация, построенная на location.hash («якорная» или hash‑навигация). Этот тип навигации работает за счёт передачи параметров в виде «якорей», например, при Ajax‑переходе на страницу /contacts адресная строка будет выглядеть так: site.ru/#!/contacts.
Оба метода, как правило, используют JavaScript-события, которые срабатывают при загрузке страницы и при переходах по Ajax‑ссылкам и осуществляют работу с History API или обработку location.hash.
В библиотеках Turbolinks и Wiselinks такое поведение уже встроено в базовую функциональность.
Тематические статьи
Увеличить отзывчивость интерфейса и снизить нагрузку на сервер можно при помощи Ajax‑навигации: если не перезагружать страницу целиком, а обновлять только содержание или отдельные фрагменты, то скорость работы сайта или приложения существенно возрастёт.
Сайт может работать быстрее, если выполнены следующие рекомендации по оптимизации JS‑кода. Если же этого не сделать, то сайт будет недостаточно быстро отображаться на стороне клиента.
Бывает так, что часть содержимого страницы нужна не всем или не всегда, но на генерацию или передачу этого материала тратится много ресурсов. В этом случае имеет смысл сделать загрузку «ленивой», то есть не генерировать и не загружать в браузер информацию до тех пор, пока она не понадобится.
По данному списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.
Графические интерфейсы современных сайтов и веб‑приложений разрабатываются всего на трёх языках — HTML, CSS, JavaScript. Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML и CSS, во фронтенд-разработке используют языки, которые браузер не исполняет напрямую: TypeScript, Dart и Kotlin компилируются в JavaScript или WebAssembly.
Кеширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или за визит просматривает несколько страниц, которые используют одинаковые ресурсы.
XSS‑атаки — это внедрение в страницу вредоносного кода, который будет выполнен на компьютере пользователя при открытии им этой страницы.
Любая командная разработка может быть эффективной только в том случае, если участники команды имеют общее видение. Если над проектом работает команда, а не один‑два разработчика, то обязательно должен быть стандарт оформления кода — набор правил и соглашений, которые описывают базовые принципы оформления программного кода, используемого совместно группой разработчиков.
Семантическая микроразметка — это использование в HTML‑верстке дополнительных тегов, классов и иных атрибутов, которые либо дают поисковым системам дополнительную информацию о содержании страницы, либо упрощают классификацию содержания и формируют метаданные о содержании. Широко известными являются форматы Schema.org, Open Graph и микроформаты.