2026/04 4

5.2 랜더트리

DOM과 CSSOM을 합쳐서 실제로 화면에 그려질 요소만 추려낸 트리다.display: none은 렌더 트리에서 완전히 제외된다.DOM에는 존재하지만, 렌더 트리에는 아예 노드 자체가 없다. 그래서 공간도 차지하지 않고 레이아웃 계산 대상도 아니다. 프론트엔드에서 실제로 연결되는 포인트:Vue의 v-if는 display: none처럼 DOM 자체를 제거한다. 렌더 트리에도 없다.v-show는 display: none 스타일만 토글한다. DOM과 렌더 트리 모두 유지하다가 스타일만 바꾸는 거다.그래서 자주 토글되는 요소는 v-show, 거의 안 바뀌는 조건부 요소는 v-if가 성능상 낫다. 렌더 트리 재구성 비용 때문이다.

5.1 DOM

DOM은 단순히 태그를 나열한 게 아니라 태그(+ 텍스트, 주석 등)를 객체로 만들어서 트리로 연결한 것이에요.핵심은 "객체" 라는 점이에요. 단순한 문자열 Hello이 아니라, JS에서 조작할 수 있는 프로퍼티와 메서드를 가진 객체예요.Hello이게 파싱되면 이런 객체가 돼요:{ tagName: "H1", className: "title", textContent: "Hello", style: {...}, parentNode: , children: [텍스트 노드], addEventListener: function() {...}, getAttribute: function() {...}, // ... 수십 가지 메서드} 그래서 JS에서 이런 게 가능한 거예요:const el = documen..

5. 서버 응답 + 브라우저 렌더링

서버가 응답을 보내면 브라우저가 그걸 받아서 화면에 그리는 과정이에요.이 단계가 사실 가장 프론트엔드와 직접적으로 연결돼요.먼저 응답 구조부터 보고, 렌더링 파이프라인으로 넘어갈게요. 응답 구조:상태줄의 숫자가 결과를 요약해줍니다.200은 성공, 301/302는 다른 URL로 이동, 404는 없는 페이지, 500은 서버 에러Cache-Control 헤더는 브라우저가 이 응답을 얼마나 캐싱할지 결정해요. 프론트엔드 성능 최적화에서 자주 건드리는 헤더예요. 렌더링 파이프라인:HTML 파싱 → DOM — 브라우저가 HTML을 위에서 아래로 읽으면서 태그를 트리 구조로 변환해요.브라우저가 서버에서 HTML을 받으면, 이 문자열을 그대로 쓸 수 없어요. JS로 조작하고 CSS를 입히려면 트리 구조로 변환해야 ..