Как я могу визуализировать, что чтение element.offsetWidth вызывает пересчет/перекомпоновку

Везде написано, что чтение element.offsetWidth вызывает пересчет (или даже перекомпоновку?) размеров элемента.

Однако я изо всех сил пытаюсь сделать этот эффект видимым.

Я ожидаю, что в хроме я смогу сделать его видимым с помощью 3 простых шагов:

  1. откройте инструменты разработчика Chrome
  2. Перейдите на вкладку элемента и выберите элемент, для которого вы хотите вызвать пересчет/перекомпоновку.
  3. Перейдите на вкладку временной шкалы и начните запись
  4. Перейдите в консоль и введите $0.offsetWidth

Теперь, если я перейду на вкладку временной шкалы, я предполагаю, что увижу нарисованную перекомпоновку. Однако я ничего не вижу. Значит, я, должно быть, что-то не так понял.


person Christoph    schedule 06.08.2013    source источник


Ответы (1)


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

person Christoph    schedule 06.08.2013
comment
Имеет смысл. Я вошел только из сеанса приватного просмотра, чтобы я мог проголосовать за это;) - person flu; 15.08.2015