리플로우는 문서 내 요소의 위치와 도형을 다시 계산하기 위한
웹브라우저 프로세스의 이름으로, 문서의 일부 또는 전체를
다시 렌더링하는 데 사용됩니다. 리플로우는
브라우저에서 사용자를 차단하는 작업이므로, 개발자가 리플로우 시간을
향상하는 방법을 이해하고 다양한 문서 속성(DOM 심도,
CSS 규칙 효율성, 다양한 스타일 유형 변경)이 리플로우 시간에
미치는 영향을 이해하는 것이 중요합니다. 간혹 문서에 있는
단일 요소를 리플로우하려면 상위 요소 및 이어지는
모든 요소도 리플로우해야 할 수 있습니다.
리플로우를 트리거할 수 있는 사용자 작업 및 가능한 DHTML
변경사항은 매우 다양합니다. 브라우저 창의 크기 변경,
계산된 스타일이 수반되는 자바스크립트 메소드 사용,
DOM에서 요소 추가 또는 삭제, 요소 클래스 변경은
리플로우를 트리거하는 몇 가지 예입니다. 또한 일부 작업의 경우 예상보다 더 많은 리플로우 시간이 발생할 수 있습니다. Steve Souders의 '더 빠른 웹사이트'에서 발췌한 다음 다이어그램을 살펴보세요.
위의 표에는 모든 브라우저에서 자바스크립트의
일부 스타일 변경만 리플로우를 야기하며 리플로우에 걸리는 시간도
다양하다는 점이 명확히 나타나 있습니다. 또한 최신 브라우저에서 리플로우 시간이 향상된다는 점도
어느 정도 분명합니다.
Google에서는 다양한 방법으로 웹페이지 및 애플리케이션의 속도를 테스트하며, 리플로우는 UI에 기능을 추가할 때 고려하는 주요 요소입니다. Google은 활기차고 대화형이며 즐거운
사용자 경험을 제공하기 위해 노력하고 있습니다.
가이드라인
다음은 웹페이지에서 리플로우를 최소화하는 데 도움이 되는 간단한 가이드라인입니다.
불필요한 DOM 심도를 줄입니다. DOM 트리의 수준 하나를 변경하면 트리의
모든 수준, 즉 위로는 루트, 아래로는 수정된 노드의 하위 요소에 이르기까지
모두 변경될 수 있습니다. 이에 따라 리플로우를 실행하는 데 더 많은 시간이 걸리게 됩니다.
CSS 규칙을 최소화하고 사용되지 않는 CSS 규칙을 삭제합니다.
애니메이션과
같이 복잡한 렌더링 변경이 필요한 경우 흐름 밖에서
변경합니다. 변경할 때는 절대 위치나 고정 위치를 사용합니다.
불필요하고
복잡한 CSS 선택기, 특히 하위 요소 선택기는 사용하지 않습니다.
이 경우 선택기를 일치시키기 위해 더 높은 CPU 처리량이 필요합니다.
다음 동영상에서 Lindsey는 페이지에서 리플로우를 최소화할 수 있는 몇 가지 간단한 방법을 설명합니다.
[null,null,["최종 업데이트: 2025-07-25(UTC)"],[[["\u003cp\u003eReflow, the web browser's process of recalculating element positions for re-rendering, can significantly impact web page performance as a user-blocking operation.\u003c/p\u003e\n"],["\u003cp\u003eVarious actions, like resizing the browser window or manipulating the DOM with JavaScript, can trigger reflow, with some operations being more time-consuming than others.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can minimize reflow by reducing DOM depth, optimizing CSS rules, using absolute or fixed positioning for complex rendering changes, and avoiding complex CSS selectors.\u003c/p\u003e\n"],["\u003cp\u003eModern browsers are continuously improving reflow times, but understanding and mitigating its impact remains crucial for creating performant web experiences.\u003c/p\u003e\n"]]],["Reflow, a browser process that recalculates element positions and geometries, can be triggered by actions like resizing the window, DOM manipulation, or style changes. To minimize reflow, developers should reduce DOM depth, minimize CSS rules and selectors, and perform complex rendering changes outside the normal flow using absolute or fixed positioning. Certain JavaScript style modifications cause varying degrees of reflow. Google prioritizes reflow considerations when designing web page features for enhanced user experience.\n"],null,["# Minimizing browser reflow\n\nAuthor: Lindsey Simon, UX Developer\n\nRecommended knowledge: Basic HTML, basic JavaScript, working knowledge of CSS\n\nReflow is the name of the web browser process for re-calculating the\npositions and geometries of elements in the document, for the purpose\nof re-rendering part or all of the document. Because reflow is a\nuser-blocking operation in the browser, it is useful for developers to\nunderstand how to improve reflow time and also to understand the\neffects of various document properties (DOM depth, CSS rule efficiency,\ndifferent types of style changes) on reflow time. Sometimes reflowing a\nsingle element in the document may require reflowing its parent\nelements and also any elements which follow it.\n\nThere are a great variety of user actions and possible DHTML changes\nthat can trigger a reflow. Resizing the browser window, using\nJavaScript methods involving [computed styles](http://www.w3.org/TR/1998/REC-CSS2-19980512/cascade.html#computed-value),\nadding or removing elements from the DOM, and changing an element's\nclasses are a few of the things that can trigger reflow. It's also\nworth noting that some operations may cause more reflow time than you\nmight have imagined - consider the following diagram from Steve\nSouders' talk \"[Even Faster Web Sites](/events/io/sessions/EvenFasterWebsites)\":\n\nFrom the table above it's clear that not all changes to the style in\nJavaScript cause a reflow in all browsers, and that the time it takes\nto reflow varies. It is also somewhat clear that modern browsers are\ngetting better at reflow times.\n\nAt Google, we test the speed of our web pages and applications in a\nvariety of ways - and reflow is a key factor we consider when adding\nfeatures to our UIs. We strive to deliver lively, interactive and\ndelightful user experiences.\n\n### Guidelines\n\nHere are some easy guidelines to help you minimize reflow in your web pages:\n\n1. Reduce unnecessary DOM depth. Changes at one level in the DOM tree can cause changes at every level of the tree - all the way up to the root, and all the way down into the children of the modified node. This leads to more time being spent performing reflow.\n2. Minimize CSS rules, and remove unused CSS rules.\n3. If you make complex rendering changes such as animations, do so out of the flow. Use position-absolute or position-fixed to accomplish this.\n4. Avoid unnecessary complex CSS selectors - descendant selectors in particular - which require more CPU power to do selector matching.\n\nIn this video, Lindsey explains some simple ways to minimize reflow on your pages: \n\n\u003cbr /\u003e\n\n### Additional resources\n\n- [Opera's Repaints and reflows](http://dev.opera.com/articles/view/efficient-javascript/?page=3)\n- Satoshi Ueyama's debug-Firefox reflow demos:\n - [google.co.jp reflow](http://www.youtube.com/watch?v=nJtBUHyNBxs)\n - [mozilla.org reflow](http://www.youtube.com/watch?v=ZTnIxIA5KGw)\n - [ja.wikipedia.org reflow](http://www.youtube.com/watch?v=dndeRnzkJDU)\n- [Nicole Sullivan on Reflows and Repaints](http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/)\n\nFeedback\n--------\n\nWas this page helpful? \nYes Great! Thank you for the feedback. If you have a specific, answerable question about using PageSpeed Insights, ask the question in English on [Stack\n| Overflow](https://stackoverflow.com/questions/tagged/pagespeed-insights). For general questions, feedback, and discussion, start a thread in the [mailing list](https://groups.google.com/forum/#!forum/pagespeed-insights-discuss).\nNo Sorry to hear that. If you have a specific, answerable question about using PageSpeed Insights, ask the question in English on [Stack\n| Overflow](https://stackoverflow.com/questions/tagged/pagespeed-insights). For general questions, feedback, and discussion, start a thread in the [mailing list](https://groups.google.com/forum/#!forum/pagespeed-insights-discuss)."]]
