# CRP
[WEB] 브라우저 렌더링 과정 - CRP(feat.reflow, repaint)
🌈 학습을 위해 Must-Know-About-Frontend에서 가져온 내용을 수정, 추가하여 작성한 글입니다. 기존 내용과 대부분 유사하며 Summary 부분은 추가하였습니다. Summary | | 설명 | | :--------: | :-------- | | 카테고리 | 브라우저 렌더링 과정 | | CRP | 1. HTML 파싱 -> Dom 트리 구축2. CSS 파싱 -> CSSOM 트리 구축3. JavaScript 실행4. 렌더 트리 구축(DOM + CSSOM)5. Layout/Reflow6. Paint | | 주의 | - HTML 파싱(1단계) 중간에 JavaScript 실행(3단계)될 수 있음(1단계 중단 -> 3단계 진행 -> 1단계 진행)- `d
브라우저의 렌더링 과정
모던 자바스크립트 딥 다이브 스터디중! 웹 애플레이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행한다. 따라서 브라우저 환경을 고려할 때 보다 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능하다. 자바스크립트의 기본 개념과 동작원리 브라우저는 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱해서 브라우저에 렌더링 하는 걸까? 브라우저는 HTML, CSS, Javascript, Image, Font 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라우저 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이를 결합하여 Render Tree를 생성한다. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행한다. 렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와
중요 렌더링 경로 CRP
CRP 페이지를 그리기 위한 브라우저의 실행순서 중요 렌더링 경로 (Critical Rendering Path)는 브라우저가 HTML, CSS, Javascript를 픽셀로 화면에 그리기까지의 일련의 실행순서를 의미합니다. 웹 성능은 서버의 요청과 응답, 로딩, 스크립팅, 렌더링, 레이아웃, 픽셀로 변환하는 과정을 모두 포함해서 결정됩니다. > 브라우저는 HTML,CSS,JS,Image,Font등 필요한 리소스에 대한 요청을 발생 & 서버로부터 응답 브라우저의 렌더링엔진이 HTML 및 CSS 파싱 후 DOM트리, CSSOM을 생성 DOM, CSSOM를 결합해 렌더트리 생성 JS 파싱과 실행 레이아웃 생성 페이지 렌더링 브라우저의 요청과 서버로부터의 응답 먼저 웹사이트에 접속하게 되면 브라우저는 서버에 페이지를 요청하고 이후 html에 대한 응답을 받게 됩니다. html파일을 요청하면 서버는 html을 포함한 CSS, J
[F-Lab 모각코 챌린지 8일차] 브라우저의 렌더링 과정
멘토링을 대비하여 브라우저 렌더링에 대해 예+복습해보려한다. 이전에 꼬리질문을 통해 브라우저 렌더링에 관해 구글링 하여 공부한 적이 있다. 그때 익힌 것을 지금 보니 마크다운으로 초반에 업로드한 것이라 그런지 내용이 부실한 것 같다. 그리고 『모던 자바스크립트 Deep dive』에 관련 내용이 있어 살펴보려 한다. 🔽 이전에 기록한 관련 내용 브라우저 기본 구조 [HTML파싱과 CSS파싱](https://github.com/havenothorn/TIL/blob/main/Browser/HTML%ED%8C%8C%EC%8B%B1%EA%B3%BC-CSS%ED%8C%8C%EC
[TIL] 성능최적화
📒 오늘 공부한 내용 🔍수업목차 >[31-1] 성능최적화 [31-2] 메모이제이션(Memoization) [31-3] map과 memo의 관계 [31-4] CRP(Critical Rendering Path) [31-5] Promise & Promise.all() ✅ 성능최적화 memoization 폴더 _ container 파일 > let은 버튼을 누르면 콘솔의 값은 올라가지만 리렌더는 일어나지 않아 “컨테이너가 렌더링 됩니다.”라는 콘솔이 찍히지 않고 있으며, 화면은 여전히 0 이다. state는 버튼을 누름과 동시에 리렌더링되며 우리가 올려두었던 countLet이 0으로 초기화 된다. useState를 제외한 모든 값이 다시 그려지고 있다는 것을 알 수 있다. memoization 폴더 _ presenter 파일 >
2023. 4. 25~27
Index 성능최적화 - react developer tools memoization(useCallback,useMemo) map,memo(key-uuid?) CRP(Critical Rendering Path) Reflow, Repaint prefetch, preload 이미지 (input.target.files, readAsDataURL, onload) Promise, Promise.all, Promise.all() - map LazyLoad vs PreLoad ( Prefetch) Google PageSpeed Insights 이미지 Webp 확장자 이미지 라이브러리(React-lazy-load, React-dropzone, react-avatar-editor, antd, React-beautiful-dnd) Optimistic-UI Intro 자꾸 새로 만
[TIL 0425] CRP(Critical Rendering Path)
✔️ 브라우저에서 렌더링을 해주는 과정 > > 화면을 그려주는데 필요한 리소스(html,css,js)를 다운로드 해온다. HTML과 CSS에서 화면에 렌더해야 할 요소들을 구분 후 렌더되어야 할 HTML,CSS 요소를 합쳐 화면에 그려준다. 화면에 그려줄때 해당 요소들이 어느 위치에 놓일지 먼저 그려주는 Layout Reflow와 해당 요소들을 색칠하는 Paint Repaint과정이 발생한다. > > ❗️렌더트리 >>최종적으로 브라우저에 표기될 요소들로 DOM과 CSSOM이 합쳐진것! DOM(Document Object Model) : HTML의 요소를 구분할 수 있도록 도와주는 것 CSSOM(CSS Object Model) : CSS요소를 구분할
[Web] Critical Rendering Path
Critical Rendering Path 브라우저가 서버로부터 HTML 응답을 받아서 화면을 그리기 위해 실행하는 과정이다. 이번 글에서는 브라우저가 웹페이지를 어떻게 렌더링 하는지에 대해서 알아본다. 이 과정을 이해하고 각 단계에서 어떤 일이 일어나는지 파악할 수 있어야 브라우저 렌더링 최적화를 통해 어플리케이션의 응답 속도를 개선할 수 있다. CRP의 단계 > ### 요약 DOM 트리 만들기 CSSOM 트리 만들기 JavaScript 실행 Render Tree 만들기 Layout 생성 Paint 1. DOM 트리 만들기 
CRP - 내 코드가 브라우저에 그려지는 순서
프론트엔드 개발자라면 필수로 알아야 하는 개념, Critical Rendering Path를 정리해보겠습니다. > ## Critical Rendering Path란? Critical Rendering path란 브라우저가 HTML, CSS, 그리고 Javascript 코드를 픽셀로 변환하여 브라우저에 그리는 과정을 일컫는 개념입니다. CRP를 이해하고 최적화한다면 브라우저 내 렌더링에 걸리는 시간을 단축할 수 있기 때문에, 이 개념을 잘 아는 것은 프론트엔드 개발자로써 매우 중요합니다! (면접에서도 단골 질문으로 나온다고 합니다.) 
브라우저의 렌더링 과정 (HTTP 캐시와 렌더링 성능 최적화에 관하여)
⭐포스팅 목표 지난 시간에 주소창에 www.naver.com을 입력하고 사용자에게 네이버 페이지가 보이기까지의 과정에 대해 포스팅을 작성하였다. 해당 포스팅의 내용을 바탕으로 F-lab 멘토링을 진행하였고, 전체적인 내용에는 부족함이 없으며 면
JavaScript 공부하기_CSSOM, RenderTree, 성능보장렌더링순서(CRP)
CSSOM(CSS Object Model) 🐶 브라우저는 CSS를 어떻게 읽을까? 브라우저에서 DOM을 만들게 되면, 우리가 정의한 CSS를 병합해서 CSSOM을 만든다. 즉, 브라우저가 html파일을 읽고 DOM을 만들었다면, 모든 style과 관련된 정보들을 DOM과 합해서 CSSOM 트리를 다시 만들게 된다. 그리고 우리가 정의한 style 뿐만 아니라 브라우저에서 기본적으로 설정된 모든 속성값들을 cascading rule에 따라서 정의한다. 따라서, cascading rule에 따라 부모 요소에 설정한 값이 자식요소에도 적용된다. CSSOM에는 모든 계산된 style에 관련된 속성들이 다 포함되어 있다. Render Tree 🐶 Render Tree는 무엇일까? 브라우저가 Html파일을 읽게 되면 DOM트리를 만들고, 그 다음 CSS파일을 읽고 style을 계산해서 CSSOM 트리를 만든다. 이제 그다음, DOM과 CSSOM을 합해서 최종적으로 브라우저에
[JS]3장 JS 개발환경과 실행 방법
모던 JS 딥 다이브를 공부하며 정리해보는 글입니다. 3_ 자바스크립트 개발환경과 실행방법 3.1_ 자바스크립트 실행 환경 모든 브라우저와 Node.js는 자바스크립트 엔진을 내장함. 주의 : 브라우저와 Node.js의 용도가 다름 브라우저 : HTML, CSS, JS를 실행해 웹페이지를 브라우저 화면에 렌더링 Node.js : 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적. >둘 다 ECMAScript 실행 가능 but 각자 추가 기능은 호환 X 예) 브라우저는 파싱된 HTML 요소 선택, 조적하는 기능인* DOM API를 기본 제공* but 브라우저 외부에서 JS 개발 환경을 제공하는 Node.js는 DOM API 제공하지 않는다(외부에선 HTML 요소를 파싱해서 객체화한 DOM을 조작할 필요가 없기 때문)예2) 브라우저는 파일 읽기만 가능 but Node.js는 파
CRP
갑자기 생각날때 계속 적는 게시글 CRP (Critical Rendering Path) html응답을 화면에 그리는 실행과정 DOM 트리 만들기 CSSOM 트리 만들기 javascript 실행 렌더트리 만들기 레이아웃 생성하기 페인팅 DOM트리 DOM : 파싱된 HTML DOM트리 : 파싱된 HTML 모음 DOM트리는 하나하나씩 생성됨 빨라서 한번에 로딩되는 것처럼 보임 CSS, JS 로드시 페이지렌더링 차단가능 변환과정 Conversion byte로 읽음 Tokenizing HTML표준에 맞게 변환 Lexing 속성과 규칙을 정의하는 객체로 변환 DOM Construction DOM 트리로 연결된다. 
💡브라우저의 렌더링 프로세스를 알아야하는 이유 > _ 웹 애플리케이션 응답 속도 때문 !_ 속도 개선을 위해서는 브라우저 렌더링 최적화가 반드시 고려되어야 한다. 중요 렌더링 경로(Critical Rendering Path)는 브라우저가 HTML, CSS , Javascript를 화면에 픽셀로 변환한는 일련의 단계를 말하며 이를 최적화하는 것은_ 렌더링 성능을 향상_ 시킨다. 중요 렌더링 경로는 Document Object Model , CSS Object Model(CSSOM), 렌더트리 그리고 레이아웃을 포함한다. *웹 성능은 서버의 요청과 응답, 로딩, 스크립팅,렌더링,레이아웃 그리고 화면에 픽셀 그리기를 포함한다. 자세한 설명은 우리의 백과사전 MDN 을 참고합시다 !!!
CRP 최적화 방안
작성중인 게시물입니다 > Last Update : 7월 21(목) 17시 면접을 보고 정리를 해야겠다 해야겠다 생각하다가 이제야 정리하게 되는 굼벵이이다. CRP란? CRP란 Critical rendering path의 약자다. 중요 랜더링 경로라는 의미인데 프론트엔드 면접 질문에 많이 나와있는 브라우저 랜더링 과정의 답안이기도 하다. 1. HTML 을 파싱하여 DOM 트리를 만든다. DOM 트리는 자바스크립트의 객체 형태로, 요소 노드(div, ul 태그와 같은 것) / 어트리뷰트노드( class, a태그의 href 등) / 텍스트 노드로 이루어져있다. 2. CSS를 파싱하여 CSSOM트리를 만든다. Css는 head에 선언해주는 것이 좋다. ⏤ JS에서 로드하고 분석 할 때 CSS 가 필요한 경우가 있다. ⏤ CSS 파싱이
브라우저 렌더링 원리
브라우저의 렌더링 원리 면접에서 가장 많이 물어보는 질문이지만 생각보다 많은 지원자들이 자세한 동작 원리를 알지 못한다고 한다. 본인도 동작 과정이 명확하게 떠오르지 않았다.. React로 개발을 하다보면 이미지와 같은 리소스가 많을 때 화면이 느리게 로드되어 개선의 필요성을 느꼈던 순간들이 꽤 있었다. 이런 점들을 개선하기 위해 필요한 개념인 브라우저 렌더링 원리에 대해서 공부해보고자 한다. 지금부터 "www.google.com" 이라고 쳤을 때 화면에 보여지기까지의 과정에 대해서 알아보겠다. 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진 을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path) 라는 프로세스를 사용하며 다음 단계들로 이루어진다. CRP란
[DOM]성능보장렌더링순서(CRP)
우리의 웹페이지와 웹앱을 브라우저가 사용자에게 보여주기까지 어떤 과정을 거치는가? 각 과정에서 어떻게 작업하면 성능을 향상시킬 수 있을까? 1.성능보장 렌더링 순서 우리의 웹페이지와 웹어플리케이션을 브라우저가 사용자에게 보여주기까지 어떤과정을 거치는가? → 그 과정에서 어떤 부분을 활용해야 성능을 좋게 만들 수 있을까? ✨Critical Rendering Path : Construction(DOM ⇒ CSSOM ⇒ RenderTree) + Operation(Layout ⇒ paint ⇒ Composition) HTML ⇒ request/response → loading → scripting → rendering → layout → painting ⇒ User : 브라우저가 서버에게 html 파일을 요청하고, 서버로부터 받은 html파일을 로딩한다. 데이터를 받아와서 이 html을 한 줄 한줄씩 읽어서
Next js - [Vercel 로 배포하기] 📦
💻 프로젝트 Tooravel > 리뉴얼 한 Tooravel 대학 선배가 운영하는 고프로 대여 사업인 Tooravel 이란 회사가 있었다. 작은 사업으로 간단하게 고프로 부품들을 대여해주는 사업이였는데 컴공과 선배라 그런지 사이트를 4년전 자기가 만들어 운영하고 있었다. React도 아닌 제이쿼리 로 프론트를 짜고 django로 백앤드를 짠 사이트였다. 사업을 접는 관계로 각 부품을 파는 사이트로 리뉴얼할 계획이였는데 당시 리액트를 처음 접해본 내가 도전해보겠다는 어마 무시한 도전이였다. 자바스크립트 기초도 없이 도전한 맨땅에 헤딩하는 도전이였다. 🥲🔨 물론 기존 사이트는폐쇄 하고 이 도전은 나만의 개인 포폴로 올라가게되는 것으로 남게 되었다. 약 3달이 흘러 프론트앤드는 `React