Reflow vs Repaint Trigger Table
Conservative invalidation categories for supported property changes, not universal pipeline cost or actual browser trace. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
Property changes can invalidate different rendering stages.
Property changes can invalidate different rendering stages.1
A classification note describes possible work rather than guaranteeing that every change follows one browser pipeline. Use Reflow vs Repaint Trigger Table to look up a supported term.
When to use Reflow vs Repaint Trigger Table
Use Reflow vs Repaint Trigger Table to look up a supported term. Choose the exact supported token from the table; preserve its punctuation and capitalization.
How to use Reflow vs Repaint Trigger Table and understand its results
- Choose the exact supported token from the table; preserve its punctuation and capitalization.
- Enter Changed property using the field table and validation rules below, then run the tool.
- Read Meaning and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| changedProperty | Changed property | string | Required; constraints below |
Enter one of the exact supported changedProperty tokens in the table below. The implementation performs a case-sensitive lookup and returns the stored meaning without interpreting a stylesheet, audio recording or performance. Unsupported tokens, added whitespace and alternate capitalization are input errors. The entries describe a bounded vocabulary rather than every valid value in the wider topic.
meaning = storedTable[exactSupportedToken] Field order, units and branch conditions follow the implementation explanation above.
| Exact supported token | Stored meaning |
|---|---|
| width | potential layout and paint invalidation |
| height | potential layout and paint invalidation |
| margin | potential layout and paint invalidation |
| color | potential paint invalidation |
| background-color | potential paint invalidation |
| transform | potential composite update when independently promoted; paint may still be needed |
| opacity | potential composite update when independently promoted; paint may still be needed |
| Output field | Meaning | Value type |
|---|---|---|
| meaning | Stored explanation for the exact supported token. | string |
{
"input": {
"changedProperty": "width"
},
"output": {
"meaning": "potential layout and paint invalidation"
}
}Limitations and assumptions
A classification note describes possible work rather than guaranteeing that every change follows one browser pipeline. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use content-visibility:auto Render Skip Note for a related task: Content visibility can allow a browser to skip eligible rendering work.
Use Layout Thrashing Read/Write Interleave Warning for a related task: A layout-dependent read after an invalidating write can require pending layout work.
References
-
Reflow vs Repaint Trigger Table — tool.io
Similar or alternative tools
- content-visibility:auto Render Skip Note
Content visibility can allow a browser to skip eligible rendering work.
- Layout Thrashing Read/Write Interleave Warning
A layout-dependent read after an invalidating write can require pending layout work.