Code Ready | Frontend
innerText vs textContent — как обычное чтение DOM может заставить браузер пересчитать layout!
DOM хранит структуру документа отдельно от того, как эта структура отображается пользователю. textContent работает на уровне DOM-дерева. Он проходит по текстовым узлам и собирает содержимое без анализа CSS, размеров элементов или текущего состояния отображения.
const text = element.textContent;
innerText работает иначе. Чтобы вернуть текст в том виде, в котором его видит пользователь, браузеру необходимо учитывать CSS, видимость элементов, переносы строк и актуальное состояние компоновки.
const text = element.innerText;
Именно поэтому простое чтение свойства иногда может быть дорогой операцией:
element.style.width = '400px';
const text = element.innerText;
После изменения стиля браузер помечает компоновку как устаревшую. Если следующая операция требует данных о визуальном состоянии страницы, браузеру может потребоваться немедленно выполнить перерасчёт. Это называется принудительным синхронным перерасчётом layout.
Похожий механизм работает с другими свойствами, зависящими от текущей геометрии страницы:
element.style.width = '400px';
const width = element.offsetWidth;
К этой же категории относятся offsetHeight, getBoundingClientRect() и чтение некоторых свойств прокрутки (scrollTop, scrollHeight и другие).
Проблема обычно появляется не из-за одного вызова, а из-за постоянного смешивания операций записи и чтения:
elements.forEach(element => {
element.style.width = '400px';
console.log(element.innerText);
});
В таком случае браузер может постоянно выполнять цикл: запись — устаревшая компоновка — чтение — расчёт компоновки.
Это приводит к частым лишним перерасчётам компоновки (layout thrashing). Гораздо эффективнее разделять изменение состояния и чтение данных:
elements.forEach(element => {
element.style.width = '400px';
});
const values = elements.map(
element => element.innerText
);
Важно понимать: innerText не является медленным сам по себе. Если состояние компоновки уже актуально, чтение может быть дешёвым. Проблема возникает тогда, когда браузеру приходится синхронизировать DOM с текущим визуальным состоянием страницы.
Если нужно получить данные из DOM, обычно достаточно textContent. Если нужен текст именно в том виде, в котором его воспринимает пользователь, используется innerText.
🔥 Разница между ними не только в возвращаемой строке. textContent работает с моделью документа, а innerText — с моделью отображения. В производительных интерфейсах это различие может определить, будет ли чтение обычным получением текстового содержимого или причиной перерасчёта компоновки.
📣 Code Ready | #практика
26 · 1.6K ·