용어 사전 coding 용어 페이지

레이아웃 스래싱

레이아웃 읽기와 쓰기를 번갈아 실행해 리플로를 폭증시키는 실수

layout-thrashing #performance#dom

English version

다른 이름

layout thrashing레이아웃 떨림

선수 개념

관련 개념

DocumentFragment requestAnimationFrame

핵심 아이디어

레이아웃 스래싱은 DOM을 조금 수정하고 즉시 getBoundingClientRect 같은 값을 읽으면서 레이아웃 계산을 반복시키는 현상입니다. 요소 수가 많을수록 프레임 손실이 커집니다.

이 블로그에서의 역할

Mathbong의 성능 글에서는 fragment로 묶기, requestAnimationFrame으로 측정하기 같은 처방을 이 용어와 함께 설명합니다. 독자가 부분 갱신과 레이아웃 제어 사이의 균형을 잡을 때 참고하는 안전 장치입니다.

이 개념을 다루는 글

[JavaScript 시리즈 17편] 퍼포먼스 기초: 페인트·리플로와 지연 로딩 렌더링 단계, layout thrashing 방지, 이미지 지연 로딩, 관찰자 API로 성능을 지키는 방법을 다룹니다.[JavaScript Series 17] Performance Basics: Paint, Reflow, and Lazy Loading Understand how the browser draws web pages, learn how to prevent common layout slowdowns, and apply lazy loading with easy-to-follow code.