개요

웹 페이지에 사용되는 리소스에 대한 네트워크 요청과 그 결과를 기다리기까지는 웹의 최적화를 위한 직접적인 제어는 어렵다. 단지 긍정적인 사용자 경험을 갖도록 대체 방법을 찾을 뿐이다. 그러나 렌더링 절차에서는 충분한 직접적인 제어가 가능할 수 있다. CSS Containment Module은 최적화에 대한 기술적인 접근을 다룬다.

예를 들어서 제한된 유저 에이전트(user agent)의 뷰포트(viewport) 내에서 로드된 모든 콘텐츠가 다 보여지지는 않는다. 필요에 따라 스크롤바를 생성해서 선택적으로 뷰포트 밖의 콘텐츠를 볼 수 있다. 따라서 뷰포트 밖의 콘텐츠를 처음부터 렌더링을 할 필요가 있을까? 라는 의문을 가질 수 있다. 이것은 성능에 매우 영향을 주는 부분이다. 성능은 사용자가 체감을 하는 것이며 뷰포트 밖의 콘텐츠는 체감 대상에서 제외된다. 지금까지 유저 에이전트(user agent)는 사용자가 관심을 둘지 모를 콘텐츠까지 렌더링을 완벽하게 마치는데 시간을 할애했다. 이 모듈에서는 아직은 충분치는 않아 보이지만 선택적으로 초기 렌더링을 제어하는 속성을 추가했다.

다른 또 한가지는, 중첩된 요소들은 렌더링 과정에서 상위 요소에게 영향을 준다. 예를 들어서 부모 요소의 크기는 자식 요소의 크기에 영향을 받는 것이며 렌더링 과정에서 연산이 복잡해진다는 의미를 가지고 있다. 그래서 그 연관성을 끊고 하위 요소에게 격리된 방식으로 처리를 하게 되면 성능상의 이점을 가질 수 있다. 이 모듈에서는 격리 방식을 지정하는 기술이 포함되어 있다.

하지만 최적화는 몇가지 추가된 속성 지정만으로 완벽하게 해결되는 것이 아니다. 그리고 그만큼 신경써야할 항목들이 더 늘어날 수 있다는 것을 알아야 한다. 그럼에도 규모가 큰 웹페이지의 경우에는 최적화는 피할 수 없는 도전이다.

관련 속성