# repaint()

25개의 포스트
post-thumbnail

[CS] 프론트 엔드 성능 최적화

✅ 성능 최적화 전에 알면 좋은 것 ❓ 브라우저 주소창 결국은 api get을 이용한다. 비교 >- 브라우져 ⇒ 가지고온 데이터(HTML)를 그림으로 바꿔주는 것이다. >- 포스트맨 ⇒ 요청 했을 때 데이터만 받아오는 것이다. >- axios ⇒ 프로그램 상에

2023년 8월 31일
·
0개의 댓글
·
post-thumbnail

[WEB] 브라우저 렌더링 과정 - CRP(feat.reflow, repaint)

🌈 학습을 위해 Must-Know-About-Frontend에서 가져온 내용을 수정, 추가하여 작성한 글입니다. 기존 내용과 대부분 유사하며 Summary 부분은 추가하였습니다. Summary | | 설명 | | :--------: | :-------- | | 카

2023년 8월 27일
·
0개의 댓글
·
post-thumbnail

[Next.js] input range 구현 중 마주친 성능 이슈 개선하기 (with styled-components)

필터 설정에 따른 상품리스트를 보여줄 수 있도록 필터 기능을 구현하고 있었고 필터 항목중 상품의 가격 범위를 range로 조절할수 있도록 작업을 하던 중 성능적인 문제가 발생하여서 해결방법을 기록해두고자 한다. 현재 구현된 가격 범위 세부기능을 간추리자면 다음과 같다.

2023년 8월 23일
·
0개의 댓글
·
post-thumbnail

[웹 브라우저] 렌더링 과정 + 구성요소

웹 브라우저 렌더링 과정 1. 파싱(Parse) 웹 브라우저는 HTML, CSS 및 JavaScript와 같은 웹 페이지의 리소스를 서버로부터 가져옵니다. 그리고 가져온 리소스들은 파싱되어 문서 객체 모델(DOM) 및 CSS 객체 모델(CSSOM)로 변환됩니다. 이 단

2023년 7월 15일
·
0개의 댓글
·
post-thumbnail

리플로우, 리페인트

(또는 Layout)리플로우는 리페인트 렌더링 엔진이 노드(요소)를 재배치하는 과정을 말합니다.

2023년 7월 4일
·
0개의 댓글
·
post-thumbnail

2023. 4. 25~27

Index 성능최적화 - react developer tools memoization(useCallback,useMemo) map,memo(key-uuid?) CRP(Critical Rendering Path) Reflow, Repaint prefetch, preloa

2023년 4월 26일
·
0개의 댓글
·
post-thumbnail

[TIL 0425] CRP(Critical Rendering Path)

✔️ 브라우저에서 렌더링을 해주는 과정 > > 화면을 그려주는데 필요한 리소스(html,css,js)를 다운로드 해온다. HTML과 CSS에서 화면에 렌더해야 할 요소들을 구분 후 렌더되어야 할 HTML,CSS 요소를 합쳐 화면에 그려준다. 화면에 그려줄때 해당 요소들

2023년 4월 25일
·
0개의 댓글
·
post-thumbnail

Reflow / Repaint

Reflow / Repaint 대해 알아보자!

2023년 3월 18일
·
0개의 댓글
·
post-thumbnail

CSS animation / JS animation

CSS animation 과 JS animation

2023년 2월 13일
·
0개의 댓글
·
post-thumbnail

브라우저 렌더링

브라우저 렌더링에서 렌더링(rendering)이란 HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 의미합니다. 현존하는 브라우저마다 다르지만, 브라우저는 기본적으로 렌더링을 수행하는 렌더링 엔진을 가지고 있습니다.사용자가

2023년 1월 15일
·
0개의 댓글
·
post-thumbnail

🪄 프론트엔드 면접 질문 스터디 - 2편. HTML, CSS, JAVASCRIPT의 브라우저 랜더링 원리

HTML, CSS, JAVASCRIPT의 브라우저에서 랜더링 원리, Reflow, Repaint

2023년 1월 3일
·
0개의 댓글
·

reflow, repaint

layout,paint를 모두 재실행positionwidthheighttoprightbottommarginpaddingborderborder-widthdisplayfloatfont-sizeline-heightoverflowpaint를 재실행backgroundbackgr

2022년 10월 1일
·
0개의 댓글
·
post-thumbnail

Avoid Reflow & Repaint

해당 글은 작성자의 동의를 구하고 번역한 글입니다. 원문은 아래 링크를 참고해주세요.https://www.hi-interactive.com/blog/avoid-reflow-repaint..We're probably doing some really stupid

2022년 9월 15일
·
0개의 댓글
·

JavaScript 파싱과 실행 & 리플로우, 리페인트

JavaScript 파싱과 실행 자바스크립트 코드에서 HTML 요소와 스타일 등을 변경할 수 있는 DOM API를 사용하면 생성된 DOM을 동적으로 조작할 수 있다. 자바스크립트 코드를 파싱하기 위해서는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. 자바스크립트 엔

2022년 9월 2일
·
0개의 댓글
·

브라우저의 Reflow, Repaint

Reflow와 Repaint의 개념을 알기 전에, 렌더 트리(Render Tree)에 대한 이해가 필요합니다.브라우저는 HTML, StyleSheets를 해석합니다.HTML 문서의 해석이 끝나면 ‘DOM 트리’를 만들고, StyleSheets 문서의 해석이 끝나면 ‘스

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

💻 브라우저 렌더링(feat. 말하면서 배워요)

말하면서 배워요 스터디에서 공부하는 내용으로 질문과 대답 위주의 글입니다. 또한 내용에 오류나 오타가 있을 시 댓글로 알려주시면 감사하겠습니다.

2022년 5월 1일
·
0개의 댓글
·
post-thumbnail

32일차) 코드캠프에서는 실무 작성 코드 위주가 1순위랍니다 / memoization/메모이제이션/usememo/useCallback/reflow/repaint

실무 작성 코드 위주로 배우자, 자꾸 새로 만들지 말고 , 메모해 놓는거 어때 ? \-컴포넌트를 만들어놓고 봐보자 State는 변경되면서 컴포넌트가 바뀌면서 페이지가 리렌더링이 된다문제는 countLet이 State누를때마다 같이 초기화 됨(화면에도 안나타나고)\-특정

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

Reflow & Repaint

브라우저 렌더링 과정을 살펴 본다

2022년 4월 6일
·
0개의 댓글
·

Web Browser의 Reflow와 Repaint

DOM과 CSSOM의 결합으로 생성되며 meta, head와 같은 비시각적 DOM 요소들과 display 속성의 'none' 값이 할당된 요소들의 노드들을 제외한 페이지에 표시되는 모든 DOM 콘텐츠와 각각의 CSSOM 스타일 정보를 담고 있습니다.Reflow란 DOM

2022년 3월 9일
·
0개의 댓글
·