2012-12-06 2 views
1

Google은 사용자가 편집 가능한 항목의 큰 테이블을 볼 수있는 페이지가있는 웹 애플리케이션을 구축하고 있습니다. 이 테이블에는 행을 위/아래로 이동하는 각 행과 행을 삭제하는 옵션이 있습니다. 각 행에는 두 개의 선택 요소가 있습니다.iOS 6 Mobile Safari 선택 요소가있는 큰 테이블을 느리게 렌더링합니다.

이 테이블은 극한 상황에서 약 200 개의 행으로 구성 될 수 있습니다. 심각한 성능 문제가있는 행이 많을 때입니다. 페이지가 위아래로 스크롤하는 데 매우 느리며 화면에서 "체커 권투"를 볼 수 있습니다. 또한 행을 삭제하는 데 약 30 초가 걸리고 때로는 더 빨라집니다! 위아래로 움직이는 데는 비슷한 시간이 걸리고 페이지는 일반적으로 사용할 수 없습니다.

우리는 문제의 범위를 좁히기 위해 노력해 왔으며 테이블의 select 요소와 관련이 있다는 것을 확신합니다. 스크롤링은 완벽합니다. 위아래로 움직이는 시간은 1 초 ~ 7 초입니다.

200 행 테이블의 맨 아래에서 한 행을 삭제하면 거의 순간적입니다.

문제는 페이지의 CSS와 관련이있는 것처럼 보입니다. 프로파일 러를 실행하면 스타일을 다시 계산하는 데 약 3 초가 소요됩니다.

페이지가 다른 브라우저에서도 정상적으로 작동하므로 도움/지식이 뛰어납니다.

감사

(스타일 시트)에 테이블에 스타일 속성으로 table-layout:fixed; 설정
+0

명시 적으로 iOS 6을 지적하고 있으므로 다른 버전 (iOS 5 이상)에 차이가 있습니까? 그렇다면 어떤 차이가 있습니까? –

+0

유일한 차이점은 iOS5에서는 스크롤링이 정상적으로 보였지만 다른 컨트롤은 여전히 ​​느리지 만 iOS6보다 여전히 빠름 덕분에 – hcharge

+1

답변을 찾았습니까?웹 사이트의 대형 양식간에 성능 차이가 크게 나타납니다. iOS5는 괜찮 았지만 iOS6은 매우 느립니다. –

답변

-1

은 더 빠르게 응답 할 수 있습니다. 브라우저는 계산이 적어야하며, 단점은 직접 열 너비를 지정해야한다는 것입니다.

+0

선택 메뉴에서 선택한 옵션으로 변경되는 값을 가지므로 두려울 것입니다. 셀의 너비, 페이지도 반응하므로 너비가 바꿔야 할 필요가 있습니다. 덕분에 나는 그것을 시도했지만 아무렇지도 않게 만들었습니다. – hcharge

+0

비행 중에 스타일 변경을 처리 할 수있는 방법이 있습니다 (CSS 클래스). 데이터가 바뀌므로 올바른 대답을 줄이는 이유가 아닙니다. –

0

우리는 iOS 6 용 Web App에 몇 개의 테이블을 가지고 있습니다. 일부 테이블은 텍스트로 읽기 전용으로 수백 개의 행을 포함하지만 일부는 SELECT 요소도 포함합니다.

테이블 레이아웃을 고정으로 설정하면 성능에 엄청난 영향을 미칩니다. 더 큰 테이블 중 일부는 기본 동적 테이블 너비 계산과 관련하여 주요 렌더링 문제가 있었지만 지금까지 해결하지 못했습니다. 이것은 특히 행에 체크 박스가 포함 된 경우입니다.

일부 테이블은 예를 들어 마지막 줄을 렌더링하지 않았거나 테이블이 맨 아래 근처에서 잘린 상태입니다.

우리는 TABLE 및 TD 요소의 너비를 변경하고 일부 열을 완전히 제거하는 세로 모드 용 특수 스타일 시트를 사용합니다.

이것은 정말 잘 작동하며 지금까지 부작용이나 문제를 일으키지 않았습니다.

스크롤링의 경우 높이를 정의하고 "-webkit-overflow-scrolling : touch"를 사용하는 테이블을 둘러싼 특수 DIV 요소를 사용합니다. 약 850 개의 항목이있는 가장 큰 테이블조차도 성능이나 깜박임을 잃지 않고 스크롤됩니다.

언제 테이블을 렌더링합니까? 페이지 렌더링/준비 /로드 이벤트 중? "innerHTML"할당을 사용합니까? 아니면 논리에서 DOM 트리를 만드시겠습니까?

관련 문제