# CSSOM
[CS 스터디]브라우저 렌더링 정리
검색창에 www.google.com을 검색하면 dns를 통해 해당 서버의 ip 주소를 가져오고 ip에 해당하는 서버와 tcp 연결이 이루어지면 이 위에서 http 통신이 이루어져 html 문서를 가져오게 됩니다. 이 때 가져온 html 문서의 렌더링 과정 대해 정리해
CSSOM Tree
CSS 내용을 Parsing 한 것을 구조화 한 것이 CSSOM Tree라고 한다.HTML을 Parsing하면서 <head>태그를 만나게 된다. 이때, <head>태그에는 CSS파일을 요청하는 태그인 <link>태그가 있다. <link>태그를 만나
코드스피츠 스터디 - CSS Rendering 3화 중 CSSOM (feat. CSS IN JS)
히카맹 선생님의 코드스피츠 강의를 들으며 자바스크립트에 대한 이해를 높이기 위해 스터디를 하게 되었다. 이 포스팅은 그에 대한 정리글이다.CSSOM 이라는 걸 코드스피츠를 통해서 처음 듣게 되었는데, 직접적으로 마주한 적이 한번도 없어 아마 숱한 CSS IN JS 라이
🪄 프론트엔드 면접 질문 스터디 - 2편. HTML, CSS, JAVASCRIPT의 브라우저 랜더링 원리
HTML, CSS, JAVASCRIPT의 브라우저에서 랜더링 원리, Reflow, Repaint
웹 렌더링
DOM Document Object Model 웹 페이지를 객체화함. 웹 페이지를 객체화 함으로써 다른 스크립트 언어들을 활용해서 DOM을 조작함. WEB API라고 함은 위의 공식처럼 DOM객체에서 특정 노드를 선택하고 JS와 같은 script l
브라우저 작동방식
DOM, CSSOM 트리 구축 -> 렌더 트리 구축 -> 렌더 트리 배치 -> 렌더 트리 그리기 >파싱 텍스트를 읽어서 자바스크립트가 이해할 수 있는 문법으로 쪼개서 이해, 분석하는 과정 >랜더링 브라우저에 시각적으로 출력하는 것 브라우저 작동방식 서버는 브라우저로 요청받은 HTML 파일을 읽어드린후 -> 메모리에 저장하고 -> 그 메모리에 저장...
DOM tree & CSS OM
DOM 원래 의미에서 "The DOM"은 문서(특히, HTML과 XML 문서)에서 접근하고 조작하기 위한 API라고 한다. DOM(Document Object Model)은 문서 객체 모델로, 웹 페이지 내의 모든 콘텐츠를 객체로 나타낸다. DOM에 의하면 모든 HTM
브라우저의 렌더링 과정
이번시간에는 브라우저가 서버와 어떻게 통신을 주고받으며 화면을 표시해주는지 알아보겠습니다.브라우저의 핵심 기능은 필요한 리소스(HTML, CSS, javascript 등)을 서버에 요청하고, 서버로부터 응답 받아 브라우저에 시각적으로 렌더링 하는 것입니다. 서버에서 필
[JS] 브라우저의 렌더링 과정
Replow, Repaint, async, defer, CSSOM, DOM과 같은 브라우저의 렌더링 과정에 대해 다룬다.
[개발일기] 렌더링 과정 이해하기
: 렌더링 엔진이 html, css 문서를 렌더링 한다.( js엔진과 다르다. ) 브라우저에서 웹 페이지를 로드하면 가장 먼저 HTML 파일을 다운로드. 파싱은 다운로드한 HTML을 해석하여 DOM 트리를 구성하는 단계. HTML 또는 리소스에 CSS가 포함된 경우,
브라우저의 렌더링 과정 😬 ⭐️
✅ 출처 : 다시 처음부터 자바스크립트 게시글은 이웅모(님) '모던 자바스크립트 Deep Dive' 를 기록합니다진짜...브라우저 렌더링 과정 게시글들은 많이 찾아봤지만 뭔가 시원하게 긁지 않은 너낌...이 많았습니다.이번 기회에 제가 이해하기 쉽고 상세하게 포스팅하여
[JSInfo] 문서 객체 모델 소개 (DOM)
문서 객체 모델(Document Object Model)은 웹 페이지 내의 모든 콘텐츠를 객체로 나타내줍니다. 이 객체는 수정 가능합니다.document 객체는 페이지의 기본 '진입점' 역할을 합니다. document 객체를 이용해 페이지 내 무엇이든 변경할 수 있고,
.gif)
🎠브라우저 렌더링 과정
브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 파싱(해석)해서 브라우저에 렌더링할까?프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 실행하기 위해서,텍스트 문서의 문자열을 토큰으로 분해하고,토큰에 문법적 의미와 구조를 반영하여 트리구조의 자
자바스크립트 셀프 QnA(2): 브라우저 렌더링
NodeJS의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 개발언어가 되었다. 그러나 여전히 자바스크립트가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드! 이때