如何可視化讀取元素.offsetWidth會導致重新計算/迴流

Question

它的寫法無處不在，讀取element.offsetWidth會導致重新計算（甚至是重新排列？）元素的尺寸。

但是，我正在努力使這種效果可見。

在鉻我希望我能以使其可見3個簡單的步驟：

1. 打開Chrome開發者工具
2. 轉到元素標籤，並選擇您要引起元素上
3. 重計算/迴流轉到時間軸標籤並開始記錄
4. 轉到控制檯和鍵入$0.offsetWidth

現在，如果我去時間軸選項卡，我會假設看到迴流繪製。但是，我什麼都看不到。所以我一定是弄錯了。

Answer 1

經過一番研究，我想我可以回答我自己的問題。這並不是說offsetWidth直接導致迴流。它不僅會導致瀏覽器立即執行堆疊在渲染隊列中的所有操作。如果按照錯誤的順序組織您的閱讀和寫入DOM，這又可能意味着多次重排。