AgentSkillsCN

js_batch_dom_css

从Vercel导入技能：js_batch_dom_css

SKILL.md
--- frontmatter
description: Imported skill js_batch_dom_css from vercel
name: js_batch_dom_css
signature: eec3bd5e0ce422e466035d2d94c37a8d8aeb4910d96e23ce47e01c116357ffd4
source: /a0/tmp/skills_research/vercel/skills/react-best-practices/rules/js-batch-dom-css.md

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.