마음가짐으로 더 나은 CSS를 작성하는 방법

오늘의 포스트에서 우리는 향상된 사이트 성능을 위해 CSS에서 할 수있는 코드 선택에 대해 숙고 할 것입니다. 그러나 이러한 선택을하기 전에 먼저 웹 페이지 렌더링 워크 플로에 대해 간략하게 살펴보고CSS를 통해 해결할 수있는 문제가있는 (성능 관련) 영역.

다음은 DOM 트리 생성 후 브라우저가 수행하는 조작의 대략적인 흐름입니다.

스타일 재 계산 (그리고 트리 생성 렌더링). 브라우저는 DOM 트리의 요소에 적용 할 스타일을 계산합니다. 렌더링 트리는 노드 트리 (요소)를 렌더링하지 않을 DOM 트리에서 버리는 동안 나중에 생성됩니다 ( 표시 : 없음)와 (의사 요소).
레이아웃 (일명 리플 로우). 이전의 계산 된 스타일을 사용하여 브라우저는 페이지의 각 요소의 위치와 기하학을 계산합니다..
다시 그리기. 레이아웃이 매핑되면 픽셀이 화면에 그려집니다..
복합 레이어. 다시 칠하는 동안 그림은 자율적으로 다른 레이어에서 수행 될 수 있습니다. 그 레이어들은 마지막으로 함께 결합됩니다..

이제 더 나은 실적의 CSS 코드를 작성하기 위해 작업의 처음 세 단계에서 우리가 할 수있는 일을 계속하겠습니다..

1. 스타일 계산 감소

앞서 언급 한 것처럼, "스타일 재 계산"단계에서 브라우저는 요소에 적용 할 스타일을 계산합니다. 이렇게하기 위해 브라우저는 먼저 CSS 트리의 지정된 요소 노드를 가리키는 CSS의 모든 선택기를 찾습니다. 그런 다음 해당 선택기의 모든 스타일 규칙을 검토하고 요소에 실제로 적용 할 규칙을 결정합니다.

값 비싼 스타일 계산을 피하려면, 복잡하고 깊이 중첩 된 선택자를 줄입니다. 선택기가 참조하는 요소를 브라우저가 쉽게 파악할 수 있습니다. 이렇게하면 계산 시간이 단축됩니다..

기타 고용 방법에는 다음이 포함됩니다. 스타일 규칙의 수를 줄입니다. (가능한 곳), 사용되지 않는 CSS 제거하기 피하는 중복 및 무시, 스타일을 계산하는 동안 브라우저가 같은 스타일을 반복해서 수행 할 필요가 없습니다..

2. 리플 로우 감소

요소의 리플 로우 또는 레이아웃 변경은 매우 "비용이 많이 드는"프로세스이며, 레이아웃 변경을 수행 한 요소에 상당한 양의 자식이있는 경우 더 큰 문제가 될 수 있습니다 리플 로우는 계단식으로 계단식으로 내려갑니다.).

리플 로우는 높이 또는 글꼴 크기와 같은 기하 속성 변경, 요소에 대한 클래스 추가 또는 제거, 창 크기 조정, 활성화 된 요소 변경 등 요소에 대한 레이아웃 변경에 의해 트리거됩니다. : 마우스 오버, 자바 스크립트로 DOM 변경.

리플 로우를 줄이기 위해 스타일 계산과 마찬가지로, 복잡한 선택자 피하기 과 깊은 DOM 트리 (다시 말하지만 리플 로우의 과도한 계단 현상을 방지하기위한 것입니다).

페이지에서 구성 요소의 레이아웃 스타일을 변경해야하는 경우, 요소의 계층에서 가장 낮은 위치에있는 요소의 스타일을 대상으로 지정합니다. 구성 요소가 만들어진 것입니다. 레이아웃 변경으로 인해 다른 리플 로우가 (거의) 트리거되지 않습니다..

레이아웃을 변경하는 요소에 애니메이션 효과를 적용하는 경우, 페이지 흐름에서 꺼내십시오. 으로 절대적으로 그것을 배치, 절대적으로 배치 된 요소의 리플 로우는 페이지의 나머지 요소에 영향을 미치지 않으므로.

요약하려면 다음을 수행하십시오.

레이아웃을 변경할 때 DOM 트리에서 더 낮은 대상 요소
레이아웃 변경 애니메이션을위한 절대 배치 된 요소 선택
가능할 때마다 레이아웃 속성에 애니메이션 효과 적용 안 함

3. Repaints 줄이기

다시 칠하기 (Repaint)는 화면상의 픽셀을 그리는 것을 말하며 리플 로우 (Reflow)와 마찬가지로 값 비싼 프로세스입니다. 리플 로우는 리플 로우, 페이지 스크롤, 색상, 가시성 및 불투명도와 같은 속성 변경으로 트리거 될 수 있습니다..

빈번하고 거대한 리필을 피하려면, 값 비싼 재 페인트를 유발하는 특성을 덜 사용하십시오. 그림자 같은.

Repaint를 직접 또는 간접적으로 트리거 할 수있는 요소의 속성에 애니메이션을 적용하는 경우 큰 이점이 있습니다. 해당 요소가 자체 계층에있는 경우 페인팅의 불균형이 페이지의 나머지 부분에 영향을 미치지 않도록하고 하드웨어 가속을 트리거합니다. 하드웨어 가속화에서 GPU는 레이어에서 애니메이션 변경을 수행하는 작업을 수행하여 CPU 추가 작업을 절약하고 프로세스 속도를 높입니다..

일부 브라우저의 경우, 불투명 (보다 작은 값으로 1) 및 변환 (이외의 값 없음)가 자동으로 새 레이어로 승격되고 애니메이션 가속 및 애니메이션 전환이 적용됩니다. 애니메이션의 이러한 속성을 선호하는 것이 좋습니다..

강제로 요소를 새로운 레이어로 승격시키고 하드웨어 가속화 애니메이션의 경우 두 가지 기술이 호출됩니다.

더하다 transform : translate3d (0, 0, 0); 요소로, 브라우저를 속여 애니메이션과 전환에 대한 하드웨어 가속을 트리거합니다..
더하기 바뀔 것이다 속성을 요소에 추가하면 브라우저에서 향후 요소에서 변경 될 가능성이있는 속성을 알립니다.. 노트: Sara Soueidan은 Dev.Opera 사이트에서 이에 대한 심층적 인 유용한 도움말을 제공합니다..

요약하려면 다음을 수행하십시오.

Repaints를 초래하는 값 비싼 스타일 피하기
막대한 애니메이션 및 전환을 위해 레이어 승격 및 하드웨어 가속을 찾습니다..

필기 해

(1) 지금까지 CSS 파일 크기 축소에 대해서는 언급하지 않았습니다. 우리는 스타일 규칙 (및 DOM 요소)을 줄이면 브라우저가 어느 정도 작동해야하는지 적게 스타일을 계산하는 과정에. 이 코드 축소의 결과로 더 나은 선택기 작성 및 사용하지 않는 CSS 삭제, 파일 크기가 자동으로 줄어 듭니다..

(2) 또한 자바 스크립트에서 엘리먼트의 스타일을 너무 많이 변경하지 마라.. 대신 새 스타일을 유지하는 클래스를 요소 (JavaScript 사용)에 추가하여 이러한 변경을 수행하십시오. 이렇게하면 불필요한 리플 로우를 방지 할 수 있습니다..

(3) 당신은 원할 것입니다. 레이아웃 스 래싱 피하기 자바 스크립트를 사용하여 요소의 레이아웃 속성에 액세스하고 수정하기 때문에 발생하는 강제 동기 리플 로우 (forced synchronous Reflows)도 마찬가지입니다. 이것이 성능을 어떻게 떨어 뜨리는 지에 대한 자세한 내용은 여기를 참조하십시오..