Arresto anomalo di Firefox durante il rendering di una tabella html di grandi dimensioni (20.000+ righe)

Question

Capisco che il rendering di una tabella così ampia stia spingendo i limiti di qualsiasi browser. Tuttavia, ero curioso di sapere perché una tabella che è significativamente grande (20.000+ righe) si blocca Firefox, mentre tutti gli altri browser la rendono relativamente veloce.

Sto usando ASP.NET e scrivendo la tabella html direttamente nel buffer con Response.Write. Inizialmente pensavo che forse stavo generando un html malformato, quindi ho deciso di ricreare il tavolo con un gridview. Questo ha dimostrato di rallentare ancora di più Firefox, ma ha avuto un tempo di rendering leggermente più lento negli altri principali browser.

Firefox crea le prime (circa) 10.000 righe. Il problema è dopo, aggiunge molto lentamente le righe rimanenti fino a quando l'applicazione non risponde, mentre utilizza una quantità crescente di memoria (300 MB +). Internet Explorer utilizza solo circa 30 MB.

Sto usando la versione più recente di Firefox e tutti i miei componenti aggiuntivi sono disabilitati durante il test. Inoltre, ho rimosso tutti i CSS e JavaScript dalla pagina.

Si tratta di un problema noto con firefox? Qualcun altro ha sperimentato questo? Quali passi possono essere fatti per risolvere il problema o almeno avviare la risoluzione dei problemi?

EDIT So che avere questo numero di righe di tabella su una pagina è una pratica di progettazione dell'interfaccia utente orribile. Grazie a tutti coloro che l'hanno fatto notare, ma non era questa la mia domanda. Per chiarire ulteriormente ero solo curioso di sapere perché questo funziona in tutti i browser tranne Firefox.

Answer 1

Si potrebbe voler utilizzare l'impaginazione per risolverlo :) Immagino che il mio povero vecchio portatile sarebbe morto se Firefox avesse cercato di visualizzare 20k righe di tabelle. Ed è un core2 con 4gb ram: P

Answer 2

provare definizione della tabella con una larghezza fissa

<table style='table-layout:fixed'> 

Questo permetterà al browser di rendering tavolo senza cercare di ricalcolare la larghezza di ogni nuova aggiunta fila .

[UPDATE]

io non sono sicuro di quello che i dati sembra ma posso fare

<table style='table-layout:fixed'> 
<tr><td style="width:150px;"></td><td style="width:150px;"></td><td style="width:150px;"></td><td style="width:150px;"></td><td style="width:150px;"></td></tr> 
<% 
    for (int ix = 0; ix < 30000; ix++) 
    { 
     Response.Write("<tr>"); 
     Response.Write("<td><img src='stickman1.bmp'></td>"); 
     Response.Write("<td>" + RandomString() + "</td>"); 
     Response.Write("<td><img src='stickman2.bmp'></td>"); 
     Response.Write("<td>" + RandomString() + "</td>"); 
     Response.Write("<td><img src='stickman3.bmp'></td>"); 
     Response.Write("<td><a href='#' onclick='blah();'>stick man!</a></td>"); 
     Response.Write("</tr>"); 
    } 

%> 
</table> 

all'interno di Firefox 3.0.11. Anche se ci vorrà un po 'di tempo, Firefox lo mostrerà. Ha consumato 239 MB di RAM. RandomString() restituisce solo una stringa compresa tra 0 e 22 caratteri.

Answer 3

MODIFICA: passando da ciò che hai rivelato nei tuoi commenti suggerirei che il problema è più probabile che sia con i tuoi dati che con la tabella. Dovrai eseguire alcuni test utilizzando dati, elementi e tecniche di layout diversi per stabilire dove si trova il problema. In particolare, cerco:

• oggetto, iframe o elementi nativi (inclusi gli elementi del modulo).
• duplicato attributi id
• entità escape
• tag nel flusso di dati, in particolare </td>, </tr> and </table>
• colspans

righe hmmm .. sembra un'indicazione non si utilizza HTML valido (non chiusura o qualcosa). Esegui un sottoinsieme del tuo tavolo attraverso un validatore.

layout di tabella: fisso (per risposta di Jack) deve essere eseguito il rendering fino a quando non si blocca. Sembra che non sappia qualcosa sul tavolo in anticipo (come la sua larghezza). Prova a impostare la larghezza su un valore di pixel e usa gli elementi col.

<table style='table-layout:fixed; width:800px'> 
    <col style="width:200px"> 
    <col style="width:600px"> 
    <tr> 
    ... 

Answer 4

È forse qualcosa a che fare con i dati? Ho appena creato una semplice pagina ASP.NET che crea una tabella di 50k row e firefox lo rende perfetto.

protected void Page_Load(object sender, EventArgs e) 
{ 
    StringBuilder sb = new StringBuilder(); 
    sb.Append("<table><tbody>"); 
    for (int i = 0; i < 50000; i++) 
    { 
     sb.Append("<tr><td>My Name</td><td>my@email.com</td></tr>"); 
    } 
    sb.Append("</tbody></table>"); 
    Response.Write(sb.ToString()); 
} 

Answer 5

Suggerirei di utilizzare Paginazione per un set di dati di tale dimensione. ExtJS ha un GridPanel molto carino, che è facile da implementare (puoi guardare il codice sorgente degli esempi come guida), e se vuoi qualcosa non così "estremo" (come in, non cambia l'aspetto e -fatto del tavolo), jQuery ha anche qualche impaginazione AJAX.

Answer 6

Un altro pensiero

Quanto tempo le informazioni occorre per inviare? È bufferizzato sul lato server? Potrebbe avere a che fare con la gestione della connessione di firefox anziché il rendering.

Answer 7

Penso che gran parte del problema sia che Firefox (almeno le versioni precedenti, questo potrebbe essere stato risolto nel momento in cui questo messaggio viene letto) tende ad usare molta memoria da solo anche quando non succede nulla di grave .

Il caricamento di un'enorme quantità di dati significherebbe richiedere ancora più risorse di memoria e CPU di quanto non faccia normalmente, e normalmente richiede molto dal sistema. Quindi se la quantità di dati era enorme, potrebbe utilizzare tutte le risorse e Firefox è abbastanza educato da rinunciare piuttosto che mandare in crash il computer.

Suppongo che le prestazioni varierebbero se si provasse su un sistema di fascia molto bassa rispetto a un sistema di fascia alta con molta memoria e CPU veloce.

Ovviamente dipende anche da cosa intendi per incidente. Il significato preciso di crash è che smette di funzionare e si interrompe, mentre si potrebbe parlare solo di appendere (smette di funzionare ma non si chiude) nel qual caso è possibile che funzioni ancora, ma fatica a rendere la pagina prima di te perdere la pazienza.

Se chiudi manualmente Firefox prima del rendering della pagina, tecnicamente non conta come un arresto anomalo, semplicemente un blocco o se l'utente non è stato abbastanza paziente da attendere il caricamento della pagina (ovviamente c'è un limite alla pazienza di chiunque!).

Answer 8

Ho lo stesso problema. Fondamentalmente Firefox scorre molto lentamente quando viene mostrata la tabella (30 righe e circa 50 colonne). Non appena la tabella non è più visibile, il browser scorre di nuovo velocemente. Quindi immagino sia un problema di rendering o aggiornamento del display.

Answer 9

anche Firefox non è in realtà preferito del browser - standard HTML5 che funziona su Chrome e Opera perfettamente, non funziona davvero su Firefox