BestHub
Sign in
Tagged articles

reflow

11 articles · Page 1 of 1
CodeNotes
CodeNotes
May 27, 2026 · Frontend Development

Understanding Reflow and Repaint: The Core Logic Behind Front‑End Performance Optimization

Reflow recalculates layout when geometric properties change, while repaint only redraws visual styles; the article explains their triggers, compares performance impact, and provides practical techniques—such as using DocumentFragment, batching reads before writes, and leveraging transform/opacity—to minimize costly reflows and achieve optimal front‑end rendering.

DOMbrowser renderingcomposite
0 likes · 6 min read
Understanding Reflow and Repaint: The Core Logic Behind Front‑End Performance Optimization
KooFE Frontend Team
KooFE Frontend Team
Jul 20, 2024 · Frontend Development

Stop Layout Thrashing: Master Forced Reflows for Faster Web Pages

This article explains how browsers perform layout and reflow, distinguishes asynchronous and forced synchronous reflows, shows how render‑tree caching works, illustrates why layout thrashing hurts performance, and provides practical techniques—including batch reads/writes and React hooks—to avoid costly reflows.

Layoutreflow
0 likes · 13 min read
Stop Layout Thrashing: Master Forced Reflows for Faster Web Pages
Code Mala Tang
Code Mala Tang
Jun 24, 2024 · Frontend Development

Why Browser Repaints Slow Your Site and How to Optimize Them

This article explains what browser repaint (reflow) is, how screen refresh rates and the pixel pipeline work, the performance impact of excessive repaints—including CPU load and CLS—and provides practical strategies to minimize reflows for smoother web experiences.

Browser PerformanceCLSFrontend Optimization
0 likes · 7 min read
Why Browser Repaints Slow Your Site and How to Optimize Them
政采云技术
政采云技术
Sep 28, 2021 · Frontend Development

Browser Rendering: Reflow and Repaint

This article explains the browser rendering pipeline, the concepts of reflow and repaint, how they are triggered, their performance impact, and provides practical techniques such as minimizing layout thrashing, using GPU‑accelerated properties, and leveraging requestAnimationFrame to optimize front‑end performance.

GPU AccelerationPerformance Optimizationbrowser rendering
0 likes · 17 min read
Browser Rendering: Reflow and Repaint
360 Tech Engineering
360 Tech Engineering
Jul 26, 2019 · Frontend Development

Properties and Methods That Trigger Layout Reflow in Browsers

The article lists DOM properties and methods—such as element measurements, scrolling APIs, focus calls, getComputedStyle, and various window and document attributes—that cause browsers to synchronously recalculate styles and layout, explains why they are performance bottlenecks, and offers practical mitigation techniques.

DOMLayoutbrowser
0 likes · 8 min read
Properties and Methods That Trigger Layout Reflow in Browsers
Tencent Cloud Developer
Tencent Cloud Developer
Feb 21, 2019 · Frontend Development

Understanding Browser Rendering: Reflow, Repaint, and Performance Optimizations

The article walks through the browser rendering pipeline—from parsing HTML/CSS and building the render tree to layout (reflow) and painting (repaint)—explains when these steps occur, details how browsers batch changes, and offers practical strategies such as batching DOM updates, caching layout reads, and using CSS3 hardware acceleration to minimize costly reflows and repaints for better performance.

Performance Optimizationbrowser renderingreflow
0 likes · 15 min read
Understanding Browser Rendering: Reflow, Repaint, and Performance Optimizations
21CTO
21CTO
Mar 4, 2016 · Frontend Development

How to Boost Web Page Performance: Master Reflow, Repaint, and Rendering

This article explains why web pages become sluggish, breaks down the browser's rendering pipeline, details how reflow and repaint affect performance, and provides nine practical techniques—including batching DOM operations, using requestAnimationFrame and requestIdleCallback—to dramatically improve page speed and achieve smooth 60 FPS animations.

Renderingbrowserfrontend
0 likes · 14 min read
How to Boost Web Page Performance: Master Reflow, Repaint, and Rendering
Architect
Architect
Feb 29, 2016 · Frontend Development

In-Depth Guide to Web Page Performance: Rendering, Reflow, Repaint, and Optimization Techniques

This article explains why web pages can suffer from poor performance due to costly reflow and repaint operations, outlines the page rendering process, and provides nine practical techniques—including batching DOM reads/writes, using off‑screen DOM, and leveraging requestAnimationFrame or requestIdleCallback—to reduce rendering overhead and achieve smoother 60 FPS animations.

RenderingWeb Performancefrontend
0 likes · 11 min read
In-Depth Guide to Web Page Performance: Rendering, Reflow, Repaint, and Optimization Techniques
21CTO
21CTO
Feb 2, 2016 · Frontend Development

10 Proven Ways to Reduce Reflows and Boost Web Performance

This article explains repaint and reflow concepts, lists common scenarios that trigger them, and provides practical frontend optimization techniques—including CSS simplification, DOM hierarchy reduction, batch updates, and developer‑tool analysis—to minimize layout thrashing and improve page speed.

DOM optimizationJavaScriptfrontend
0 likes · 9 min read
10 Proven Ways to Reduce Reflows and Boost Web Performance
Java High-Performance Architecture
Java High-Performance Architecture
Dec 8, 2015 · Frontend Development

How Repaints and Reflows Impact Web Performance—and How to Minimize Them

This article explains what browser repaints and reflows are, which operations trigger them, and provides practical techniques—such as batching style changes, using absolute positioning, leveraging document fragments, temporarily hiding elements, and caching values—to dramatically reduce their performance cost.

DOMOptimizationfrontend
0 likes · 5 min read
How Repaints and Reflows Impact Web Performance—and How to Minimize Them