mirror of
https://github.com/lobehub/lobe-chat.git
synced 2026-06-14 03:30:19 +00:00
Innei
fcdaf9d814
* v2 init * chore: update eslint suppressions and package dependencies - Removed several eslint suppressions related to array sorting and reversing from eslint-suppressions.json to clean up the configuration. - Updated @lobehub/lint package version from 2.0.0-beta.6 to 2.0.0-beta.7 in package.json for improvements and bug fixes. - Made minor formatting adjustments in vitest.config.mts and various SKILL.md files for better readability and consistency. Signed-off-by: Innei <tukon479@gmail.com> * fix: clean up import statements and formatting - Removed unnecessary whitespace in replaceComponentImports.ts for improved readability. - Standardized import statements in contextEngineering.ts and createAgentExecutors.ts by adding missing spaces for consistency. Signed-off-by: Innei <tukon479@gmail.com> * chore: update eslint suppressions and clean up code formatting * 🐛 fix: use vi.hoisted for mock variable initialization Fix TDZ error in persona service test by using vi.hoisted() to ensure mock variables are available when vi.mock factory runs. --------- Signed-off-by: Innei <tukon479@gmail.com>
58 lines
1.6 KiB
Markdown
58 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.
|