Не используйте document.write()

Последнее обновлене - 14 сентября 2023 в 18:00

Покажу, как снял предупреждение «Не используйте document.write()» в PageSpeed Insights. При тестировании страницы сайта на производительность, я увидел такое сообщение: «Использование метода document.write() для динамической подгрузки внешних скриптов может значительно замедлять загрузку страницы для пользователей с низкой скоростью подключения.».

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

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

Скрипт приводится к такому виду:

<script defer>...</script>

Такой способ позволил мне немного улучшить показатели в Google PageSpeed Insights и чуть-чуть увеличить скорость загрузки страниц сайта. Предупреждение об использовании document.write() исчезло.

Как можно заменить document.write() в уже существующем коде?

document.write() — это метод JavaScript, который используется для вывода текста или HTML-кода непосредственно в документ. Однако, этот метод считается устаревшим и не рекомендуется к использованию. Вместо document.write() следует использовать современные методы для манипуляции с содержимым страницы.

Если вам необходимо заменить document.write() в уже существующем коде, рекомендуется использовать следующие подходы:

1. Использование метода innerHTML: Вместо document.write() можно использовать свойство innerHTML для изменения содержимого элемента. Например, если у вас есть элемент с id «myElement», вы можете использовать следующий код:
   javascript document.getElementById("myElement").innerHTML = "Новый текст";

   1 2	javascript    document.getElementById("myElement").innerHTML = "Новый текст";

2. Создание элемента и добавление его к документу: Вы можете создать новый элемент с помощью метода createElement(), задать ему содержимое с помощью метода textContent или innerHTML, а затем добавить его к документу с помощью метода appendChild(). Например:
   javascript var newElement = document.createElement("p"); newElement.textContent = "Новый текст"; document.body.appendChild(newElement);

   1 2 3 4

   javascript    var newElement = document.createElement("p");    newElement.textContent = "Новый текст";    document.body.appendChild(newElement);

3. Использование шаблонизаторов или фреймворков: Если ваш код основан на шаблонах или вы используете фреймворки, такие как React или Vue.js, вы можете использовать их функциональность для динамического обновления содержимого страницы.
4. Использование более специализированных методов, в зависимости от конкретного случая: такие как insertAdjacentHTML(), insertAdjacentText(), replaceChild(), insertBefore() и другие.

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