2012-12-06 30 views
1

我們正在構建一個Web應用程序,該應用程序擁有一個用戶可以看到大量可編輯項目表的頁面。此表的每一行都有控件來上移/下移行以及刪除行的選項。每行也有兩個選擇元素。iOS 6移動Safari慢選擇元素的大表格呈現

在極端情況下,這張表格可能包含大約200行,當我們有很多行時,我們會遇到嚴重的性能問題。該頁面上下滾動的速度非常慢,我們在屏幕上看到「檢查器 - 裝箱」,同時刪除一行大約需要30秒,有時更多!上下移動需要相同的時間,並且頁面通常不可用。

我們一直試圖精確地縮小問題的出處,我們非常確定它是如何處理表中的select元素的 - 如果我們從行中刪除這些元素;滾動是完美的,上下移動約1秒,並刪除一行〜7秒。

如果我們從200行表格的底部刪除一行,它幾乎是即時的。

看起來問題在於如何處理頁面上的CSS,當我們運行探查器時,它重新計算大約需要3秒鐘的樣式。

該頁面在其他瀏覽器中表現良好,任何幫助/知識都會很棒。

感謝

+0

由於您明確指出了iOS 6.在其他版本(iOS 5和更舊版本)中是否有區別?如果是這樣,有什麼區別? –

+0

唯一真正的區別是滾動在iOS5中看起來很好,其他控件仍然很慢但仍比iOS6更快,謝謝 – hcharge

+1

您是否曾經找到答案?我們看到我們網站上的大型表單存在巨大的性能差異。 iOS5很好,但iOS6速度很慢。 –

回答

-1

設置table-layout:fixed;作爲餐桌上的樣式屬性(在樣式表)可能會使其更做出更快的反應。瀏覽器必須做更少的計算,缺點是你必須自己指定列的寬度。

+0

恐怕這不是一種選擇,因爲我們的值隨着在選擇菜單中選擇的選項發生變化而改變單元格的寬度,頁面也響應,所以寬度需要改變,謝謝雖然 - 我沒有嘗試它,它沒有任何區別無論如何 – hcharge

+0

有辦法處理風格變化(CSS類)爲這些數據會發生變化,這並不是導致正確答案的原因。 –

0

我們在iOS 6的Web應用程序中有幾個表格,其中一些包含幾百行只讀文本,但也有一些包含SELECT元素。

將表格佈局設置爲固定會對性能產生巨大影響。一些較大的表格在默認的動態表格寬度計算中存在主要的渲染問題,迄今爲止我們還沒有克服。當一行包含複選框時,情況尤其如此。

一些表格沒有渲染最後一行,或者表格被切掉,接近底部,等等。

我們對肖像模式使用了一個特殊的樣式表,它改變了TABLE和TD元素的寬度,並完全刪除了一些列。

這工作得很好,迄今沒有造成任何副作用或問題。

對於滾動,我們使用一個特殊的DIV元素圍繞具有定義高度的表格,並使用「-webkit-overflow-scrolling:touch」。即使是擁有大約850個參賽作品的最大桌子,也不會有任何性能或閃爍的損失。

什麼時候渲染表格?在頁面渲染/就緒/加載事件? 你使用「innerHTML」賦值還是在邏輯中創建DOM樹?