안녕하세요~ RyuWoong 입니다. 저번 포스팅에 브라우저에서 Web을 어떻게 보여주는지에 대해 했었는데요. 이번엔 그 과정 중 핵심인 중요 렌더링 과정에 대해 알아보겠습니다. 중요 렌더링 과정? 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시켜 사용자가 빠르게 웹페이지에 접근하고 사용할 수 있게 해줍니다. 중요 렌더링 과정 최적화는 렌더링 시간을 개선 시켜줍니다. 이는 빠른 사용자 상호과정을 보장하며 버벅거림을 피할수 있도록 해줍니다. 이 과정은 DOM 구성 - CSSOM 구성 - Render Tree 구성 - Layout - Paint로 이루어져 있습니다. 그럼 과정을 하나씩 뜯어보도록 하겠습니다. Docum..

안녕하세요. RyuWoong 입니다. 이번 포스팅부터 Web Perfomance에 대해 알아보고자 합니다. 그 첫번째 주제는 Latency입니다. 대기시간(Latency)는 하나의 데이터 패킷이 출발지에서 도착지까지 가는 데 걸리는 시간을 뜻합니다. 성능 최적화에 있어서 대기 시간의 원인을 줄이는 것과 연결 상태가 좋지 않은 사용자를 고려하여 대기 시간이 긴 환경에서 사이트 성능을 테스트하는 것은 중요하죠. 이번 글에서 대기시간이 무엇인지와 어떤 영향을 미치는 지, 어떻게 측정하며, 어떤 방법으로 최적화 할 수 있는지 알아보겠습니다. Latency? 대기 시간이란 일반적으로 사용자가 요청을 한 시점부터 해당 사용자에게 요청에 대한 응답을 받기까지 걸리는 시간을 말합니다. 첫 번째 요청에서 14KB 만큼의..