리플로우 및 리페인트 관련 이미지

리플로우 및 리페인트

Byissue

웹 페이지(브라우저) 렌더링 프로세스

렌더링 엔진은 HTML 파일과 스타일 시트를 해석하여 렌더링 트리를 생성합니다.


리플로우 및 리페인트 관련 대표 이미지

HTML 파싱 -> DOM 트리 SytyleSheet 파싱 -> CSSOM 트리 DOM 트리 + CSSOM 트리 -> 렌더링 트리

Render Tree는 화면에 표시되는 모든 노드의 내용과 스타일 정보를 담고 있으며, Render Tree가 형성되면 레이아웃 단계로 들어갑니다.

브라우저에서 뷰포트와 노드의 정확한 위치와 크기를 계산하는 과정을 레이아웃 또는 기술 용어로 리플로우라고 합니다.

  • 리플로우 및 다시 그리기는 변경 사항을 계산하고 요소가 시각적으로 변경될 때 화면에 그리는 작업입니다.
  • DOM이 시각적으로 변경되면 렌더 트리를 다시 생성하기 위해 리플로우가 발생합니다.
  • 생성된 렌더 트리를 기준으로 다시 칠하여 요소를 화면에 그립니다.

리플로우란 무엇입니까?

생성된 DOM 노드의 레이아웃 값(너비, 높이, 위치 등)이 변경되면 영향을 받는 모든 노드의 값을 다시 계산하여 렌더 트리를 재생성하는 과정

리플로우의 주요 키는 레이아웃입니다. 레이아웃이 완료되면 채색을 다시 그려야 합니다.

역류는 언제 발생합니까?

  • 페이지의 초기 렌더링(초기 레이아웃 프로세스)
  • 노드(요소) 추가 또는 제거
  • 요소의 위치 변경
  • 요소의 크기 변경(여백, 패딩, 테두리, 너비, 높이 등)
  • 글꼴 및 이미지 크기 변경
  • 창 크기 조정
    • 뷰포트 크기가 변경되면 전체 레이아웃을 다시 그리는 리플로우가 발생합니다.

리페인팅이란?

리플로우 프로세스가 완료된 후 재생성된 렌더 트리를 다시 그리는 프로세스입니다.

* 단, 재도색은 레이아웃 그래프를 변경할 때만 발생하는 것은 아닙니다. 리플로를 제외하고 노드의 배경색, 가시성, 아웃라인 및 기타 스타일이 변경되면 리페인트만 발생합니다.

성능 최적화(리플로우 다시 그리기 감소)

  1. 스타일 변경 시 최하위 노드의 클래스 변경
    • 스타일을 변경할 때 상위 노드 전체를 변경하는 것이 아니라 내부 하위 노드의 클래스만 변경하면 리플로우가 발생하는 노드의 범위가 더 적기 때문에 최적화할 수 있지만 이 방법은 이미 작성된 구조이기 때문이다. 실제로 통과하기는 어렵습니다. 구조 자체를 변경하면 원하는 스타일이 변경되므로 실제로 적용 범위는 크지 않습니다.
  2. 인라인 스타일을 피하십시오.
    • 인라인 스타일은 html을 구문 분석할 때 레이아웃에 영향을 미치기 때문에 추가 리플로우를 유발합니다.
  3. 애니메이션이 있는 노드(요소)는 위치 속성이 고정 또는 절대값으로 설정되어 있습니다.
    • 애니메이션 효과는 계속해서 변하기 때문에 고정된 위치나 절대 위치가 많은 수의 리플로우를 일으키면 애니메이션 노드가 모든 노드에서 분리되기 때문에 애니메이션의 해당 노드만 분리되어 리플로우가 발생할 수 있습니다. 할 수 있다.
  4. 피하다
    공들여 나열한 것

    • 테이블 태그가 모두 로드되면 테이블 너비가 계산되어 화면에 그려집니다. 따라서 테이블 내용이 조금만 변경되더라도 너비가 다시 계산되고 테이블의 모든 노드가 재정렬됩니다.따라서 사용을 피해야 합니다.
    레이아웃을 만드십시오.

    • <表>두번째 사용 그 다음에 테이블 레이아웃: 고정 값 지정하다 이것은 엄청난. 테이블 레이아웃: 고정예 테이블 내용물 마침내 ~에 따르면 테이블 너비 전산 이것은 아니요 왜냐하면테이블 레이아웃~의 기초적인 값 자동차도착하다 비교하다 성능 더 엄청난. <表>두번째 공들여 나열한 것 사용 아니요 데이터 표시 사용 사용 경우에도 테이블 레이아웃: 고정던지다 지정하다 이것은 성능 ~에 따르면 더 엄청난.
  5. CSS 표현을 피하십시오.
    • CSS 표현식을 사용하면 리플로우할 때마다 JavaScript 표현식이 다시 계산되어 높은 코드 오버헤드가 발생합니다.
  6. CSS 하위 선택자 축소
    • CSS 하위 선택자를 최소화하는 것은 리플로우 수를 줄이는 것이 아니라 렌더링 트리 계산을 최소화하는 방법입니다.
    • 더 많은 CSS 하위 선택자는 CSSOM 트리를 더 깊게 만들고 렌더링 트리 빌드를 더 길게 만듭니다.
    • <div class="reflow_box">
  <ul class="reflow_list">
    <li>
      <button type="button" class="btn">버튼</button>
    <li>
    <li>
      <button type="button" class="btn">버튼</button>
    <li>
  </ul>
</div>
      /* 잘못된 예 */
