후니후니

  • 홈
  • 태그
  • 방명록

최적화 1

브라우저 렌더링 과정

✏️브라우저가 렌더링되는 과정을 알아보자. 브라우저는 어떻게 동작할까? 주소창에 주소를 치면 주소에 따른 웹사이트가 표시된다. 관심갖고 보지 않았던 부분이라 그 동안은 그냥 어떻게 잘 되나보다~ 라고 생각했는데, 요즘 그 과정이 궁금해져서 한번 정보를 검색해보았다. 우선 사용자가 주소를 입력하면, 해당 URI를 가진 서버에 자원을 요청하고, 받아온 자원 (HTML,CSS등) 을 해석하여 윈도우에 렌더링해주게된다. HTML 문서를 받아서 Document Object Model, DOM Tree를 만들고, CSS는 CSS Object Model로 만들어진다. 그렇게 만들어진 두 개의 Object Model은 결합되어 Render Tree를 생성한다. Render Tree의 노드들이 화면에 어디에 위치할지 계..

JavaScript 2020.11.03
이전
1
다음
프로필사진

후니후니

  • 분류 전체보기 (62)
    • Vue-cli 배포 (2)
    • ES6 (1)
    • 디자인 패턴 (3)
    • JavaScript (12)
    • TIL (0)
    • CSS (3)
    • 포트폴리오 제작기 (3)
    • Cypress (3)
    • React.js (10)
    • Nuxt.js (5)
    • TypeScript (3)
    • Vuetify (1)
    • Vue.js (3)
    • Github Action (1)
    • Three.js (2)
    • Pinia (4)
    • etc (2)
    • React Native (2)
    • DB (2)

Tag

Redux, Core Components, 타입스크립트, vue3, 자바스크립트, Front, react, composition, Store, vue, 포트폴리오, react query, Cypress, e2e, pinia, frontend, NUXT, vuetify, JS, react-query,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

  2025. 06  
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.