GWT - 큰 테이블이 IE7/8에서 느리게로드됩니다.

페이지 매김이없는 테이블이있어서 모든 레코드를 스크롤 막대와 함께 하나의 큰 흐름으로 표시해야합니다. Flex 테이블을 동일하게 사용.GWT - 큰 테이블이 IE7/8에서 느리게로드됩니다.

Firefox는 페이지를로드하는 데 큰 문제가 없으며 약 90 초 동안 7000 개의 레코드를로드합니다. 그러나 IE는 단순히 800 건의 기록만을 갖고 있습니다.

기술 설계자는 본격적인 위젯 대신 innerhtml로 celltable 위젯을 사용하도록 권장합니다.

2011-01-24 frappuccino

GWT의 Grid 및 FlexTable은 표준 HTMLTable에서 파생됩니다. 기본적으로 테이블 행을 삽입 할 때마다 IE는 전체 테이블을 리플 로우하려고하므로 테이블이 길수록 리플 로우에 걸리는 시간이 길어집니다. 따라서 성능이 큰 그리드에서는 끔찍합니다.

div 요소와 스타일을 사용하여 표, 행 및 셀을 닮은 것이 더 좋습니다.

<div class="ftable"> 
    <div class="ftbody"> 
    <div class="frow"> 
     <div class="fcell cell0">Hello</div> 
     <div class="fcell cell1">World</div> 
    </div> 
    </div> 
</div>

새 셀을 삽입해도 다른 셀 div가 리플 로우하므로 더 빠릅니다.

셀은 인라인 div이므로 왼쪽으로 떠 있습니다. 행과 표/섹션은 일반 블록 div입니다. 추가 스타일을 통해 특정 열의 셀 너비를 제어합니다.

.ftbody {overflow-y:scroll; overflow-x:hidden; height: 120px; } 
.fcell { display: inline; } 
.cell0 { width: 80px; } 
.cell1 { width: 120px; }

이것은 당신이 오버 플로우 스크롤과 일정한 높이로 몸을 지정할 수 있기 때문에 쉽게도 수정 헤더/스크롤 내용 등의 작업을 수행 할 수 있습니다. this과 같은 사이트는 사용할 수있는 레이아웃/스타일에 대한 아이디어를 제공 할 수 있습니다.

다른 최적화는 필요하지 않은 경우 셀을 나타 내기 위해 위젯을 사용하지 않는 것입니다. 위젯은 이벤트 처리기 등을 추가해야하는 경우에 유용하며 innerHtml/Text 속성으로 텍스트 또는 HTML 스 니펫을 삽입하면 가장 유용합니다. 메모리 사용 공간을 줄이고 이벤트 처리 속도를 높입니다. 당신이 어떤 정렬 요구 사항이없는 경우

출처

2011-01-24 21:52:47 locka