Forced reflow
Stay organized with collections
Save and categorize content based on your preferences.
Published: Oct 8, 2025
A forced reflow occurs when JavaScript queries geometric properties (such as offsetWidth) after styles have been invalidated by a change to the DOM state. This forces the browser to immediately do a layout, which interrupts script execution and results in poor performance.
An example of code that causes forced reflow:
Multiple forced reflows in quick succession is called "layout thrashing".
How to pass this insight
- Avoid, or at least reduce, the amount of DOM geometry writes that are done just before reads.
- Have no forced reflows that take longer than 30 milliseconds.
Additional references
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-10-08 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-10-08 UTC."],[],[]]
