# CSSOM

28개의 포스트

[CS 스터디]브라우저 렌더링 정리

검색창에 www.google.com을 검색하면 dns를 통해 해당 서버의 ip 주소를 가져오고 ip에 해당하는 서버와 tcp 연결이 이루어지면 이 위에서 http 통신이 이루어져 html 문서를 가져오게 됩니다. 이 때 가져온 html 문서의 렌더링 과정 대해 정리해

2023년 5월 7일
·
0개의 댓글
·

CSSOM Tree

CSS 내용을 Parsing 한 것을 구조화 한 것이 CSSOM Tree라고 한다.HTML을 Parsing하면서 <head>태그를 만나게 된다. 이때, <head>태그에는 CSS파일을 요청하는 태그인 <link>태그가 있다. <link>태그를 만나

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

코드스피츠 스터디 - CSS Rendering 3화 중 CSSOM (feat. CSS IN JS)

히카맹 선생님의 코드스피츠 강의를 들으며 자바스크립트에 대한 이해를 높이기 위해 스터디를 하게 되었다. 이 포스팅은 그에 대한 정리글이다.CSSOM 이라는 걸 코드스피츠를 통해서 처음 듣게 되었는데, 직접적으로 마주한 적이 한번도 없어 아마 숱한 CSS IN JS 라이

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

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

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

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

웹 렌더링

DOM Document Object Model 웹 페이지를 객체화함. 웹 페이지를 객체화 함으로써 다른 스크립트 언어들을 활용해서 DOM을 조작함. WEB API라고 함은 위의 공식처럼 DOM객체에서 특정 노드를 선택하고 JS와 같은 script l

2023년 1월 1일
·
2개의 댓글
·

브라우저 작동방식

DOM, CSSOM 트리 구축 -> 렌더 트리 구축 -> 렌더 트리 배치 -> 렌더 트리 그리기 >파싱 텍스트를 읽어서 자바스크립트가 이해할 수 있는 문법으로 쪼개서 이해, 분석하는 과정 >랜더링 브라우저에 시각적으로 출력하는 것 브라우저 작동방식 서버는 브라우저로 요청받은 HTML 파일을 읽어드린후 -> 메모리에 저장하고 -> 그 메모리에 저장...

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

DOM tree & CSS OM

DOM 원래 의미에서 "The DOM"은 문서(특히, HTML과 XML 문서)에서 접근하고 조작하기 위한 API라고 한다. DOM(Document Object Model)은 문서 객체 모델로, 웹 페이지 내의 모든 콘텐츠를 객체로 나타낸다. DOM에 의하면 모든 HTM

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

렌더링 관점에서 바라본 웹 브라우저

😇 생각보다 고생하는 브라우저

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

DOM과 CSSOM, 브라우저 렌더링 과정

브라우저에서 데이터를 받아 렌더링이 일어나는 과정을 정리하기로 하였다.

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

브라우저의 동작 과정

너...열심히 일하고 있었구나..😥

2022년 3월 21일
·
0개의 댓글
·
post-thumbnail

브라우저의 렌더링 과정

이번시간에는 브라우저가 서버와 어떻게 통신을 주고받으며 화면을 표시해주는지 알아보겠습니다.브라우저의 핵심 기능은 필요한 리소스(HTML, CSS, javascript 등)을 서버에 요청하고, 서버로부터 응답 받아 브라우저에 시각적으로 렌더링 하는 것입니다. 서버에서 필

2022년 3월 11일
·
2개의 댓글
·
post-thumbnail

[JS] 브라우저의 렌더링 과정

Replow, Repaint, async, defer, CSSOM, DOM과 같은 브라우저의 렌더링 과정에 대해 다룬다.

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

[개발일기] 렌더링 과정 이해하기

: 렌더링 엔진이 html, css 문서를 렌더링 한다.( js엔진과 다르다. ) 브라우저에서 웹 페이지를 로드하면 가장 먼저 HTML 파일을 다운로드. 파싱은 다운로드한 HTML을 해석하여 DOM 트리를 구성하는 단계. HTML 또는 리소스에 CSS가 포함된 경우,

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

브라우저의 렌더링 과정 😬 ⭐️

✅ 출처 : 다시 처음부터 자바스크립트 게시글은 이웅모(님) '모던 자바스크립트 Deep Dive' 를 기록합니다진짜...브라우저 렌더링 과정 게시글들은 많이 찾아봤지만 뭔가 시원하게 긁지 않은 너낌...이 많았습니다.이번 기회에 제가 이해하기 쉽고 상세하게 포스팅하여

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

[JSInfo] 문서 객체 모델 소개 (DOM)

문서 객체 모델(Document Object Model)은 웹 페이지 내의 모든 콘텐츠를 객체로 나타내줍니다. 이 객체는 수정 가능합니다.document 객체는 페이지의 기본 '진입점' 역할을 합니다. document 객체를 이용해 페이지 내 무엇이든 변경할 수 있고,

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

🎠브라우저 렌더링 과정

브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 파싱(해석)해서 브라우저에 렌더링할까?프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 실행하기 위해서,텍스트 문서의 문자열을 토큰으로 분해하고,토큰에 문법적 의미와 구조를 반영하여 트리구조의 자

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

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

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

2021년 10월 24일
·
0개의 댓글
·