avoid-layout-thrashing

Batch DOM style writes and layout reads to prevent layout thrashing.

Updated Feb 10, 2026

Search Tags:#performance #web development #optimization #javascript #rendering #layout thrashing

Ready to run

npx skills add https://github.com/ihj04982/my-cursor-settings --skill avoid-layout-thrashing

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: avoid-layout-thrashing
Source: https://github.com/ihj04982/my-cursor-settings/tree/main/skills/avoid-layout-thrashing
Command: npx skills add https://github.com/ihj04982/my-cursor-settings --skill avoid-layout-thrashing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses performance bottlenecks in web development caused by inefficient DOM manipulation, specifically by preventing layout thrashing.

Core Features & Use Cases

Identify and Prevent Layout Thrashing: Provides strategies to avoid interleaving style writes with layout reads in JavaScript.
Optimize Rendering Performance: Helps developers write more efficient code that leads to smoother user experiences.
Use Case: Refactor existing JavaScript code to batch DOM style changes and read layout properties only once, significantly improving rendering speed on dynamic web pages.

Quick Start

Apply the provided code examples to refactor your JavaScript to batch style writes and read layout properties efficiently.

Frequently Asked Questions about avoid-layout-thrashing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is layout thrashing and how does it affect web performance?▼

Layout thrashing occurs when JavaScript interleaves DOM style writes with layout reads, forcing the browser into synchronous reflows. This degrades web performance by blocking the main thread, leading to rendering bottlenecks and poor user interactions.

How do I prevent layout thrashing in JavaScript?▼

To prevent layout thrashing in JavaScript, you must batch DOM style writes and read layout properties only once. This strategy avoids interleaving reads and writes, minimizing forced synchronous reflows and significantly improving rendering speed.

What is the best way to optimize DOM manipulation for rendering speed?▼

The best way to optimize DOM manipulation for rendering speed is to strategically group style writes separately from layout reads. Refactoring code to batch style changes ensures the browser calculates reflows efficiently, yielding smoother user experiences.

Can I use this optimization for high rendering efficiency in dynamic web pages?▼

Yes, this optimization is specifically applicable to frontend development scenarios requiring high rendering efficiency on dynamic web pages. Minimizing forced synchronous reflows ensures smooth user interactions even with frequent DOM updates.

Why does reading layout properties after writing styles cause forced synchronous reflows?▼

Reading layout properties after writing styles triggers forced synchronous reflows because the browser must immediately recalculate the DOM layout to return the accurate requested values. This blocks JavaScript execution and severely degrades web performance.

When should I not use batching for DOM style changes?▼

Batching DOM style changes is generally always recommended for dynamic pages, but it may not resolve performance issues if the root cause is excessive DOM nodes or unrelated network bottlenecks rather than interleaved layout reads and writes.