Hello_coding

  • 홈
  • 태그
  • 방명록
  • front-end

repaint 1

[FE] 브라우저 렌더링과 page reflow & repaint

웹 페이지 렌더링 - 브라우저가 HTML파일을 화면에 그려내는 과정 1. 파싱 : HTML파일을 DOM으로 변환 (파싱) 2. 스타일 계산 : CSS를 CSSOM으로 파싱 3. 레이아웃 : CSSOM 정보를 토대로 레이아웃 트리(렌더 트리)생성 4. 페인트 : 렌더트리가 생성되면 , 이 트리를 따라 페인트 기록 생성 (페인트 기록 ? 요소를 렌더링하는 순서 저장, 레이어를 나눠 시각적인 부분 그리는 작업 진행) 5. 컴포지팅 : 각 레이어를 스크린에 픽셀로 표현, 레이어들을 합성해 페이지를 그림 page reflow & repaint - HTML 구조상의 변화, CSS의 변화가 있으면 reflow와 repaint 과정을 거치게 된다. 1. reflow - 레이아웃 (너비 ,높이)등 변경 시 영향받는 모든..

FE 2022.05.19
이전
1
다음
더보기
프로필사진

Hello_coding

  • 분류 전체보기
    • FE
      • JavaScript
      • HTML,CSS
      • REACT
      • Redux
      • TypeScript
      • Pattern
    • BE
      • HTTP
      • Node
      • AWS
    • 개발자가 꼭 알아야할 지식
    • 코딩테스트
      • 프로그래머스
    • 멋쟁이사자처럼
    • 독서
    • Git , Github
    • FE필수개념
    • 에러해결하기

Tag

TpyeScript, 프론트엔드스쿨2기, 프로그래머스, 리덕스툴킷, http, 코딩테스트, CSS, 자바스크립트, 리덕스, JS, 멋쟁이사자처럼, spa, node.js, react, 프론트엔드스쿨, useEffect, HTML, 리액트, TypeScript, 프론트엔드,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2026/02   »
일 월 화 수 목 금 토
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

방문자수Total

  • Today :
  • Yesterday :

Copyright © AXZ Corp. All rights reserved.

티스토리툴바