# 브라우저 렌더링

17개의 포스트
post-thumbnail

JavaScript | Reflow 란 (feat. 브라우저 렌더링)

프론트 엔드 개발자라면 브라우저 렌더링 과정을 알아야한다. 그리고 브라우저 렌더링 과정에서 핵심은 reflow이다. DOM 요소를 다룰 때, reflow가 최대한 발생하지 않도록 조심해야 한다. 따라서 이 글을 작성하며 브라우저 렌더링과정과 리플로우에 대해서 알아보고자

약 3시간 전
·
0개의 댓글
post-thumbnail

자바스크립트 셀프 QnA(2): 브라우저 렌더링 101

NodeJS의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 개발언어가 되었다. 그러나 여전히 자바스크립트가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드! 이때

2일 전
·
0개의 댓글
post-thumbnail

02 브라우저 렌더링 101

🛑 해당 포스팅은 패스트캠퍼스 온라인 강의 The RED : 조은의 프론트엔드 실무 가이드 강의 필기 입니다.이 내용들에 대해 이해하고 있어야 SSR과 SPA에 대해 학습하는 것이 비로소 유의미해진다!

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

브라우저 렌더링 과정과 최적화

브라우저는 어떻게 렌더링 되고, 어떤 항목을 개선해야 최적화되었다고 말할 수 있을까?

2021년 10월 11일
·
8개의 댓글

모던 자바스크립트 Deep Dive - 38장

요약 1. 브라우저의 렌더링 과정 브라우저의 렌더링이란 브라우저가 어떻게 HTML, CSS, JavaScript를 해석해서 화면에 출력하는 것을 의미한다. 용어 정리 파싱: 구문분석, 문자열을 토큰단위로 분해하는 것을 의미한다. 토큰: 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소 렌더링: HTML, CSS, JavaScript을 파싱해서 브라...

2021년 10월 8일
·
0개의 댓글
post-thumbnail

[필수지식] 브라우저 렌더링 과정

렌더링: HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말함

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

[CS📖] 브라우저 렌더링

브라우저 렌더링 과정은 웹 개발자라면 필수로 알아둬야하는 개념이다. 이를 확실히 이해해야 렌더링 최적화를 수행하여 개발이 가능하다.HTML, CSS, JavaScript 등 개발자가 작성한 문서들을 브라우저가 화면에 그려주는 동작을 말한다. 각 브라우저는 렌더링을 하기

2021년 8월 22일
·
0개의 댓글
post-thumbnail

웹과 브라우저 렌더링 작동 원리

브라우저는 캐시에서 DNS(Domain name system)레코드를 확인하여 maps.google.com의 해당 ip주소를 찾습니다.DNS는 사람이 읽을 수 있는 도메인 이름을 머신이 읽을 수 있는 IP 주소로 변환 하는 것 (전화번호부를 생각해 보면 이해가 쉽다)캐

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

애니메이션에서 불필요한 속성 하나가 브라우저 렌더링 성능에 끼치는 영향

돈이 떨어지는 애니메이션최근 프로젝트에서 위처럼 돈이 나풀거리며 떨어지는 애니메이션을 구현했습니다. '가계부'라는 프로젝트 주제에 맞게 돈을 많이 벌었으면 하는 마음에 돈이 날라다니는 애니메이션을 추가했는 데 프로젝트를 배포하고나서 결과물을 확인하신 멘토님께 이런 피드

2021년 8월 7일
·
6개의 댓글
post-thumbnail

브라우저의 렌더링 과정

브라우저 렌더링 과정에 대해서 알아보자.

2021년 8월 5일
·
0개의 댓글
post-thumbnail

브라우저의 동작과정부터 React까지

😆 브라우저 동작과정과 React까지 설명입니다.

2021년 6월 21일
·
0개의 댓글
post-thumbnail

TIL 80 | 브라우저 렌더링 과정과 최적화

왜 알아야하는지 알고 공부하기

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

기술 면접에서 받은 질문 (2) - React 및 기타

요 근래 몇몇 크고 작은 회사에서 기술 면접을 봤다. 받았던 기술 관련 질문들을 정리해 보았다. 이 글에는 React를 비롯한 여러 라이브러리와 기타 프론트엔드 관련된 내용들을 정리했다. Vanilla JavaScript 관련 글은 이전 글에서 정리했다.

2021년 4월 30일
·
0개의 댓글

브라우저 렌더링

브라우저가 페이지를 렌더링하려면 먼저 DOM 및 CSSOM 트리를 생성해야 합니다. 따라서 HTML 및 CSS를 가능한 한 빨리 브라우저에 제공해야 합니다.참고: https://developers.google.com/web/fundamentals/perform

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

Browser Rendering Process

User Interface: 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분Browser Engine: User Interface와 Rendering Engine 사이의 동작을 제어Rendering Engine:

2020년 12월 18일
·
0개의 댓글
post-thumbnail

브라우저의 렌더링 과정

HTML ,CSS 다운 > HTML -> DOM > CSS -> CSSOM > DOM + CSSOM = Render Tree > Layout > Paint

2020년 9월 18일
·
0개의 댓글

DOM / Virtual DOM / 브라우저 렌더링 - FE study2

1.DOM 이란? DOM (Document Object Model) : DOM은 HTML,XML 문서의 객체 기반 표현 방식입니다. image.png 그러므로, document를 포함한 html, 그 아래의 트리구조의 태그들 모두 객체이며 모두 객체로서 접근 및 컨트롤 할 수 있다. HTML (HyperText Markup Language) : 웹페...

2020년 1월 9일
·
0개의 댓글