PrepBro
← Назад к вопросам

Будут ли в рендере tree присутствовать элементы с display: none

1.0 Junior🔥 191 комментариев
#HTML и CSS#Браузер и сетевые технологии

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Присутствуют ли элементы display:none в Render Tree

Нет, элементы с display: none НЕ присутствуют в Render Tree. Render Tree — это визуальное представление страницы, и элементы, которые не видны, туда не включаются. Это важное различие между DOM и Render Tree.

Различие между DOM, CSSOM и Render Tree

1. DOM (Document Object Model)

// DOM содержит ВСЕ элементы HTML
const el = document.querySelector('.hidden');
console.log(el); // HTMLElement существует!

2. CSSOM (CSS Object Model)

// CSSOM содержит ВСЕ CSS правила
const styles = window.getComputedStyle(el);
console.log(styles.display); // 'none'

3. Render Tree (то что браузер отрисовывает)

DOM + CSSOM = Render Tree
НО элементы с display:none НЕ попадают в Render Tree

Визуальное объяснение

<!-- HTML -->
<div class="visible">Видимый</div>
<div class="hidden">Скрытый</div>
<div class="invisible">Невидимый</div>

<style>
  .hidden { display: none; }
  .invisible { visibility: hidden; }
</style>

DOM Tree (содержит всё):
  root
  ├── div.visible
  ├── div.hidden
  └── div.invisible

Render Tree (ЧТО рисовать):
  root
  ├── div.visible
  └── div.invisible  ← Присутствует! (хоть и невидима)
  
  (div.hidden отсутствует)

Разница между display:none и visibility:hidden

display:none — элемент НЕ в Render Tree

<div class="no-display">Hidden</div>

<style>
  .no-display {
    display: none;
    /* Элемент НЕ занимает место на странице */
    /* Элемент НЕ в Render Tree */
    /* Браузер его не рисует */
  }
</style>

visibility:hidden — элемент В Render Tree, но невидим

<div class="no-visibility">Hidden but reserved</div>

<style>
  .no-visibility {
    visibility: hidden;
    /* Элемент ЗАНИМАЕТ МЕСТО на странице (пусто) */
    /* Элемент В Render Tree */
    /* Браузер его НЕ рисует, но резервирует пространство */
  }
</style>

Практический пример

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: blue;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="box">1</div>
  <div class="box" style="display: none;">2</div>
  <div class="box" style="visibility: hidden;">3</div>
  <div class="box">4</div>
</body>
</html>

Результат на странице:

[1] Синий квадрат (видим)

[пусто] - место для элемента 3 (visibility:hidden)

[4] Синий квадрат (видим)

Элемент 2 полностью отсутствует (display:none)

Отладка в Chrome DevTools

Способ 1: Elements Inspector

1. Откроем DevTools (F12)
2. Выберем Elements tab
3. Найдем элемент с display:none
4. В коде HTML он БУДЕТ видим (это DOM)
5. На странице его НЕЛЬЗЯ увидеть (нет в Render Tree)

Способ 2: Performance/Rendering

1. DevTools -> Rendering tab
2. Paint flashing - показывает что браузер рисует
3. Элементы display:none НЕ будут выделены (не рисуются)
4. Элементы visibility:hidden БУДУТ выделены (но невидимы)

Другие свойства, исключающие из Render Tree

/* НЕ попадают в Render Tree */
display: none; /* Полностью скрывает элемент */

/* ПОПАДАЮТ в Render Tree (но могут быть невидимы) */
visibility: hidden; /* Занимает место, но невидим */
opacity: 0; /* Прозрачный, но занимает место */
width: 0; height: 0; /* Нулевой размер, но в дереве */
position: absolute; left: -9999px; /* За границей экрана, но в дереве */

Практические сценарии

Сценарий 1: Модальное окно

function Modal({ isOpen }) {
  return (
    <div style={{ display: isOpen ? 'block' : 'none' }}>
      {/* Когда display:none, этот элемент НЕ в Render Tree */}
      <h2>Modal Title</h2>
      <p>Content</p>
    </div>
  );
}

// Открыто: элемент В Render Tree, рисуется
// Закрыто: элемент НЕ в Render Tree, не рисуется

Сценарий 2: Меню навигации на мобильных

<style>
  .mobile-menu {
    display: none; /* НЕ в Render Tree по умолчанию */
  }
  
  @media (max-width: 768px) {
    .mobile-menu {
      display: block; /* В Render Tree на мобильных */
    }
  }
</style>

<nav class="mobile-menu">...</nav>

Сценарий 3: Табы с содержимым

function Tabs() {
  const [active, setActive] = useState(0);

  return (
    <>
      {tabs.map((tab, i) => (
        // Неактивные табы скрыты display:none
        <div key={i} style={{ display: i === active ? 'block' : 'none' }}>
          {tab.content}
        </div>
      ))}
    </>
  );
}

// Активный таб: В Render Tree
// Неактивные табы: НЕ в Render Tree (экономит память и производительность)

Производительность

display:none экономит ресурсы:

1. Не занимает место на странице
2. Не рисуется (экономит пиксели)
3. Не в Render Tree (экономит память)
4. Не влияет на layout других элементов

Проверка производительности:

function measureRenderTree() {
  // Рисуем 1000 элементов
  const container = document.getElementById('container');
  
  for (let i = 0; i < 1000; i++) {
    const el = document.createElement('div');
    el.textContent = i;
    
    if (i % 10 === 0) {
      el.style.display = 'none'; // НЕ в Render Tree
    }
    
    container.appendChild(el);
  }
  
  // DevTools Performance tab покажет:
  // - Меньше элементов в Render Tree (только ~900)
  // - Меньше paint операций
  // - Быстрее layout
}

Важные моменты для собеседования

Вопрос: Где находится элемент с display:none?

Ответ:
- В DOM: ДА (document.querySelector найдёт)
- В CSSOM: ДА (window.getComputedStyle покажет display:none)
- В Render Tree: НЕТ (браузер не рисует)

Вопрос: Займёт ли место на странице?

Ответ: НЕТ
Для сравнения:
- visibility:hidden: ДА (занимает место, но невидим)
- opacity:0: ДА (занимает место, но прозрачен)
- display:none: НЕТ (не занимает место вообще)

Вопрос: Повлияет ли на layout других элементов?

Ответ: НЕТ
Элементы display:none полностью игнорируются в layout

Визуальное резюме

// HTML
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

// CSS
#b { display: none; }

// JavaScript
const a = document.getElementById('a'); // Существует в DOM
const b = document.getElementById('b'); // Существует в DOM!
const c = document.getElementById('c'); // Существует в DOM

const bStyle = window.getComputedStyle(b);
console.log(bStyle.display); // 'none'

// На странице видно:
// A
// C
// (B не видно и не занимает место)

// В DevTools Elements видно:
// <div id="a">A</div>
// <div id="b">B</div> <- Здесь есть! (в DOM)
// <div id="c">C</div>

Вывод

Элементы с display: none:

  • ЕСТЬ в DOM (можно получить через querySelector)
  • ЕСТЬ в CSSOM (можно проверить через getComputedStyle)
  • НЕТ в Render Tree (браузер не рисует)
  • НЕ занимают место на странице
  • НЕ влияют на layout
  • Экономят ресурсы браузера

Это отличие критично для:

  • Оптимизации производительности
  • Понимания жизненного цикла элементов
  • Работы с скрытым контентом
  • Отладки проблем рендера
Будут ли в рендере tree присутствовать элементы с display: none | PrepBro