Почему document.write считается "плохой практикой"?

Question

Я знаю document.write считается плохой практикой; и я надеюсь составить список причин для отправки стороннему поставщику информации о том, почему они не должны использовать document.write в реализации своего аналитического кода.

Пожалуйста, укажите причину для заявления document.write как плохую практику ниже.

Answer 1

Несколько более серьезных проблем:

• document.write (далее DW) не работает в XHTML

• DW не изменяет напрямую DOM, предотвращая дальнейшие манипуляции (пытается найти подтверждение этому, но в лучшем случае это ситуативно)

• DW, выполненный после завершения загрузки страницы, перезапишет страницу или напишет новую страницу, или не будет работать

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

• DW эффективно пишет сериализованный текст, который концептуально не работает с DOM, и это простой способ создавать ошибки (.innerHTML имеет ту же проблему)

Гораздо лучше использовать безопасные и дружественные к DOM методы манипуляции с DOM

Answer 2

На самом деле нет ничего плохого в document.write как таковом. Проблема в том, что злоупотреблять им действительно легко. Грубо, даже.

С точки зрения поставщиков, предоставляющих аналитический код (например, Google Analytics), для них это самый простой способ распространения таких фрагментов

1. Сохраняет небольшие скрипты
2. Им не нужно беспокоиться о переопределении уже установленных событий загрузки или включении необходимой абстракции для безопасного добавления событий загрузки
3. Это чрезвычайно совместимо

Пока вы не пытаетесь использовать его после загрузки документа, document.write, по моему скромному мнению, не является по сути злым.

Answer 3

Другое законное использование document.write взято из примера HTML5 Boilerplate index.html .

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.3.min.js"><\/script>')</script>

Я также видел ту же технику для использования json2.js JSON-разбора / stringify polyfill ( необходим для IE7 и ниже ).

<script>window.JSON || document.write('<script src="json2.js"><\/script>')</script>

Answer 4

Может заблокировать вашу страницу

document.write работает только во время загрузки страницы; Если вы позвоните по окончании загрузки страницы, она перезапишет всю страницу.

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

Answer 5

Pro:

• Это самый простой способ встроить встроенный контент из внешнего (на ваш хост / домен) сценария.
• Вы можете перезаписать весь контент в фрейме / фрейме. Раньше я часто использовал эту технику для пунктов меню / навигации, прежде чем более современные методы Ajax стали широко доступны (1998-2002).

Con:

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

Answer 6

Вот моя двойная стоимость, в общем, вы не должны использовать document.write для тяжелой работы, но есть один случай, когда это определенно полезно:

http://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html

Я обнаружил это недавно, пытаясь создать галерею слайдеров AJAX. Я создал два вложенных элемента div и применил width / height и overflow: hidden к внешнему <div> с помощью JS. Это было сделано для того, чтобы в случае, если в браузере была отключена JS, div будет плавать, чтобы разместить изображения в галерее, что является хорошим изящным ухудшением.

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

Очевидно, что это не сработает в XHTML, но, поскольку XHTML кажется чем-то вроде мертвой утки (и выводится как теговый суп в IE), возможно, стоит пересмотреть ваш выбор DOCTYPE ...

Answer 7

Разрывает страницы с использованием XML-рендеринга (например, страниц XHTML).

Лучший : некоторые браузеры переключаются обратно на рендеринг HTML, и все работает отлично.

Вероятно : некоторые браузеры отключают функцию document.write () в режиме рендеринга XML.

Худший : некоторые браузеры будут вызывать ошибку XML при каждом использовании функции document.write ().

Answer 8

Он перезаписывает контент на странице, что является наиболее очевидной причиной, но я бы не назвал это «плохой».

Это не имеет особого смысла, если вы не создаете весь документ с использованием JavaScript, в этом случае вы можете начать с document.write.

Несмотря на это, вы на самом деле не используете DOM, когда используете document.write - вы просто добавляете клочок текста в документ, поэтому я бы сказал, что это плохая форма.

Answer 9

с макушки головы:

1. document.write необходимо использовать при загрузке страницы или загрузке тела. Поэтому, если вы хотите использовать скрипт в любое другое время для обновления содержимого страницы, document.write в значительной степени бесполезен.

2. Технически document.write будет обновлять только HTML-страницы, а не XHTML / XML. IE, кажется, довольно прощает этот факт, но другие браузеры не будут.

http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite

Answer 10

Chrome может блокировать document.write, который в некоторых случаях вставляет скрипт. Когда это произойдет, в консоли отобразится это предупреждение:

Скрипт, блокирующий синтаксический анализ, сценарий перекрестного происхождения, ..., вызывается через document.write. Это может быть заблокировано браузером, если устройство имеет плохое подключение к сети.

Ссылки:

• В этой статье на developers.google.com более подробно.
• https://www.chromestatus.com/feature/5718547946799104