개발에 AtoZ까지

근래에 웹 최적화에 관해 관심을 가지면서 Reflow와 Repaint에 대해서 다시 한번 짚고 넘어가 보려고 합니다. 혹시나 브라우저 렌더링에 대해 상기하고 싶으신 분이 있다면 이전 글을 보고 오시는 것을 추천합니다. 이 글은 아래와 같은 목차로 진행하겠습니다. 1. Reflow가 뭘까? 2. Repaint는 뭘까? 3. 둘의 차이점은 뭘까? 4. 최적화 관점에서 어떻게 해야 할까? 5. 마무리 Reflow가 뭘까? Reflow란 HTML 파일을 불러와 Parsing을 통해 Render Tree를 형성하게 되는데, 어떠한 액션이나 이벤트로 인해 Dom의 크기나 위치 등의 값이 변경되어 Layout 과정을 다시 수행하게 됩니다. 이렇게 다시 수행되는 과정을 통틀어서 Reflow라고 합니다. 말로 하면 감이..

우리가 흔히 알고 있는 chrome, safari, opera 같은 브라우저는 어떻게 렌더링이 되는 걸까?라는 의문에서 시작해서 이 글을 쓰게 됐다. 이 글은 크게 아래와 같은 순서로 진행됩니다. 브라우저란 뭘까? 브라우저의 구조는 어떻게 될까? 브라우저마다 렌더링 엔진은 다를까? 브라우저가 어떻게 렌더링 되는 걸까? 마무리 브라우저란 뭘까? 가끔 이런 경험을 해본 적이 있을 것이다. pdf를 받아서 chrome으로 열기를 누르면 해당 파일이 열린 적이 있을 것이다. 단순히 웹서핑할 때만 브라우저를 이용했던 분은 의아했을 것이다. 하지만 정확히 브라우저의 주요 기능을 알게 되면 왜 브라우저를 통해 pdf 파일을 열수 있는지 이해될 것이다. 브라우저는 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시..