Краткое резюме: У нас есть боковая панель в нашем интернет-магазине. Есть три коробки, уложенные друг на друга. Каждый из них показывает что-то вроде слайд-шоу продуктов (его изображение, название и информация о цене). Высота этих слайдов меняется. Слайд-петля от продукта к продукту каждые несколько секунд, а высота содержащего окна настраивается автоматически.
Верно ли, что все вмещающие элементы в DOM, и поэтому весь макет страницы должен быть пересчитан и таким образом отменен?
Когда происходит переполнение в среде DOM?
Согласно этому предыдущему вопросу,
Когда вы добавляете или удаляете узел DOM.
При динамическом применении стиля (например, element.style.width = "10px").
... происходит перепланирование DOM (вы будете испытывать небольшое наказание).
Что такое "оплавление"?
Reflow - это название процесса веб-браузера для пересчета позиций и геометрии элементов в документе с целью повторной рендеринга части или всего документа. (https://developers.google.com/speed/articles/reflow)
Если высота окна "автоматически настраивается", вы, вероятно, либо:
В обоих случаях, согласно указанному вопросу, вы можете претендовать на оплату.
Было бы лучше, если бы ваши взаимодействия с DOM были минимальными для производительности. Предоставляя этим ящикам фиксированный размер и используя CSS для удобного центрирования/размещения ваших изображений, было бы разумно.
Хотя это может быть не очень хорошо в большинстве случаев, вы также можете следовать рекомендациям Google:
Если вы выполняете сложные изменения рендеринга, такие как анимации, делайте это из потока. Используйте положение - абсолютное или фиксированное положение для выполнения этого.
Но абсолютное или фиксированное использование ваших элементов может быстро превратить ваш CSS в запутанный беспорядок. Используйте с осторожностью.
А также, пользуйтесь здравым смыслом при работе с DOM; избегайте выполнения дорогостоящих задач, но также не слишком увлекайтесь оптимизациями.
but don't get too caught up in optimizations
. оптимизация хороша, но если вы не делаете что-то вродеNivo Slider
вам не нужно слишком беспокоиться об этом.