Как работать с document.write() в React и Next.js
Асинхронная загрузка синхронных внешних скриптов с PostScribe
Фото Сафара Сафарова на Unsplash При разработке приложения React или Next.js может потребоваться импорт внешние файлы JavaScript с помощью тега HTML
.Особенно это касается рекламы.
Проблема здесь в том,что эти внешние скрипты часто используют операторdocument.write()
.Это не только связано с ограничениями,но его использование не рекомендуется и сообщается с предупреждением в консоли браузера.В некоторых случаях он может быть даже заблокирован браузером из соображений скорости,что делает импортированный внешний скрипт неработоспособным.
Поскольку обычно вы не можете изменить код этих внешних сценариев,это может легко стать головной болью.К счастью,есть решение!
Давайте посмотрим,как библиотека PostScribe может помочь решить проблему в React или Next.js как в JavaScript,так и в TypeScript.
В этой статье 2016 года Google подробно рассказал,почемуdocument.write()
представляет проблему для пользователей с медленным соединением.В частности,это утверждение может замедлить время загрузки веб-страницы на десятки секунд.Это происходит потому,что прежде чем браузер сможет отобразить веб-страницу,ему необходимо сгенерировать все дерево DOM.И если синтаксический анализатор HTML встречает сценарий,он должен остановить и запустить его,прежде чем продолжить.
Проблема в том,что если скрипт динамически внедряет другой скрипт сdocument.write()
,синтаксический анализатор вынужден ждать загрузки нового внешнего ресурса.Это может привести к одному или нескольким обращениям по сети и задержать время рендеринга веб-страницы.
Это такая проблема,что современные браузеры могут запретить выполнениеdocument.write()
в зависимости от скорости соединения пользователя.Другими словами,вы не можете полагаться на него полностью.
Если используется и не заблокирован,консоль Chrome DevTools предупредит вас следующим сообщением:
[Нарушение]Избегайте использования document.write().
Аналогично,вот что выводит консоль Firefox DevTools при ее использовании:
Несбалансированное дерево было написано с использованием document.write(),что привело к повторной обработке
данных из сети.
Google Lighthouse это тоже не нравится,и он сообщит о незаблокированных операторахdocument.write()
со следующим сообщением:
Решениеdocument.write()
найти практически легко.Вы должны просто заменить любые операторыdocument.write()
явными операторами манипуляций с DOM,такими как.appendChild()
.С другой стороны,у вас может не быть доступа к этим внешним скриптам и вы не можете изменить их код.В этом случае PostScribe является решением.
Удаленные сценарии,особенно реклама,блокируют выполнение каких-либо действий со страницей во время загрузки.Они вносят большой%во время загрузки,что влияет на вашу прибыль.Асинхронные объявленияне блокируют страницу и могут показываться после основного контента.
Почему так сложно доставлять рекламу асинхронно?Потому что они могут содержать вызовы
document.write
,которые должны обрабатываться синхронно.PostScribe позволяет асинхронно доставлять синхронную рекламу без изменения рекламного кода.— Официальная страница PostScribe на GitHub
Предположим,что Работает наGitBook Вы можете создать документ HTML «на лету» с помощью JavaScript,используя метод Когда я создаю новое окно,я также открываю новый документ.Таким образом,я могу писать в новом окне с помощью этой серии команд. Метод Я даже могу включать теги HTML в оператор document. write(). Вот так: Проявив немного творчества, вы можете использовать JavaScript для создания полностью отформатированных веб-страниц на лету.https:
Запись в документ
document.write()
.Обычно сначала необходимо открыть новый документ.Затем вы можете писать в этот документ и,наконец,вы должны закрыть документ,чтобы браузер мог прекратить попытки его загрузки.Вот пример:документ.открыть()
document.write("Привет")
документ.закрыть()
NewWindow=window.open("","","ширина=200,высота=200")
NewWindow.document.write("Привет!")
НовоеОкно.document.close()
document.write()
может содержать либо текст,либо переменную внутри скобок.В следующем примере создается переменная,а затем она записывается в новый документ. SampleText = "Привет," +
"Приятно видеть Вас снова."
NewWindow = window.open("","","ширина=200,высота=200")
NewWindow.document.write(SampleText)
НовоеОкно.document.close()
NewWindow = window.open("","","ширина=200,высота=200")
NewWindow.document.write("
Здравствуйте
функция MakePage(имя, город, сосед по комнате, возраст) {
содержимое переменной =
' <ГОЛОВА> <НАЗВАНИЕ>' +
имя +
'\'s Страница' +
' ' +
' <ЦВЕТ ШРИФТА = "4EEA6C" > < по центру > < h2 > ' +
имя +
'\'s Page' +
' Здравствуйте, и добро пожаловать на мою страницу.