animatio 사용 시에 css최적화 방법
reflow를 피하거나 최소화 하기
1. 클래스 변화에 따른 스타일 변화를 원할 경우, 최대한 DOM 구조 상 끝단에 위치한 노드에 추가합니다.
클래스가 변화할 때 reflow가 일어나는 것은 피할 수 없지만 성능 문제를 최소화 할 수 있습니다.
아래의 코드는 자바스크립트를 이용하여 콘텐츠 id = change의 넓이를 50%로 줄이려고 하는 코드입니다.
코드에는 .addclass 를 추가하여 넓이를 줄이려 하고 있는데 DOM 트리에서 가장 말단에 있는 노드에 클래스를 추가하여 넓이를 줄일 때 가장 빠릅니다.
<script> var div = document.getElementById('first'); // 아이디는 first, second, change div.addEventListener('click', function(){ this.className += 'addclass'; }, false); </script>
2. 애니메이션이 들어간 엘리먼트는 가급적 position: fixed 또는 position: absolute로 지정합니다.
위치 이동을 구현한 애니메이션(넓이나 높이값 변경 등)은 reflow가 짧은 시간 내 반복적으로 일어나게 됩니다. 그래서 사용하지 않는 것이 가장 바람직하나 반드시 사용해야 한다면 애니메이션이 들어간 요소에 position: absolute 혹은 position: fixed 속성을 적용합니다. 다른 요소에는 영향을 끼치지 않으므로 페이지 전체가 아닌 해당 요소만 reflow가 발생합니다.
3. JS를 통해 스타일변화를 주어야 할 경우, 가급적 한번에 처리합니다.
자바스크립트에서 style을 여러번 호출하는 것 보다 클래스를 통하여 스타일 변화를 처리하는 것이 랜더링 속도가 더 빠릅니다.
4. 인라인 스타일을 최대한 배제합니다.
위의 내용과 중복되며, reflow 비용을 줄이는 것 이외에 코드 가독성도 높일 수 있습니다.
5. 테이블 레이아웃을 피하는 것이 좋습니다.
테이블 레이아웃을 사용하게 되면 테이블 값에 따라 넓이를 계산하므로 랜더링이 느려집니다.
6. CSS 하위선택자는 필요한 만큼 정리하는 것이 좋습니다.
reflow 자체보다는 reflow가 유발시키는 CSS Recalculation에 필요한 내용입니다. CSS 규칙은 오른쪽에서 왼쪽으로 이동합니다. 이 과정에서 class를 지정하면 간단한데 불필요한 선택자를 사용하는 것은 성능을 저하시킨다.
will-change 검토
will-change는 변화가 예상되는 요소를 브라우저에게 미리 알려줍니다. 브라우저는 실제 요소가 변화되기 전에 적절하게 최적화를 할 수 있습니다.
will-change 속성
will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; will-change: top, left;auto
기본값으로 브라우저는 별다른 최적화를 실시하지 않습니다.
scroll-position
스크롤 할 때 엘리먼트의 위치가 변경될 것을 알려줍니다. 이 값을 설정하면 브라우저는 스크롤 가능한 엘리먼트를 미리 최적화 하여 랜더링 합니다. 한 번에 많은 양을 스크롤하거나 빠른 스크롤이 필요한 경우에 사용합니다.
contents
엘리먼트의 컨텐츠가 변경될 것을 알려줍니다. 브라우저는 보통 엘리먼트의 랜더링 결과를 캐싱합니다. 대부분의 엘리먼트가 변경되지 않고 변경되어도 위치가 바뀌는 정도의 미미한 변경만 발생하기 때문입니다. 하지만 엘리먼트가 계속해서 변경되는 경우 브라우저 캐시는 무의미하게 됩니다. 이 속성을 사용하게 되면 캐시를 하지 않고 변경될 때마다 처음부터 랜더링하게 됩니다.
custom-ident
변경하고 싶은 속성을 사용할 수 있습니다. 쉼표(,)를 이용하여 두 개 이상의 속성을 사용할 수 있습니다. 크롬에서는 현재 6가지 속성(opacity, transform, top, left, right, bottom)만 적용됩니다
반응형 작업시 미디어 쿼리를 최소화로 잡는 방법
1. vw,vh사용하기
%말고도 VW(Viewport Width)나 VH(Viewport Height)도 유연한 값을 가지는데 뷰포트를 기준으로 한 단위이며 보여지는 영역에서의 사이즈를 지정하는 단위이다.
2. em,rem 사용하기
em과rem은 동적인 단위로 em은 해당 컨텐츠의 부모의 폰트사이즈에 영향을 받고
rem은 html의 body폰트사이즈에 영향을 받는다.