.reflow_box .reflow_list li .btn{
    display:block;
}
/* 올바른 예 */
.reflow_list .btn {
  display:block;
}
  7. display: none 속성을 사용하여 스타일을 변경합니다.
    • display:none이 있는 노드는 렌더 트리 그리기에서 제외되므로 노드가 화면에 즉시 표시되지 않는 경우 display:none을 사용하여 리플로우 비용을 줄일 수 있습니다.
  8. 캐시 사용
    • 브라우저는 레이아웃 변경을 큐에 넣고 동시에 실행하여 리플로우를 최소화합니다. 그러나 스타일 정보(예: 오프셋 또는 스크롤 상단) 계산을 요청할 때마다 대기열을 비우고 변경 사항을 적용하여 올바른 정보를 제공합니다.

    9. 어디에서 확인할 수 있습니까

    1. 먼저 (개발자 도구) > (성능) 탭을 엽니다.
    2. 녹음 버튼을 클릭합니다.
    3. 작성하는 동안 요소의 텍스트 색상을 변경합니다.
    4. 로깅을 중지하고 결과를 보면 요소의 텍스트 색상을 변경할 때 페인트만 발생한다는 것을 알 수 있습니다.


    리플로우 및 리페인트 관련 이미지
    https://mong-blog. 리플로우, 리페인트, 브라우저 렌더링에 대해 알아보기

    Similar Posts

    • (ROS2-6 시작) 매개변수

      Byissue

      ROS2 매개변수 노드 설정, 런타임에 설정된 값 노드별 매개변수 ROS2 매개변수 유형 부울, 정수, 복식, 문자열, 목록… 매개변수 선언 number_publisher.cpp #include “rclcpp/rclcpp.hpp” #include “example_interfaces/msg/int64.hpp” class NumberPublisherNode : public rclcpp::Node { public: NumberPublisherNode() : Node(“number_publisher”), number_(2) { // add this line this->declare_parameter(“name”); number_publisher_ = this->create_publisher<example_interfaces::msg::Int64>(“number”, 10); number_timer_ = this->create_wall_timer(std::chrono::seconds(1), std::bind(&NumberPublisherNode::publishNumber, this)); RCLCPP_INFO(this->get_logger(), “Number publisher has been…

    • 남수단 통관

      Byissue

      남수단 통관 안녕하세요.오늘 남수단 통관노력하겠습니다. 남수단의 공식 명칭은 무엇입니까? 남수단 공화국입니다. 남수단의 국기는 2차 수단 내전이 끝난 2005년에 만들어졌다. 수단 인민 해방군의 깃발 아래 만들어졌습니다. 검정, 빨강, 초록의 이 깃발을 보면 검정은 검정이고 빨강은 자유를 위해 흘린 피입니다. 녹색은 땅이고 두 개의 흰색 선은 평화를 상징합니다. 왼쪽의 파란색 삼각형은 나일강이고 베들레헴의 노란색 별은 남수단의 통합을…

    • 아주 적은 돈으로 투자를 시작하기 위한 진정한 조언

      Byissue

      소개하다 투자는 시간이 지남에 따라 부를 축적하는 좋은 방법이 될 수 있지만 많은 사람들은 시작하는 데 많은 돈이 필요하다고 생각합니다. 그러나 반드시 그런 것은 아닙니다. 올바른 접근 방식과 몇 가지 현명한 선택을 통해 소액을 저축한 경우에도 투자를 시작할 수 있습니다. 이 기사에서는 소액의 종자돈으로 투자를 시작하는 데 도움이 되는 몇 가지 팁을 공유합니다. 아주 적은…

    • 노화된 독소를 제거하여 신체 건강에 도움을 주는 글루타티온의 효능

      Byissue

      안녕하세요! 스피넬 아엘 Arm입니다.최윤 집 성형 내부 효과는 주택 따뜻함을 높일 수 있습니다.아파트는 아파트나 빌라에 살고 있지만 기존 방면에 있는 작은 경사진과 침실장 모양의 천장, 최유 모양의 천장이 있다.삼각 침실 천장은 침대에 누워 있고 침실점 벽지 및 어두운 커튼 벽지, 압력 ↑를 만듭니다.벽지 & 커튼 컬러 교체 권장 사항 및 커튼 컬러 교체 추천을 위해…

    • 균형 잡힌 세계(30)

      Byissue

      공유 소스 보기(acmicpc.net) 공유 소스 보기 www.acmicpc.net 아, 짜증나. . . 10분 만에 풀었는데 컴파일 할 때 자꾸 안 된다고 하셔서 부담이 컸어요. . . 문제를 찾는 데 40분. 먼저 제가 쓴 답변을 보겠습니다. #include<bits/stdc++.h> using namespace std; int main(){ ios_base::sync_with_stdio(false); cin.tie(NULL); cout.tie(NULL); while(true){ string s; getline(cin, s); stack<char> stk; bool check = true; if(s==”.”)…

    • 나는 신이 어떻게 Netflix를 무료로 시청합니까?

      Byissue

      I Am God은 최근 Netflix에서 # 1을 기록하면서 인기를 얻었습니다. 이에 대해 알아보고 Netflix를 시청하는 방법을 알아보세요. 미스터 펑 정명석 (1945년생 현재 77세) 저는 충청남도 금산군 산면 출신입니다. 키 168cm, 몸무게 70kg으로 6남 1녀 중 셋째입니다. jms 홈페이지에 제가 직접 설명했습니다. 나는 신 정명석 1966년 입대 후 베트남전에 두 차례 참전했다. 그는 1978년에 기독교 복음주의…