dcaaef1011
Format: YYYY-MM-DD-description.md - 2026-01-19-infrastructure-deployment.md - 2026-01-19-backend-api-implementation.md (in progress) Co-Authored-By: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com>
57 lines
1.6 KiB
Markdown
57 lines
1.6 KiB
Markdown
---
|
|
title: Batch DOM CSS Changes
|
|
impact: MEDIUM
|
|
impactDescription: reduces reflows/repaints
|
|
tags: javascript, dom, css, performance, reflow
|
|
---
|
|
|
|
## Batch DOM CSS Changes
|
|
|
|
Avoid interleaving style writes with layout reads. When you read a layout property (like `offsetWidth`, `getBoundingClientRect()`, or `getComputedStyle()`) between style changes, the browser is forced to trigger a synchronous reflow.
|
|
|
|
**Incorrect (interleaved reads and writes force reflows):**
|
|
|
|
```typescript
|
|
function updateElementStyles(element: HTMLElement) {
|
|
element.style.width = '100px'
|
|
const width = element.offsetWidth // Forces reflow
|
|
element.style.height = '200px'
|
|
const height = element.offsetHeight // Forces another reflow
|
|
}
|
|
```
|
|
|
|
**Correct (batch writes, then read once):**
|
|
|
|
```typescript
|
|
function updateElementStyles(element: HTMLElement) {
|
|
// Batch all writes together
|
|
element.style.width = '100px'
|
|
element.style.height = '200px'
|
|
element.style.backgroundColor = 'blue'
|
|
element.style.border = '1px solid black'
|
|
|
|
// Read after all writes are done (single reflow)
|
|
const { width, height } = element.getBoundingClientRect()
|
|
}
|
|
```
|
|
|
|
**Better: use CSS classes**
|
|
|
|
```css
|
|
.highlighted-box {
|
|
width: 100px;
|
|
height: 200px;
|
|
background-color: blue;
|
|
border: 1px solid black;
|
|
}
|
|
```
|
|
|
|
```typescript
|
|
function updateElementStyles(element: HTMLElement) {
|
|
element.classList.add('highlighted-box')
|
|
|
|
const { width, height } = element.getBoundingClientRect()
|
|
}
|
|
```
|
|
|
|
Prefer CSS classes over inline styles when possible. CSS files are cached by the browser, and classes provide better separation of concerns and are easier to maintain. |