가 표시됩니다. 브라우저 렌더링을 쉽게 할 수 없습니까?

우리가 표시되지 사업부가 그렇다면 비록 다른 상황, z-index, opacity, 부모의 overflow:hidden 등 상대적/절대적 위치 ...가 표시됩니다. 브라우저 렌더링을 쉽게 할 수 없습니까?

가 필요한가 또는 사업부에 display:none을 설정하는 것이 더 좋아? 나는 브라우저가 display:none div를 건너 뛰는 것을 상상할 수 있지만 그렇지 않으면 동일한 결과를 얻기 위해 계산을해야 할 것이다.

나는 애니메이션 작업을하고있어 애니메이션을 완성 할 때 display:none 콜백이 필요하므로 애니메이션을 완료하면 css3 전환을 피해야합니다. (나는 어떤 브라우저가 나를 위해 CSS3 전환하지만 충분하지 '보편적'에서 콜백을 얻을 수있는 방법을 제공합니다 알고있다.)가 될 말하는

또 다른 방법 :

빨리 리플에 그것을인가/display:none와 DIV를 다시 칠 width:0;height:0, left:-100000px ... 대신?

업데이트 2 난 당신이 display:none로 사업부 내부 SVG이있는 경우 크롬, 당신은 <use xlink:href="">를 사용하여 참조 할 수 있다는 것을 발견

. display:none이 아닌 visibility:hidden과 같은 것을 사용하면 width:0;height:0 ... 참조가 작동합니다.
즉, display:none을 사용하면 브라우저가 일부 단계를 건너 뛸 수 있습니다.
부분적인 예 : display:none을 사용하면 렌더링 절차가 약간 쉬워 질 수 있습니다.

출처

2014-07-14 Ghetolay

'display : none'을 설정하는 데 약간의 시간을 절약 할 수 있다고 생각하지만, 현재 브라우저와 처리 능력이있는 마이크로 초의 규모에 대해서 이야기하고 있습니다. – RevanProdigalKnight

전환을 사용하는 경우 transitionEnd 이벤트에 대한 지원도 제공됩니다. http://stackoverflow.com/questions/2794148/css3-transition-events 및 여러 브라우저에 대해 여러 이벤트가 있습니다. – Bernhard

@RevanProdigalKnight 사용 사례가 상당히 무겁습니다. 항상 시간을 절약하는 것이 좋다. – Ghetolay

접근 방법이 무엇이든간에 페이지로드 측면에서 "완화"의 의미는 CSS 및 HTML 콘텐츠의 크기에만 의존합니다.

그리고 만약 당신이 클라이언트의 CUP주기를 완화한다면 분명히 차이가 없을 것입니다. 당신의 논리가 복잡하다면 히트와 시도만으로 효율성 차이를 느낄 수 있습니다.

출처

2014-07-15 11:44:03 XIMRX

페이지 로딩에 대한 것이 아니라 렌더링/다시 그리기에 관한 이야기였습니다. 그것은 위젯과 애니메이션이 많은 웹 앱이므로 잘못된 실행 렌더링이 있습니다. 나는 어떤 종류의 확실한 대답이 있다고 생각했지만 그렇지 않은 것 같습니다. – Ghetolay

가 표시됩니다. 브라우저 렌더링을 쉽게 할 수 없습니까?

답변

관련 문제