href='#' vs javascript:void(0): Руководство по лучшим практикам

Содержание

• Сравнение функциональности
• Вопросы производительности
• Валидация и стандарты HTML
• Влияние на доступность
• Современные лучшие практики
• Рекомендации для разных сценариев
• Заключение

Сравнение функциональности

Ключевое различие между этими двумя подходами заключается в том, как они обрабатывают поведение браузера по умолчанию:

Подход с href=“#”:

• При клике браузер пытается перейти в начало текущей страницы
• Это вызывает нежелательный прокрутку страницы вверх, если вы не предотвращаете это в JavaScript
• Требует явного return false в обработчике onclick для предотвращения прокрутки
• Пример: <a href="#" onclick="myJsFunc(); return false;">Запустить JavaScript код</a>

Подход с href=“javascript:void(0)”:

• Использует JavaScript оператор void, который вычисляет выражение (0) и возвращает undefined
• Предотвращает любое поведение навигации по умолчанию без необходимости дополнительного JavaScript
• Не вызывает прокрутки страницы даже при сбое JavaScript функции
• Пример: <a href="javascript:void(0)" onclick="myJsFunc();">Запустить JavaScript код</a>

Как отмечено в обсуждении на Stack Overflow, эти подходы на самом деле не делают одно и то же - # заставляет браузер перейти в начало страницы, в то время как javascript:void(0) сохраняет текущую позицию.

Вопросы производительности

Различия в производительности между этими подходами обычно незначительны, но值得 учитывать:

Производительность href=“#”:

• Более простое парсинг URL для браузера
• Требуется оценка JavaScript навигационной системой браузера
• Может вызывать прокрутку страницы, что требует дополнительной обработки

Производительность href=“javascript:void(0)”:

• Требует от браузера парсинга и оценки JavaScript кода
• Бенчмарки показывают, что в некоторых браузерах, таких как Google Chrome, он может иметь небольшое преимущество в производительности (на 0.18 секунд быстрее в некоторых тестах)
• Согласно Our Code World, javascript:void(0) является “сырым, точным и быстрым”

Однако 30 seconds of code предупреждает, что javascript:void(0) заставляет браузер парсить значение URL ссылки, что “как затратно, так и ненужно”.

Валидация и стандарты HTML

С точки зрения валидации и стандартов:

Валидация href=“#”:

• Валиден в HTML5
• Соответствует принципу, что ссылки должны указывать на реальные ресурсы
• Может вызывать предупреждения при проверке доступности при использовании с onclick

Валидация href=“javascript:void(0)”:

• Технически валиден в HTML
• Считается “злоупотреблением” тега-якоря согласно документации MDN
• Встроенный JavaScript в атрибутах href обычно не рекомендуется в современной веб-разработке

Как отмечает Christian Heilmann, “Правильный ответ - ни один. Это не предназначение якорей . Элемент якоря должен иметь атрибут href, который указывает на действительный URL-ресурс.”

Влияние на доступность

Доступность является критически важным фактором при выборе между этими подходами:

Проблемы доступности href=“#”:

• Непредвиденная прокрутка страницы может дезориентировать пользователей, особенно людей с двигательными нарушениями
• Скринридеры объявляют это как ссылку на начало страницы, что вводит в заблуждение
• Может вызывать проблемы с навигацией с клавиатуры и управлением фокусом

Преимущества доступности href=“javascript:void(0)”:

• Согласно обсуждениям на Reddit, он “избегает нарушения потока навигации пользователя”
• Не вызывает непредвиденного поведения прокрутки
• Лучше сохраняет текущий контекст и фокус пользователя

Однако наиболее важная рекомендация по доступности исходит из MDN, где говорится, что “Теги-якоря часто злоупотребляются с событием onclick для создания псевдо-кнопок путем установки href в ‘#’ или ‘javascript:void(0)’ для предотвращения перезагрузки страницы.”

Современные лучшие практики

Современная веб-разработка вышла далеко за рамки этих двух подходов:

Семантический подход:

• Используйте элементы <button> для действий только с JavaScript вместо тегов <a>
• Кнопки семантически правильны для действий, которые не переходят к новым ресурсам
• Лучшая доступность и навигация с клавиатурой “из коробки”

Подход с использованием слушателей событий:

• Перенесите логику JavaScript из разметки HTML в отдельные .js файлы
• Используйте слушатели событий вместо встроенных обработчиков onclick
• Пример:
  html

  <button id="myButton" class="link-styled-button">Запустить JavaScript код</button>
  

  javascript

  document.getElementById('myButton').addEventListener('click', myJsFunc);
  

Как отмечено в SQLPEY, “Перенос логики JavaScript из разметки HTML в отдельные .js файлы или блоки