# critical rendering path

7개의 포스트

Critical-Rendering-Path

브라우저에 어떻게 그림이 그려질까? 다운로드 - html(DOM), css(CSSOM) 그릴준비 - 두개 합치기(렌더트리) - 위치그리기 - 색칠하기 브라우저에따라 위치를 그리는 것을 레이아웃, 리플로우 색칠하는 것을 페인트, 리페인트 라고 부른다. 레이아웃을 다시 그리는 것은 피할 수 있으면 피하는 것이 좋다. https://csstriggers.c...

2022년 4월 27일
·
0개의 댓글
post-thumbnail

HTML :Critical rendering path

언제 보여지냐 그것이 문제로다! 브라우저의 렌더링 경로(Critical Rendering Path)에 대해 살펴보자.

2021년 12월 20일
·
0개의 댓글
post-thumbnail

Critical Rendering Path 와 Virtual DOM

브라우저 렌더링 프로세스 먼저 DOM 조작을 하게 되면 보통의 경우 tree를 수정하게 된다. 그럼 render tree - layout - painting의 단계를 다시 거치게 된다. view의 변화를 감지하면 virtual DOM을 1차적으로 변화시킨다.그런 뒤

2021년 9월 13일
·
0개의 댓글
post-thumbnail

면접질문 CRP

일단 일반적인 CRP 과정부터 이야기 해보자.CRPCRP에 대해 이야기 하기전에 개념부터 잡자DOM (DOCUMENT OBJECT MODEL)은 문서객체모델 트리는 완전히 구분 분석된 HTML 페이지를 의미한다. 쉽게 우리는 개발자도구를 통해 DOM을 볼수 있다. 이

2021년 7월 30일
·
0개의 댓글
post-thumbnail

성능 최적화와 관련해서 : reflow 와 repaint

이렇게 렌더 트리 생성이 끝나면 배치가 시작된다. 레이아웃 단계는 트리를 생성하면서 계산된 노드와 스타일을 기기의 뷰포트에서 어떤 위치에서 어떻게 보이도록 하는지 결정하는 단계입니다. 이것을 레이아웃 단계라고 부르고 reflow라고도 한다. 레이아웃 프로세스는 뷰포트

2021년 6월 17일
·
1개의 댓글

웹 브라우저의 동작 원리 : critical rendering path

Javascript Engine 브라우저에는 렌더링뿐만 아니라 자바스크립트를 해독하는 자바스크립트 엔진도 존재한다. 자바스크립트같은 프로그래밍 언어는 컴퓨터가 이해할 수 있는 언어로 변환해 주어야 컴퓨터가 그것을 읽고 처리할 수 있다. 컴퓨터는 0과 1로 이루어진

2021년 6월 17일
·
0개의 댓글