Dachae's DevLogs

코드 스플리팅(Code Splitting) 애플리케이션이 커질수록 번들 파일 크기가 커지고, 이로 인해 페이지 초기 로딩 속도가 느려집니다. 사용자는 빈 화면을 오래 기다려야 하고, 모바일 환경에서는 데이터 사용량까지 증가하죠. 이 문제를 해결하는 대표적인 기술이 바로 코드 스플리팅(Code Splitting)입니다.코드 스플리팅은 하나의 큰 자바스크립트 번들을 여러 개의 작은 청크(chunk)로 분할하여, 필요한 순간에만 불러오도록 하는 최적화 기법입니다. 1. 코드 스플리팅이란?코드 스플리팅(Code Splitting)은 웹 애플리케이션의 코드를 기능 단위 또는 페이지 단위로 분리하여, 필요한 시점에만 각 코드 블록을 로드하도록 만드는 기술입니다.왜 필요한가요?초기 로딩 시간 단축렌더링 속도 개선불..

지연 로딩(Lazy Loading) 웹 페이지의 성능과 사용자 경험은 로딩 속도에 크게 좌우됩니다. 사용자가 실제로 보지도 않는 리소스를 미리 모두 불러오는 건 자원 낭비일 뿐만 아니라, 사용자에게 느린 사이트라는 인식을 심어줄 수 있습니다.이 문제를 해결하기 위한 대표적인 기법이 바로 Lazy Loading(지연 로딩)입니다. 1. Lazy Loading이란?Lazy Loading은 웹 페이지를 불러올 때 즉시 필요한 리소스만 로드하고, 나머지는 사용자가 필요로 할 때 로딩하는 방식입니다. 예를 들어 스크롤을 내려야 보이는 이미지나, 특정 버튼을 눌러야 보이는 컴포넌트 등이 그 대상입니다.이 기법을 통해 다음과 같은 효과를 기대할 수 있습니다.초기 로딩 속도 단축불필요한 네트워크 요청 감소사용자 경험..

DOM과 가상 DOM 웹 페이지는 사용자의 상호작용에 따라 콘텐츠가 실시간으로 바뀌는 경우가 많습니다. 이런 변화는 브라우저가 DOM(Document Object Model)을 내부적으로 조작하는 방식으로 일어납니다. 하지만 DOM은 생각보다 무겁고 느릴 수 있기 때문에, 이를 최적화하기 위한 아이디어로 가상 DOM(Virtual DOM) 이 등장했습니다.이 글에서는 실제 DOM과 가상 DOM이 무엇인지, 어떻게 다르고, 왜 필요한지를 자세히 설명합니다. 1. DOM이란 무엇인가?DOM(Document Object Model) 은 HTML 문서를 브라우저가 구조화한 트리 형태의 객체 모델입니다. 자바스크립트는 이 DOM을 이용해 웹 페이지의 내용을 동적으로 제어할 수 있습니다.예시 : Hello자바스크..

Reflow와 Repaint 웹 개발에서 브라우저의 성능은 사용자 경험에 큰 영향을 미칩니다. 특히 CSS를 변경하거나 DOM 구조를 조작할 때, 브라우저 내부에서는 다양한 렌더링 작업이 일어나며, 이 중 Reflow와 Repaint는 성능 측면에서 반드시 이해하고 있어야 할 핵심 개념입니다.특히 Reflow는 DOM 구조와 레이아웃 재계산이 필요한 CPU 중심 작업이며, Repaint는 상황에 따라 GPU를 활용해 시각적 요소만 빠르게 다시 그릴 수 있는 작업입니다. 이러한 차이로 인해 두 작업은 성능 비용과 렌더링 최적화 방식에 있어 큰 차이를 보입니다. 1. Reflow란?Reflow(또는 Layout)는 요소의 크기, 위치, DOM 구조 변화 등으로 인해 레이아웃 전체 또는 일부를 다시 계산해야..

브라우저 렌더링 성능 최적화 빠른 웹사이트는 사용자 만족도와 SEO 모두에 긍정적인 영향을 미칩니다. 특히 웹 렌더링 단계에서의 지연(delay)은 최초 로딩 속도와 상호작용 응답성에 큰 영향을 미치죠.이 글에서는 브라우저 렌더링 흐름을 기준으로, 각 단계에서 렌더링 지연을 최소화할 수 있는 실전 전략을 정리합니다. 1. 렌더링 흐름 요약HTML/CSS/JS 파싱 → DOM & CSSOM 생성 → Render Tree 생성 → Layout → Paint → Compositing 각 단계마다 병목이 생길 수 있으며, 이를 줄이는 것이 곧 렌더링 지연 최소화입니다. 2. 최적화 전략 핵심 포인트a. Critical Rendering Path 줄이기Critical Rendering Path란, 사용자에게..