Я знаю document.write считается плохой практикой; и я надеюсь собрать список причин, чтобы представить стороннему поставщику, почему они не должны использовать document.write в реализации своего кода аналитики.
Пожалуйста, укажите причину, по которой вы требовали document.write в качестве плохой практики ниже.
Несколько более серьезных проблем:
document.write(далее DW) не работает в XHTML
DW напрямую не изменяет DOM, предотвращая дальнейшую манипуляцию (пытаясь найти доказательства этого, но в лучшем случае ситуационного)
DW, выполненный после завершения загрузки страницы, перезапишет страницу или напишет новую страницу или не работает
DW выполняет встречный вызов: он не может вставлять в заданную точку node
DW эффективно пишет сериализованный текст, который не соответствует концептуальному функционалу DOM, и является простым способом создания ошибок (проблема с .innerHTML имеет ту же проблему)
Намного лучше использовать безопасный и удобный DOM методы манипуляции DOM
На самом деле нет ничего плохого в document.write, как таковой. Проблема в том, что это действительно легко злоупотреблять им. Грубо, даже.
С точки зрения поставщиков, поставляющих аналитический код (например, Google Analytics), на самом деле это самый простой способ распространения таких фрагментов
Пока вы не пытаетесь использовать его после загрузки документа, document.write не является по своей сути злым, по моему скромному мнению.
Другое законное использование document.write происходит из примера HTML-Boilerplate index.html.
<!-- Grab Google CDN 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 parse/stringify polyfill (необходимый IE7 и ниже).
<script>window.JSON || document.write('<script src="json2.js"><\/script>')</script>
Он может заблокировать вашу страницу
document.write работает только во время загрузки страницы; Если вы выберете его после загрузки страницы, она перепишет всю страницу.
Это фактически означает, что вы должны вызвать его из встроенного блока script - и это не позволит браузеру обрабатывать части страницы, которые следуют. Сценарии и изображения не будут загружаться до тех пор, пока блок записи не будет завершен.
Pro:
Con:
Здесь мой двухкратный выигрыш, в общем, вы не должны использовать document.write для тяжелой работы, но есть один случай, где это определенно полезно:
http://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
Я недавно обнаружил, что пытался создать галерею слайдера AJAX. Я создал два вложенных divs и применил width/height и overflow: hidden к внешнему <div> с JS. Это было так, что в случае, если в браузере отключен JS, div будет плавать для размещения изображений в галерее - некоторая хорошая грациозная деградация.
Вещь, как и в предыдущей статье, это захват CSS в JS не ударил до загрузки страницы, вызвав мгновенную вспышку при загрузке div. Поэтому мне нужно было написать правило CSS или включить лист в качестве загруженной страницы.
Очевидно, что это не будет работать в XHTML, но поскольку XHTML кажется чем-то вроде мертвой утки (и отображает как суп-тег в IE), возможно, стоит переоценить ваш выбор DOCTYPE...
Он разбивает страницы с помощью рендеринга XML (например, страницы XHTML).
Лучший: некоторый браузер переключается обратно в HTML-рендеринг, и все работает отлично.
Вероятно: некоторые браузер отключили функцию document.write() в режиме рендеринга XML.
Худший. В некоторых браузерах при использовании функции document.write() будет возникать ошибка XML.
Он перезаписывает контент на странице, что является наиболее очевидной причиной, но я бы не назвал его "плохим".
Он просто не имеет большого смысла, если вы не создаете весь документ с использованием JavaScript, и в этом случае вы можете начать с document.write.
Тем не менее, вы не используете DOM при использовании document.write - вы просто сбрасываете текст в документ, поэтому я бы сказал, что это плохая форма.
Сверху моей головы:
document.write необходимо использовать в загрузке страницы или загрузке тела. Поэтому, если вы хотите использовать script в любое другое время, чтобы обновить содержимое своей страницы, document.write практически бесполезен.
Технически document.write будет обновлять HTML-страницы, а не XHTML/XML. IE, похоже, довольно прощает этот факт, но других браузеров не будет.
Chrome может блокировать document.write, который в некоторых случаях вставляет script. Когда это произойдет, оно отобразит это предупреждение в консоли:
Блокировка Parser, кросс-начало script,..., вызывается через document.write. Это может быть заблокировано браузером, если устройство имеет плохая сетевая связь.
На основе анализа, выполненного Google-Chrome Dev Tools 'Lighthouse Audit
.write считается нарушением браузера, так как останавливает анализатор от рендеринга страницы. Парсер получает сообщение о том, что документ изменяется; следовательно, он блокируется, пока JS не завершит свой процесс. Только в это время парсер возобновит работу.
Самым большим последствием использования такого метода является снижение производительности. Браузеру потребуется больше времени для загрузки содержимого страницы. Неблагоприятная реакция на время загрузки зависит от того, что записывается в документ. Вы не увидите большой разницы, если добавите <p> в DOM, в отличие от передачи массива из 50 ссылок на библиотеки JavaScript (то, что я видел в рабочем коде и привело к 11 секундам). задержка - конечно, это также зависит от вашего оборудования).
В общем, лучше избегать этого метода, если вы можете помочь ему.
Для получения дополнительной информации см. Вмешательство против document.write()
Можно рассматривать document.write() (и .innerHTML) как оценку строки исходного кода. Это может быть очень удобно для многих приложений. Например, если вы получаете HTML-код в виде строки из какого-то источника, удобно просто "оценить" его.
В контексте Lisp манипуляции с DOM будут подобны манипулированию структурой списка, например. создайте список (оранжевый), выполнив:
(cons 'orange '())
И document.write() будет похож на оценку строки, например. создайте список, оценив строку исходного кода следующим образом:
(eval-string "(cons 'orange '())")
Lisp также имеет очень полезную возможность создавать код с использованием манипулирования списком (например, с использованием стиля DOM для создания дерева разбора JS). Это означает, что вы можете создать структуру списка, используя "стиль DOM", а не "стиль строки", а затем запустить этот код, например. например:
(eval '(cons 'orange '()))
Если вы внедряете инструменты кодирования, такие как простые живые редакторы, очень удобно иметь возможность быстро оценивать строку, например, используя document.write() или .innerHTML. Lisp идеален в этом смысле, но вы можете сделать очень классный материал также в JS, и многие люди делают это, например http://jsbin.com/
document.write является плохой практикой, заключается в том, что вы не можете найти сценарий, в котором вы не можете найти лучшую альтернативу.Недостатки document.write в основном зависят от этих трех факторов:
a) Реализация
document.write() в основном используется для записи содержимого на экран, как только это необходимо. Это означает, что это происходит где угодно, либо в файле JavaScript, либо внутри тега script в HTML файле. При размещении тега script в любом месте такого HTML файла неплохо иметь инструкции document.write() внутри блоков script, которые переплетены с HTML внутри веб-страницы.
b) Рендеринг
Хорошо спроектированный код в целом будет принимать любой динамически созданный контент, хранить его в памяти, продолжать манипулировать им, когда он проходит через код, прежде чем он наконец выйдет на экран. Поэтому, чтобы повторить последний пункт в предыдущем разделе, рендеринг содержимого на месте может отображаться быстрее, чем другой контент, на который можно положиться, но он может быть недоступен для другого кода, который, в свою очередь, требует, чтобы контент отображался для обработки. Чтобы решить эту дилемму, нам нужно избавиться от document.write() и реализовать ее правильно.
c) Невозможное манипулирование
После того, как он написал все это и закончил. Мы не можем вернуться, чтобы манипулировать им, не вдаваясь в DOM.
Я не думаю, что использование document.write - это плохая практика. Проще говоря, это как высокое напряжение для неопытных людей. Если вы используете его неправильно, вас готовят. Есть много разработчиков, которые использовали этот и другие опасные методы хотя бы один раз, и они никогда не зацикливаются на своих ошибках. Вместо этого, когда что-то идет не так, они просто выручают и используют что-то более безопасное. Это те, кто делает такие заявления о том, что считается "плохой практикой".
Это похоже на форматирование жесткого диска, когда вам нужно удалить только несколько файлов, а затем сказать "форматирование диска это плохая практика".
Я думаю, самая большая проблема в том, что любые элементы, написанные с помощью document.write, добавляются в конец элементов страницы. Это редко желаемый эффект с современными макетами страниц и AJAX. (вы должны иметь в виду, что элементы в DOM являются временными, и когда пробег script может повлиять на его поведение).
Гораздо лучше установить элемент-заполнитель на странице, а затем обработать его innerHTML.