가시성 : 숨김 및 표시 간의 성능 차이 : 없음
내 jQuery Backbone.js 웹 응용 프로그램에서 작업을 단순화하고 싶습니다. 이러한 단순화 중 하나는 메뉴 및 대화 상자 위젯의 동작입니다.
이전에는 처음에 메뉴의 div 상자를 만들고 display: none; opacity:0;. 메뉴가 필요할 때 스타일을 변경 display:block한 다음 jQuery ui 위치 유틸리티를 사용하여 div 상자의 위치를 지정하고 (요소를 배치 display:none할 수 없기 때문에) 완료되면 마지막으로 스타일을 opacity:1.
이제으로 숨기고 visibility:hidden싶습니다. 필요할 때 위치 유틸리티를 사용하고 스타일을 visibility:visible. 이 새로운 접근 방식을 사용하기 시작하면 웹 애플리케이션 세션 전체에서 숨겨 지지만 공간을 차지하는 약 10 개의 div 상자가 있습니다 display:none.
새로운 접근 방식의 의미는 무엇입니까? 어떤면에서 브라우저 성능에 영향을 미칩니 까?
display:none와 사이의 성능 차이는 알지 못합니다. visibility:hidden10 개 요소 만 있어도 완전히 무시할 수 있습니다. 당신의 주된 관심사는 당신이 말했듯이 요소가 문서 흐름 내에 남아 있길 원하는지 여부입니다.이 경우 visibility요소의 상자 모델을 유지하기 때문에 더 나은 옵션입니다.
display:none;요소가 모두 렌더 트리에있는 것은 아니므 로 액면가에서 더 잘 수행됩니다.
나는 당신이 이것으로 인해 실제 눈에 보이는 성능 문제가있을 것이라고 의심합니다. 필요한 경우 opacity: 0또는 visibility: hidden 기능 때문에 사용하십시오. 기능이 필요하지 않으면display: none;
자바 스크립트를 통해 보이는 상태와 보이지 않는 상태 사이를 전환하는 경우 visible : hidden이 더 나은 성능을 발휘해야합니다. 보이는 상태와 숨겨진 상태 모두에서 항상 동일한 양의 공간을 차지하므로 사라진 것처럼 보일 때마다 그 아래의 요소가 리플 로우되지 않습니다. display : none의 경우 문서의 흐름에서 문서를 제거한 다음 display : block으로 설정하면 다시 렌더링하고 해당 요소 아래에있는 모든 항목을 밀어 내고 기본적으로 모든 항목을 다시 배치합니다.
그러나 버튼을 누를 때 표시 상태를 전환하는 것과 같은 작업을 수행하는 경우 성능 차이가 무시할 수 있기 때문에 더 나은 성능보다는 필요에 맞는 것을 사용해야합니다. dom을 사용하여 초당 약 20 회 애니메이션을 수행 할 때 visible : hidden vs display : none의 성능에 대해 걱정할 수 있습니다.
visibility: hidden문서에서 리플 display: none로우 를 일으키지 않지만 그렇습니다.
display: noneHTML 엔진 이 요소와 그 하위 요소 를 완전히 무시하도록합니다. 엔진은로 표시된 요소를 무시하지 않고 visibility: hidden요소와 하위 요소에 대한 모든 계산을 수행합니다. 예외는 요소가 뷰포트에서 렌더링되지 않는다는 것입니다.
위치 및 치수 속성 값이 필요한 경우 visibility: hidden에는 뷰포트의 공백을 처리해야합니다. 일반적으로 해당 요소를 너비와 높이가 0이고 '오버플로 : 숨김'으로 다른 요소 안에 래핑하여 뷰포트에서 공백을 처리해야합니다.
display:none문서의 정상적인 흐름 에서 요소를 제거하고 요소 및 하위 요소의 위치 / 높이 / 너비 값을 0으로 설정합니다. elements display속성이 이외의 다른 값으로 변경 none되면 전체 문서 리플 로우가 트리거됩니다. 이는 큰 문서에 문제가 될 수 있으며 때로는 제한된 기능을 가진 하드웨어에서 렌더링되는 크기가 크지 않은 문서 일 수 있습니다.
display: none뷰포트에서 요소를 숨길 때 사용하는 자연스럽고 논리적 인 솔루션이며 visibiliy: hidden필요할 때 / 필요할 때 대체로 사용해야합니다.
편집 : @Juan이 지적했듯이 display: none필요한 것이 DOM 트리에 많은 요소를 추가하는 것입니다. visibility: hidden트리에 추가 된 각 요소에 대해 리플 로우를 트리거하지만 display: none그렇지 않습니다.
음, 사이의 주요 성능 차이 display: block와는 visibility: hidden당신이 100,000 요소, 말, 목록이있는 경우가 있다는 것입니다 visibility: hidden당신이 저장 DOM 매달려에서이 DOM에서 요소를 제거하지 않습니다하지 않기 때문. + visibility: hidden처럼 작동합니다 . 처럼 작동 합니다.opacity: 0pointer-events: nonedisplay: noneElement.remove()
라이브 예 : https://jsfiddle.net/u2dou58r/10/
"숨겨진"단추 아래에있는 양식을 사용하여 간단한 정적 페이지에서 두 가지를 모두 시도한 개인적인 경험으로 볼 때, 클릭 할 때 클릭 가능한 단추가 밀리 초 동안 숨겨진 단추를 표시하려고하는 것처럼 약간 점프하는 visibility: hidden반면 , 완벽하게 수행 display: none됩니다.
글쎄요, 가시성 : 아무도 여전히 div의 공간을 사용하지 않습니다. 따라서 위치가 이미 할당되어 있기 때문에 위치 지정 부분을 건너 뛸 수 있습니다 (그러면 더 나은 성능을 얻을 수 있음).
그러나 나는 어떻게 든 당신이 당신의 display : none 접근 방식이 "show"이벤트가 트리거 될 때 공간을 올바르게 할당 할 필요가 있다고 생각합니다.
나는 이것이 어떻게 든이 질문과 관련이 있다고 생각합니다 .CSS 속성 : 디스플레이 대 가시성
흥미로운 부분을 인용하겠습니다.
요소는 DOM 계층에서 제거되지 않습니다. 모든 블록 레벨 디스플레이 '스타일'은 display : none을 사용할 때 완전히 '숨겨져'있지만, visible : hidden; 요소 자체는 숨겨져 있지만 여전히 DOM에서 시각적 공간을 차지합니다.
따라서 두 버전 모두 여전히 DOM 계층 구조에 있기 때문에 브라우저 성능과 관련하여 실제 차이가 없어야합니다. 이러한 속성 은 DOM과 관련하여 요소가 표시되는 방식 에만 영향을 줍니다 .
'IT Share you' 카테고리의 다른 글
| Buildr, Gradle 또는 Maven 3을 기다리시겠습니까? (0) | 2020.12.03 |
|---|---|
| NSTextField에서 Enter-Key를 눌렀을 때 액션을 실행합니까? (0) | 2020.12.02 |
| iOS 11 navigationItem.titleView 너비가 설정되지 않음 (0) | 2020.12.02 |
| System.Data.Linq.ChangeConflictException : 행이 없거나 변경되었습니다. (0) | 2020.12.02 |
| jquery / javascript로 숫자 나 문자를 감지합니까? (0) | 2020.12.02 |