Chrome Dev Tools Профилирование CSS переменных

Я новичок в профилировании с помощью инструментов Chrome Dev. Я хочу выяснить, есть ли / сколько переменных перфорированного CSS, поэтому я хочу сравнить ту же страницу с предварительно обработанными переменными css и css на стороне сервера.

В профилировщике инструментов разработчика Chrome я вижу такие действия, как анализ таблиц стилей, рисование и т. Д. Какой-либо совет, на какие действия профилировщика следует обратить внимание при сравнении предварительно обработанных CSS-переменных с CSS-переменными?

Источник

2 ответа

Расчет стиля - это то, что вы ищете. Тем не менее, переменные имеют мало заметного влияния на производительность. По сути, это был бы внутренний поиск карты, который был бы чрезвычайно быстрым.

Источник

Общая производительность

Переменные CSS… на самом деле это не переменные, а пользовательские свойства. Вы можете использовать их как переменную, используяvar(), но их механизм гораздо лучше описать как еще одно свойство, использующее наследование.

Следовательно, соображения в основном такие же, как и при добавлении или обновлении обычных свойств. Они не сильно влияют на первоначальный рендеринг, поскольку они просто приводят к увеличению размера карты, с чем движки рендеринга сталкиваются уже давно (сайты с большим количеством CSS довольно распространены).

Тем не менее, он позволяет увеличивать эти карты до произвольных размеров, которые могут превышать количество существующих обычных свойств. Я предполагаю, что браузеры также предполагают, что для данного элемента довольно редко указывают все возможные свойства CSS. Поэтому, если вы задаете для элемента сотни или тысячи пользовательских свойств, возможно, некоторые части конвейера рендеринга не оптимальны для этих размеров карты. Я не знаю конкретного примера, но такое ощущение, что это должно произойти хотя бы в какой-то степени. В любом случае воздействие все равно должно быть небольшим.

1 «исключение»: использование пользовательских свойств корневого элемента.

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

Предположим, у вас есть глубокое дерево, и ваше пользовательское свойство влияет только на один элемент.

      <html>
  <body>
    // a lot of elements here
    <div class="container">
      <ul>
        // more elements
        <li>
          <span class="deep-element">foo</span> <-- only this really changes
        </li>
      </ul>
    </div>
    // a lot more elements
  </body>
</html>

      :root {
  // other custom props
  --deep-element-color: green;
}
// large amount of other rules
.deep-element {
  color: var(--deep-element-color);
}

Если вы измените--deep-element-colorобновив карту стилей корневого элемента, вы запустите полный пересчет стилей всех элементов на странице, поскольку браузер не может точно определить, где это необходимо (теоретически может, но не делает). Он просто видит, что карта стилей корневого элемента была обновлена, и запускает перерасчет для всех элементов для распространения наследуемых свойств.

Время, которое это занимает, быстро достигает порядка нескольких десятков миллисекунд и ухудшается с увеличением общего размера DOM. Вы можете увидеть это в разделе «Затронутые элементы».

Если, с другой стороны, вы обновляете значение, устанавливая свойство в детальном селекторе, например:

      .deep-element {
  --deep-element-color: blue;
}

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

Источник
Другие вопросы по тегам