Лучше вообще не отображать HTML или добавлять отображение: нет?

Насколько я понимаю, не рендеринг HTML для элемента вообще или добавление display:none, похоже, ведут себя одинаково: и то, и другое заставляет элемент исчезать и не взаимодействовать с HTML.

Я пытаюсь отключить и скрыть флажок. Таким образом, общее количество HTML невелико; Я не могу представить, что производительность может быть проблемой.

Что касается написания серверного кода, работа по кодированию примерно одинакова.

Учитывая эти два варианта, один лучший метод, чем другой? Или не важно, какой я вообще использую?

6 ответов

Насколько я понимаю, не рендеринг HTML для элемента вообще или добавление display:none, похоже, ведут себя одинаково: и то, и другое заставляет элемент исчезать и не взаимодействовать с HTML.

Нет, эти два варианта не имеют "абсолютно одинаковое поведение".

Если вы скрываете элемент с помощью CSS (display:none), он все равно будет обработан для

  • пользовательские агенты, которые не поддерживают CSS (например, текстовые браузеры), и
  • пользовательские агенты, которые перезаписывают ваш CSS (например, пользовательские таблицы стилей).

Так что, если вам это не нужно, не включайте его.

Если по какой-либо причине вам необходимо включить элемент, но он не имеет отношения к вашему документу / пользователям (независимо от того, в какой презентации), используйте hidden атрибут Используя этот атрибут, вы предоставляете информацию на уровне HTML, следовательно, поддержка CSS не нужна / актуальна.
Вы можете использовать display:none кроме того (это то, что многие пользовательские агенты, поддерживающие CSS, делают в любом случае, но это полезно для пользовательских агентов с поддержкой CSS, которые не поддерживают hidden атрибуты).
Вы также можете использовать aria-hidden кроме того, что может быть полезно для пользовательских агентов, которые поддерживают WAI-ARIA, но не hidden приписывать.

Я имею в виду, вам нужен этот флажок? Если нет то .hide() просто чистить вещи под ковром. Вы делаете ваш HTML загроможденным так же, как и ваш CSS. Тем не менее, если он должен быть там, то конечно, но если вы можете обойтись без флажка, то я не буду иметь его в HTML.

Держите это простым и читабельным.

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

Здесь возникает путаница: зачем вам использовать display: ничего, вместо того, чтобы просто ничего не рендерить?

На что ответ: потому что вы делаете это на стороне клиента!

"display: none" - это лучший способ, когда вы выполняете манипуляции на стороне клиента, когда элемент может понадобиться исчезнуть или появиться снова без дополнительной поездки на сервер. В этом случае он все еще является частью логической структуры страницы, и к нему проще обращаться и манипулировать им, чем удалять (а затем сохранять в памяти в Javascript) и вставлять его.

Однако, если вы используете мощную инфраструктуру на стороне сервера и всегда можете не отображать ее, да, отображать: ни одна из них не является бессмысленной.

  • Перейдите к "display: none", если клиент должен выполнить работу, и управляйте его отношением к DOM
  • Если не делать рендеринга, то каждый раз, когда меняется решение, вынесенное или не выполненное, сервер генерирует свежий (и достаточно неизменный) HTML каждый раз.

Я не фанат добавления разметки в ваш HTML, который не виден и не имеет смысла. Вы не предоставили ни одного преимущества, выполнив это в своем вопросе, поэтому простой ответ таков: если вам не нужен флажок, чтобы быть частью страницы, не включайте его в разметку.

Я подозреваю, что скрытый флажок не добавит заметного времени к загрузке или работе на сервере. Так что я согласен, что это не совсем соображение. Тем не менее, многие страницы имеют дополнительный контент (комментарии, состояние просмотра и т. Д.), И все они могут складываться. Поэтому, если кто-то настроен так, что он пойдет дальше и будет добавлять контент, который не нужен и никогда не будет виден пользователю, я бы ожидал, что он будет создавать страницы, которые в целом заметно медленнее.

Теперь вы не предоставили никакой информации о том, почему вы можете включить разметку, которая не нужна. Хотя вы ничего не сказали о клиентском скрипте, единственный случай, когда я могу оставить элементы на странице скрытыми, это когда я пишу клиентский скрипт для их удаления. В этом случае я могу hide() это и оставь в разметке. Одной из причин этого является то, что я мог бы легко показать это снова, если это необходимо.

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

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

Всегда полезно сделать код и его вывод эффективными до такой степени, чтобы это было практично. Поэтому, если вам легко не включать некоторые элементы управления в вывод, добавив небольшое условие, все можно аккуратно управлять, попробуйте сделать это. Конечно, это не распространяется на ту часть вашего кода, которая получает ввод, потому что там вы всегда должны быть готовы обрабатывать любые произвольные данные (по крайней мере, для общедоступного приложения).

С другой стороны, в некоторых случаях код, который производит вывод, трудно изменить; в частности, предоставление ему возможности определять, что делать, может включать в себя нанесение ущерба в виде следующих плохих практик: возможно, добавьте глобальную переменную или измените / переопределите несколько функций, чтобы можно было передать условие. В этом случае не лишним будет просто добавить немного CSS, чтобы снова найти решение в краткой и локализованной форме.

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

Другие вопросы по тегам