브라우저 렌더링 파이프라인을 공부하며 가장 크게 느낀 점은 '보이지 않는 비용'에 대해 인지하고 있어야겠다는 것입니다. 그저 코드를 작성하면 화면에 나타난다고 당연하게 생각했지만, 바이트가 DOM과 CSSOM으로 파싱되고, 결합하여 렌더 트리를 만드는 작업의 동작 과정을 알게 되었습니다. 자바스크립트의 async/defer 속성 하나가 파싱을 중단시키는지 여부를 결정하고, 무심코 쓴 offsetWidth 조회가 강제 동기식 레이아웃을 유발해 전체 파이프라인을 멈추게 할 수 있다는 사실도 놀랍게 느껴졌습니다. 이제는 코드 한 줄을 작성하더라도 이 코드가 렌더링 엔진을 얼마나 영향을 주는지, 어떻게 하면 레이아웃과 페인트를 건너뛰고 합성 단계만으로 효율적으로 처리할 수 있을지 고민하는 습관을 갖게 되었습니다..
