많은 CSS3 섀도우를 사용하는 단일 페이지 응용 프로그램이 있습니다. 앱은 페이지를 나타내는 8 개의 패널로 구성됩니다. 한 번에 한 개의 패널 만 보이고 나머지 세 개의 패널은 숨겨져 있습니다 (스타일 표시 : 없음;). 사용자가 메뉴를 클릭하면 패널간에 이동할 수 있습니다.브라우저의 페인트 재현 및 성능
Google의 속도 추적기는 자원의 약 75 %가 다시 칠하는 데 소비됩니다. 내 질문은이 것입니다 : 브라우저 repaints 영향을) 페이지 또는 B) 모든 요소의 가시 요소에만 표시 여부에 영향을 미칩니 까?
만약 B면 내가 할 수있는 일이 많지 않습니다. 그것이 A이면, 숨겨진 패널의 html을 지울 수 있고 다시 칠하는 시간을 줄이려는 목적으로 보이는 패널에 대해서만 내부 DOM 요소를 가질 수 있습니다.
알려주세요.
성능 질문에 대답하는 방법은 벤치 마크를 수행하는 것입니다. 아무런 요소를 표시하지 않고 성능 오버 헤드가 얼마나되는지 알고 싶다면 다음을 수행하십시오.
테스트 1 : 모든 요소가있는 페이지를로드하십시오. 요소가없는 경우 다시 그리기 속도를 측정하십시오.
테스트 2 : 디스플레이 : 없음 요소가 완전히 제거되고이 페이지를로드하고 다시 그리기 속도를 측정하도록 페이지를 수정하십시오.
두 테스트의 차이점은 디스플레이의 다시 페인트 오버 헤드 : 없음 요소입니다. 바라기를 바라지 만 그것은 최소한 일 것입니다.
숨겨진 요소는 다시 그리지 않습니다. 당신은 패널에 애니메이션을 적용하고 있습니까? 그림자가있는 요소를 애니메이션화 (특수 변환)하면 실제로 다시 그리는 데로드가 걸립니다. 또한 그림자가 클수록 다시 칠하는 데 오래 걸립니다. 나는 정확한 측정을하지 않았으며 단지 개인적인 경험으로 그리지 않았다. 'jank'는 최소한 구형 컴퓨터에서는 꽤 빠르다. 어쩌면 배경, 데이터 - 우 리 이미지를 대신 사용해보십시오.
이것은 브라우저의 구현에 따라 다릅니다. 그러나 숨겨진 컨텐츠를 렌더링 할 필요가 없으므로 스마트 브라우저 디자인은 많은 시간을 소비하지 않아야합니다. 실험으로서'display : none' 속성을 모두 제거하고 성능에 어떤 영향을 주는지보십시오. – Barmar
@Barmar : 모든 것을 화면에 표시하면 none입니다. UI 이벤트가 트리거되지 않으므로 다시 칠할 수 없습니다. 그렇다고해도 숨겨진 요소가 다시 그리지 않는다는 의미는 아닙니다. – frenchie