Наша самая большая сила — это наша самая большая слабость или так, по крайней мере, так говорят. В некоторой степени это верно и для JavaScript. Из-за множества способов, которыми мы можем выразить себя на этом языке программирования, мы легко можем быть перегружены множеством возможностей.
Даже очень простой вывод Hello, World! можно отображать с помощью различных строк кода. Здесь мы подробнее рассмотрим 4 функции JavaScript, чтобы лучше понять, когда их разумнее не использовать.
Большая четверка — это innerHTML, insertAdjacentHTML, textContent и innerText.
- Привет, мир!с помощью innerHTML
Свойство innerHTML предлагает нам возможность вставить строковое значение в виде HTML в наш код. Его также можно использовать для вставки простого текста, как показано на рисунках (1–1 и 1–2) ниже.
Код выше помогает нам, по сути, выводить нужную информацию. Тем не менее, есть несколько серьезных недостатков использования этого свойства.
Начнем с того, что он уязвим для угроз безопасности, таких как инъекции JavaScript. Что, в свою очередь, может привести ко многим нежелательным последствиям, таким как утечка информации, изменение дизайна и другого содержимого.
Еще один тревожный аспект innerHTML, который в одних ситуациях более очевиден, чем в других, — это его скорость. Как показано в случае B (рис. 1–2), мы можем использовать это свойство для добавления нашего HTML к уже существующим элементам в нашей цели. Проблема здесь в том, что в нашем браузере это делается довольно неэффективно. Это связано с тем, что браузер добавляет нашу информацию только после обработки всех дочерних элементов нашего целевого элемента. Это требует времени. Чем больше дочерних элементов находится внутри нашей цели, тем больше времени это занимает.
Когда лучше не использовать innerHTML?
- Когда мы хотим снизить риски вредоносных инъекций JavaScript.
- Когда мы хотим быстро добавить HTML.
- Когда мы хотим вставить обычный текст.
2. Привет, мир! с insertAdjacentHTML
Свойство insertAdjacentHTML также предлагает нам возможность вставить строковое значение в виде HTML в наш код. Это позволяет нам выбирать, где мы хотим разместить наш контент. Это внутри или снаружи нашего целевого элемента, как вы можете видеть на рисунке (2-1) ниже.
Это свойство выгодно не только ради удобства. Это также значительно быстрее, чем innerHTML. На самом деле, insertAdjacentHTML удалось добавить в 150 раз больше твитов, чем innerHTML за 5 секунд (30 000 твитов против 200 твитов). Эти результаты не должны вызывать удивления, учитывая, что браузер в случае insertAdjacentHTML не удосуживается обрабатывать дочерние элементы нашего целевого элемента так же неэффективно, как в случае со свойством innerHTML.
Поскольку этот метод интерпретирует передаваемое содержимое как HTML, он сталкивается с теми же угрозами безопасности, что и innerHTML.
Когда лучше не использовать insertAdjacentHTML?
- Когда мы хотим вставить обычный текст.
- Когда источник HTML не заслуживает доверия (в отличие от хорошо защищенного бэкэнда).
3. Привет, мир! с внутренним текстом
Свойство innerText вставляет переданную информацию в виде обычного текста, в отличие от ранее обсуждавшихся функций innerHTML и insertAdjacentHTML. Это делает его более безопасной альтернативой отображению пользовательского ввода.
Однако innerText не является пуленепробиваемым свойством. Это требует больших вычислительных ресурсов и запускает перекомпоновку DOM. Процесс пересчета информации о существующих элементах в документе. Это неудивительно, требует времени и имеет очень нежелательный эффект снижения производительности. Кроме того, это свойство плохо поддерживается более старыми версиями Firefox (2–44).
Когда лучше не использовать innerText?
- Когда мы хотим вставить текст, не жертвуя скоростью и производительностью.
- Когда мы хотим вставить текст в старые версии Firefox.
4. Привет, мир! с textContent
Другой способ написать Hello World! на странице с помощью свойства textContent, как показано ниже.
Это свойство предлагает множество преимуществ по сравнению с другими функциями JavaScript, рассмотренными выше.
Во-первых, он не представляет такой же угрозы безопасности, как innerHTML и insertAdjacentHTML. Во-вторых, это не так сложно с точки зрения вычислений, как innerText, потому что это не вызывает перекомпоновки. В-третьих, он хорошо поддерживается старыми версиями Firefox и Chrome.
Однако ни одно свойство не является совершенным. Это верно и для textContent. Так как не поддерживается архаичной версией Internet Explorer (8 и ниже). Кроме того, с возвращаемым значением тоже есть небольшой нюанс.
Как мы видим на рисунке (4-2) выше, скрытый элемент span содержит текст Hidden., который возвращается свойством textContent, но не innerText. Это показывает, что textContent также возвращает текстовое содержимое скрытых элементов, что, в свою очередь, может быть нежелательным в некоторых ситуациях.
Когда лучше не использовать textContent?
- Когда мы хотим вставить текст в старые версии Internet Explorer.
- Когда мы не хотим возвращать скрытые элементы.
В общем, все рассмотренные выше свойства могут быть успешно использованы в соответствующем контексте. Тем не менее, с точки зрения рендеринга Hello World! textContent имеет наименьшие недостатки и часто является самым разумным вариантом.
