Неужели динамически регулировать высоту ящика в сложном DOM?

0

Краткое резюме: У нас есть боковая панель в нашем интернет-магазине. Есть три коробки, уложенные друг на друга. Каждый из них показывает что-то вроде слайд-шоу продуктов (его изображение, название и информация о цене). Высота этих слайдов меняется. Слайд-петля от продукта к продукту каждые несколько секунд, а высота содержащего окна настраивается автоматически.

Верно ли, что все вмещающие элементы в DOM, и поэтому весь макет страницы должен быть пересчитан и таким образом отменен?

Теги:
performance
dom
web

1 ответ

1
Лучший ответ

Когда происходит переполнение в среде DOM?

Согласно этому предыдущему вопросу,

Когда вы добавляете или удаляете узел DOM.

При динамическом применении стиля (например, element.style.width = "10px").

... происходит перепланирование DOM (вы будете испытывать небольшое наказание).

Что такое "оплавление"?

Reflow - это название процесса веб-браузера для пересчета позиций и геометрии элементов в документе с целью повторной рендеринга части или всего документа. (https://developers.google.com/speed/articles/reflow)

Если высота окна "автоматически настраивается", вы, вероятно, либо:

  • Добавление изображения в "слайд", который считается "добавлением узла DOM".
  • Установка изображения в качестве фона CSS для элемента и корректировка размеров этого элемента с помощью "динамического стиля".

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

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

Хотя это может быть не очень хорошо в большинстве случаев, вы также можете следовать рекомендациям Google:

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

Но абсолютное или фиксированное использование ваших элементов может быстро превратить ваш CSS в запутанный беспорядок. Используйте с осторожностью.

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

  • 0
    +1 за, but don't get too caught up in optimizations . оптимизация хороша, но если вы не делаете что-то вроде Nivo Slider вам не нужно слишком беспокоиться об этом.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню