집 > 기사 > 웹 프론트엔드 > CSS 다시 그리기 및 재배열의 예

CSS 다시 그리기 및 재배열의 예

小云云원래의: 2018-03-12 10:08:471803검색

이 글은 주로 CSS reraw 및 reflowing 방법에 대한 관련 정보를 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로, 여러분에게 도움이 되기를 바라며 지금 공유하겠습니다.

브라우저 로딩 페이지의 원리

일반적으로 문서가 처음 로드될 때 브라우저 엔진은 HTML 문서를 구문 분석하여 DOM 트리를 구축한 다음 DOM 요소의 기하학적 속성을 기반으로 렌더링을 위한 트리를 구축합니다. 렌더링 트리의 각 노드에는 상자 모델과 유사한 크기 및 여백과 같은 속성이 있습니다(숨겨진 요소는 표시할 필요가 없으므로 렌더링 트리에는 DOM 트리의 숨겨진 요소가 포함되지 않습니다). 렌더링 트리가 구성되면 브라우저는 요소를 올바른 위치에 배치한 다음 렌더링 트리 노드의 스타일 속성을 기반으로 페이지를 그릴 수 있습니다. 브라우저의 흐름 레이아웃으로 인해 렌더링 트리 계산은 일반적으로 한 번만 통과하면 됩니다. 테이블과 내부 요소를 제외하고 렌더링 트리에서 노드의 속성을 결정하려면 여러 계산이 필요할 수 있으며 이는 일반적으로 동등한 요소에 비해 3배의 시간이 걸립니다. 이것이 레이아웃에 테이블을 사용하지 말아야 하는 이유 중 하나입니다.

Redraw

다시 그리기는 가시성, 윤곽선, 배경색 등의 속성 변경과 같이 요소 모양의 변경으로 인해 발생하는 브라우저 동작입니다. 브라우저는 새 속성을 기반으로 요소를 다시 그려 요소에 새로운 모양을 부여합니다. 다시 그리기는 다시 레이아웃을 가져오지 않으며 반드시 리플로우를 동반하지도 않습니다. 브라우저는 다시 그리고 리플로우할 때 높은 성능 비용을 지불합니다.

재배열

재배치는 더욱 분명한 변화로, 렌더링 트리를 다시 계산해야 한다는 의미로 이해될 수 있습니다. 다음은 리플로우를 트리거하는 일반적인 작업입니다.

DOM 요소의 기하학 속성 변경.
DOM 트리의 구조적 변화.

예: 추가, 삭제, 노드 이동 등

특정 속성을 가져옵니다.

일부 속성을 가져올 때 브라우저는 올바른 값을 얻기 위해 리플로우도 트리거합니다. 이로 인해 브라우저의 최적화가 효과적이지 않게 됩니다. 이러한 속성에는 offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight, getCompulatedStyle()(IE의 currentStyle)이 포함됩니다. 따라서 이러한 값은 여러 번 사용될 때 캐시되어야 합니다.

또한 요소의 일부 스타일 변경, 브라우저 창 크기 조정, 스크롤 막대 표시 등도 리플로우를 트리거합니다.

재정렬 횟수 및 재정렬 효과 범위 줄이기

1. 스타일 속성을 변경하는 여러 작업을 하나의 작업으로 결합합니다. 예를 들어

JS:
    var changep = document.getElementById(‘changep’);
    changep.style.color = ‘#093′;
    changep.style.background = ‘#eee&#39;;
    changep.style.height = ‘200px&#39;;
    可以合并为：
CSS:
    p.changep {
        background: #eee;
        color: #093;
        height: 200px;
    }
JS:
    document.getElementById(‘changep’).className = ‘changep&#39;;

2. 여러 번 재정렬해야 하는 요소의 위치 속성을 절대 또는 고정으로 설정하면 이 요소가 문서 흐름에서 벗어나 변경 사항이 다른 요소에 영향을 미치지 않습니다. 예를 들어 애니메이션 효과가 있는 요소는 절대 위치로 설정하는 것이 가장 좋습니다.

3. 메모리에서 노드를 여러 번 작동시킨 후 완료 후 문서에 추가합니다. 예를 들어 테이블 데이터를 비동기적으로 가져와 페이지에 렌더링하려고 합니다. 루프에 각 행을 추가하는 대신 먼저 데이터를 얻은 다음 메모리에 전체 테이블의 HTML 조각을 작성한 다음 문서에 한 번에 추가할 수 있습니다.

4. 표시 속성이 없음인 요소는 렌더링 트리에 없으므로 숨겨진 요소에 대한 작업으로 인해 다른 요소가 재배열되지 않습니다. 요소에 대해 복잡한 작업을 수행하려는 경우 먼저 요소를 숨긴 다음 작업이 완료된 후 표시할 수 있습니다. 숨기고 표시할 때 리플로우가 2번만 트리거됩니다.

5. 브라우저 리플로우를 유발하는 속성 값을 자주 검색해야 하는 경우 이를 변수에 캐시해야 합니다.

CSS 다시 그리기 및 재배열의 예

관련 기사