mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-02-13 18:55:43 +01:00
Kaj Kowalski
5bfd762e55
- Update tsconfig to ES2024 target and bundler moduleResolution - Add dynamic imports for chart.js and recharts (bundle optimization) - Consolidate 17 useState into useReducer in sessions page - Fix 18 .js extension imports across lib files - Add type declarations for @rapideditor/country-coder - Fix platform user types (PlatformUserRole enum) - Fix Calendar component prop types - Centralize next-auth type augmentation - Add force-dynamic to all API routes (prevent build-time prerender) - Fix Prisma JSON null handling with Prisma.DbNull - Fix various type mismatches (SessionMessage, ImportRecord, etc.) - Export ButtonProps from button component - Update next-themes import path - Replace JSX.Element with React.ReactElement - Remove obsolete debug scripts and pnpm lockfile - Downgrade eslint to v8 for next compatibility
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. |