Может ли доступ к информации о макете также вызвать перепрошивку браузера?


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

4 3

4 ответа:

Конечно, это зависит от реализации, но обычно браузер запускает reflow при чтении свойства элемента, если он думает, что данные макета должны быть повторно запрошены (т. е. некоторые связанные с макетом свойства этого элемента или любого родительского элемента изменены).

Вы можете найти список затронутых свойств для WebKit здесь: Как (не) вызвать макет в WebKit. Более общая статья с примерами: рендеринг: перекраска, reflow / relayout, рестайл

Получение свойств может (см. ниже), но изменение свойств будет. Свойства, связанные со стилем, например ele.width для экземпляров. Свойства расположения, такие как src тега iframe или img, будут.

Также обратите внимание, прикрепляя прослушиватели событий(on*=..., addEventListener(*,...), и т.д.) вызывает оплавление. Это происходит из-за того, как события захватывают движение от самого внешнего родительского элемента к элементу src, и пузырьковый выход из элемента src через цепочку родительских элементов.

Более того, современные браузеры (chrome для пример) задержка обновления графического интерфейса, если не просматривается указанная страница. Это вызывает переотражение, когда страница снова становится активной из-за браузера, удостоверяющегося, что он правильно отображает страницу. Эта задержка / очередь может заставить свойства получения выглядеть так, как будто они вызывают перепрошивку, когда на самом деле браузер проверяет, правильно ли он отображает

Если вы не изменяете свойство CSS, а только обращаетесь к нему, то нет, страница не будет нуждаться в повторном вызове.

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

Браузеру поручено дать вам текущее значение , поэтому, как правило, он будет перекрашивать и перерисовывать, чтобы убедиться, что у вас есть то, что значениепрямо сейчас . Я нахожу, что это помогает думать об этом таким образом-каждый раз, когда вы просите положение или размер любого элемента на экране. страница, вы можете предположить, что вы собираетесь вызвать reflow/repaint. Нет, это не всегда верно на 100%, но достаточно близко к 100%, чтобы вы просто предположили, что если вы спрашиваете о верхней, левой, нижней, правой, высоте, ширине или о чем-либо, что влияет на эти измерения (например, масштаб, roation и т. д.), Вы вызовете R/R. Это примерно такой же конкретный ответ, какой я могу вам дать.

Опять же, это не 100% верно во все времена, но я считаю, что если вы думаете об этом таким образом, это поможет в 98% случаев, что этоявляется истинным, и это не будет так больно для других 2%, как это помогает для 98.