boseok-note
  • README
  • javascript
    • 함수형 자바스크립트
    • core
      • 이벤트루프 (Event Loop)
      • boxing, unboxing
      • prototype
      • 실행컨텍스트
      • hoisting
      • 클로져(Closure)
      • arguments
      • Scope - 스코프 - 유효범위
    • api
      • Promise
      • Fetch API
      • worker-api
      • Web API
    • lib
      • rxjs
        • rxjs
    • 호스트객체?
    • es6
      • var-let-const
      • template-literals
      • async-await
    • tip
      • array-like
      • Object literal, new Object
    • dom-api
      • HTML Element get Text
      • get-size
      • scrollToBottom
    • for in, for of 차이
    • storage
    • Constructor (생성자)
    • Javascript
    • module
  • front-end
    • vuejs
      • vue-rx
      • README
        • 1-start
        • 2-basic-component
        • 3-add-component
        • 4-advanced-component
        • 5-dynamic-methods-event
        • 6-internal-process
      • next-tick
      • compare-react
      • v-model-with-props
      • v-for
      • vuejs
      • vuex
    • browser
      • dom
      • cssom
      • reflow, repaint
      • 렌더링 트리(Rendering Tree)
      • web-standard
    • css
      • text-ellipse
      • white-space
      • css layout
    • Pre-render
    • react-native
      • react-native
    • 최적화 관련
    • reactjs
      • performance
      • reactjs
    • CSR, SSR
  • server-side
    • letsencrypt
    • auto-deploy
    • nlb
    • Certbot, aws https setting with wildcard
    • mysql
    • node.js
      • npm
        • npm install
      • node-dynamodb
      • node에서 간편하게 letsencrypt를 사용하여 https 구현하는 방법
    • Docker
    • nginx
    • Amazon Web Service
    • nginx https 설정
  • design-pattern
    • observer
    • flux
    • README
  • coop
    • git
      • gitignore
      • remote
      • ssh key 사용하기
      • password
      • credential
      • git
  • cs
    • port
    • data-structure
      • tree
      • binary-tree
    • network
      • home-router
      • tcp-udp
      • http
    • process
  • etc
    • sync-async
    • seo
      • seo
      • SEO Check Point
    • rest
    • unity
      • methods
Powered by GitBook
On this page
  1. front-end
  2. browser

렌더링 트리(Rendering Tree)

Previousreflow, repaintNextweb-standard

Last updated 6 years ago

및 트리는 결합되어 렌더링 트리를 형성합니다.

렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함됩니다.

레이아웃은 각 객체의 정확한 위치 및 크기를 계산합니다.

마지막 단계는 최종 렌더링 트리에서 수행되는 페인트이며, 픽셀을 화면에 렌더링합니다.

여기에서 reflow와, repaint라는 용어가 등장하는데,

reference :

그 설명은 여기에서..
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ko
DOM
CSSOM