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

Question

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

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

Answer 1

На основе анализа, проведенного Google-Chrome Dev Tools ' Lighthouse Audit

Answer 2

Нарушение браузера

.write считается нарушением браузера, так как останавливает анализатор от рендеринга страницы. Парсер получает сообщение о том, что документ изменяется; следовательно, он блокируется, пока JS не завершит свой процесс. Только в это время парсер возобновит работу.

Performance

Самым большим последствием использования такого метода является снижение производительности. Браузеру потребуется больше времени для загрузки содержимого страницы. Неблагоприятная реакция на время загрузки зависит от того, что записывается в документ. Вы не увидите большой разницы, если добавите тег <p> в DOM, в отличие от передачи массива из 50 ссылок на библиотеки JavaScript (то, что я видел в рабочем коде и привело к 11 секундам задержка - конечно, это также зависит от вашего оборудования).

В общем, лучше избегать этого метода, если вы можете ему помочь.

Подробнее см. Вмешательство в document.write ()

Answer 3

Недостатки document.write в основном зависят от этих 3 факторов:

а) Реализация

document.write () в основном используется для записи содержимого на экран, как только оно требуется. Это означает, что это происходит где угодно, либо в файле JavaScript, либо внутри тега скрипта в файле HTML. Так как тег script размещается в любом месте такого HTML-файла, плохая идея иметь операторы document.write () внутри блоков сценария, которые переплетаются с HTML внутри веб-страницы.

б) Рендеринг

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

в) Невозможное манипулирование

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

Answer 4

• Простая причина, по которой document.write является плохой практикой, заключается в том, что вы не можете придумать сценарий, в котором вы не можете найти лучшую альтернативу.
• Другая причина в том, что вы имеете дело со строками, а не с объектами (это очень примитивно).
• Добавляется только к документам.
• В этом нет ничего прелестного, например, MVC (Model-View-Controller) pattern.
• Намного мощнее представить динамический контент с помощью ajax + jQuery или angularJS .

Answer 5

Можно рассматривать 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/

Answer 6

Я думаю, что самая большая проблема заключается в том, что любые элементы, написанные с помощью document.write, добавляются в конец элементов страницы. Это редко желаемый эффект с современными макетами страниц и AJAX. (вы должны помнить, что элементы в DOM являются временными, и когда скрипт запускается, это может повлиять на его поведение).

Гораздо лучше установить элемент-заполнитель на странице, а затем манипулировать его внутренним HTML.