🍒 Chae-ri Dev 🍒

  • 홈
  • 태그
  • 방명록

리액트렌더링과정 1

[React] 브라우저 + 리액트 렌더링 과정에 대해 알아보자

기술세미나로 리액트 렌더링 최적화라는 주제에 대해 준비하기로 하였다.렌더링 최적화 방법을 소개하기 전에 브라우저와 리액트가 각각 어떤 과정을 통해 렌더링이 되는지 알아볼 필요가 있었다.이에 대해 확실하게 정리하고 넘어가고자 포스팅으로 남기려고 한다. 브라우저는 어떻게 HTML, CSS로 작성한 웹페이지를 화면에 렌더링 하는걸까?🤔브라우저 렌더링 과정브라우저는 Critical Rendering Path(CRP)라는 과정을 통해 렌더링이 진행된다.상세 과정은 다음과 같다.1단계 - HTML, CSS 변환(DOM, CSSOM 생성)2단계 - Render Tree 생성3단계 - Layout 과정4단계 - Painting 과정HTML 파싱을 통한 DOM 생성CSS 파싱을 통한 CSSOM 생성DOM 트리와 CSS..

React 2025.02.09
이전
1
다음
더보기
프로필사진

🍒 Chae-ri Dev 🍒

채리의 개발 블로그 ٩( *˙0˙*)۶

250x250
반응형
  • 분류 전체보기 (89)
    • Frontend (4)
      • Package Manager (1)
      • ESLint (1)
      • Prettier (1)
      • 웹 서버 (1)
    • CS (9)
      • 운영체제 (7)
      • 네트워크 (2)
      • 데이터베이스 (0)
    • React (7)
    • NextJS (1)
    • JavaScript (6)
    • Css (1)
    • GSAP (1)
    • Python (3)
    • Algorithm (17)
      • Programmers (7)
      • BackJoon (1)
      • 알고리즘 정리 (9)
    • Cloud (1)
      • Docker (1)
    • OPIc (25)
      • 오픽노잼(IM) (16)
      • 오픽노잼(IH) (9)
    • file (2)
    • 프로젝트 (2)
    • 우리FIS아카데미 (6)
    • Git (2)
    • Etc (2)

Tag

k-디지털트레이닝, 글로벌소프트웨어캠퍼스, 리액트, Github, 파이썬, 운영체제, OS, 프로그래머스, javascript, 알고리즘, 우리FIS아카데미, algorithm, react, 우리FISA, 우리에프아이에스, Python, 클라우드서비스개발, 오픽노잼, 오픽, OPIC,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

Archives

Calendar

«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바