[TABLE] Hoe tabellen plaatsen

[André]

Iedereen die webpagina's maakt zit met het volgende probleem:

Als ik een lading data uit een database trek en die in een tabel zet met bijvoorbeeld 10 kolommen en 500 rijen dan duurt het lang voordat de pagina gerenderd is.

Die lange wachttijd ligt niet aan de zoek query, want als ik een paar timers op een pagina gooi zie ik dat het database gedeelte enkele milliseconden duurt maar het maken van de tabel duurt enkele seconden.

Is het misschien een oplossing om de tags <table> <tr> <td> te vervangen door geneste <div>'s i.c.m. stylesheets. Is dit sneller of maakt dat niets uit

Welke oplossing(en) hebben mijn alom gerespecteerde medetweakers ooit gevonden omtrent dit probleem. Of sta ik (zoals mijn icon zegt) weer te lullen en gebruikt iedereen nog de <table>.

[AxiMaxi]

Ik denk dat 't 'm zit in de parsing van de tabel, dus de berekening van de afmetingen enzo.
Heb je het al 's geprobeerd met WIDTH in de <TABLE> en <TD>?

Misschien dat dat sneller gaat?

[Morrar]

Hmmz heb zelf wellis wat grote tabelletjes uitgespuugt en dat kan wellis duren ja... Denk niet dat divs echter veel op gaan lossen, maar heb het zelf dus niet getest. Enkele dingen waar je wel aan kan denken:

- gebruik zoveel mogelijk absolute waarden dat scheelt je browser een hoop rekenwerk...

- misschien idee om een browse-systeem te maken waardoor per pagina maar zeg 100 rijen tegelijk getoond worden. Is imho soms wel zo overzichtelijk...

[André]

AxiMaxi schreef op 06 september 2002 @ 12:57:
Ik denk dat 't 'm zit in de parsing van de tabel, dus de berekening van de afmetingen enzo.
Heb je het al 's geprobeerd met WIDTH in de <TABLE> en <TD>?

Misschien dat dat sneller gaat?

Ja dat heb ik al geprobeerd en maakt niets uit.

Wat ik wel gevonden heb is in de style van je tabel het volgende zetten: "table-layout:fixed". Dan gaat het iets sneller maar het nadeel is dat de formaten van de eerste cel het formaat van de andere cellen bepaald. Daardoor hoeft IE niet zoveel te renderen want de formaten van de cellen staan al vast, maar mooi is anders.

[TwoR]

Moet alles perse op 1 pagina staan?? Anders laat je het op 2 of drie pagina's komen dat scheeld denk ik heel vele tijd.

[André]

TwoR schreef op 06 september 2002 @ 13:03:
Moet alles perse op 1 pagina staan?? Anders laat je het op 2 of drie pagina's komen dat scheeld denk ik heel vele tijd.

Ik weet precies wat er mogelijk is met asp php xml enz enz, en dat het op meer pagina's kan is mij ook wel duidelijk.

Maar mijn vraag gaat alleen over het renderen van tabellen...

[Expander]

Wat voor tags je gebruikt maakt voor het maken van die tags niets uit.

Met andere woorden: je probleem ligt aan de server-side kant en heeft eigenlijk helemaal niets met tabellen te maken.

[André]

Expander schreef op 06 september 2002 @ 13:15:
Wat voor tags je gebruikt maakt voor het maken van die tags niets uit.

Met andere woorden: je probleem ligt aan de server-side kant en heeft eigenlijk helemaal niets met tabellen te maken.

Waar heb je het over??????????????????? LEZEN!
Wie heeft het over serverside?, ik heb het over client-side rendering van tabellen!!!

[disjfa]

Yogho schreef op 06 september 2002 @ 13:25:
[...]

Waar heb je het over??????????????????? LEZEN!
Wie heeft het over serverside?, ik heb het over client-side rendering van tabellen!!!

en daar moet toch die data in die je uit de db trekt

en dat duurt lang

anders maak je ze een bepaalde breedte, dan zijn ze dat iig al

[Willem]

disjfa:
en daar moet toch die data in die je uit de db trekt

en dat duurt lang

LEZEN LEZEN LEZEN LEZEN LEZEN LEZEN zeg ik je

Die lange wachttijd ligt niet aan de zoek query, want als ik een paar timers op een pagina gooi zie ik dat het database gedeelte enkele milliseconden duurt maar het maken van de tabel duurt enkele seconden.

[BtM909]

Heeft toch onder andere met de manier van renderen te maken in je browser.

Terugkomend op je vraag:

Is het misschien een oplossing om de tags <table> <tr> <td> te vervangen door geneste <div>'s i.c.m. stylesheets. Is dit sneller of maakt dat niets uit

Ik zou zeggen dat divs sneller zichtbaar moet zijn, omdat je niet op dezelfde manier rendered.

IE rendered (afhankelijk van je tabel-ontwerp) eerst de hele tabel en vervolgens showed ie de tabel in je browser.

Kan een leuke test worden (2000 rows of 2000 div's)

[André]

BtM909 schreef op 06 september 2002 @ 14:31:

JAAAAA, er is iemand die leest.

Inderdaad dat kan een leuke test worden. Ik ga met asp even 2 pagina's uitpoepen, dan view-source en dat even saven. Dan krijg ik 2 html pagina met tabellen: 1 met <td> en 1 met <div>.

Moment, i'm testing....

[BtM909]

I'm waiting

[André]

Uitslag test op een (zie specs) pc:

Ik heb door middel van asp 2 html's laten genereren, 1 met een 'ouderwetse' tabel en 1 met een tabel d.m.v <div>:

De tabel bestond uit 10 kolommen van 80px breed met het woordje "hallo" erin, en uit 20000 rijen.

De pagina met de <td> tags deed er gemiddeld 18,5 seconden over en de pagina met de <div> tags deed er gemiddeld 6,8 seconden over.

Conclusie: <tabel><tr><td> zijn deprecated vanaf nu. Je moet gewoon <div> gebruiken omdat dat veel sneller is. Je moet er dan wel rekening mee houden dat je het volgende in je stylsheet zet:

code:

DIV {
  display: inline;
}

Anders geeft IE na elke div een line-break.

[BtM909]

Mag ik de source van je asp-je?

[André]

BtM909 schreef op 06 september 2002 @ 16:14:
Mag ik de source van je asp-je?

Ja dat mag, moment.

ASP:

<%@ LANGUAGE="VBSCRIPT"%>
<html>
  <head>
    <title>Test</title>
    <style>
      DIV {
        border: 1px solid;
        position: relative;
        display: inline;
       }
    </style>
    <script language="javascript">
      d = new Date();
      BT = d.getTime();

      function Oke()
      {
        e = new Date();
        alert (e.getTime() - BT);
      }
    </script>
  </head>
  <body onload="Oke()" >
    <div>
      <%
      for x = 1 to 20000 step 1
        response.write "<div style='width:80px;'>Hallo</div><div style='width:80px;'>Hallo</div><div style='width:80px'>Hallo</div><div style='width:80px'>Hallo</div><div style='width:80px'>Hallo</div><div style='width:80px'>Hallo</div><div style='width:80px'>Hallo</div><div style='width:80px'>Hallo</div><div style='width:80px'>Hallo</div><div style='width:80px'>Hallo</div><br>"
      next
      %>
    </div>
  </body>
</html>

Deze file draaien en dan de output saven als een htm file. Dit is trouwens de asp die een <div> tabel maakte, die kun je zo weer omzetten naar <table><tr><td>.

[BtM909]

thanks! Altijd handig voor het archief

[Verwijderd]

tnx man, dit is hele nuttige informatie!

Dit is er echt eentje voor het archief! Ik werk zelf over het algemeen niet met tabellen van meer dan 100 rows, maar wat niet is kan nog komen, dit houd ik in gedachten.

Misschien is er een (lite-)mod die zich geroepen voelt de threadnaam te editten (paar belangrijke trefwoorden toevoegen) zodat users deze thread makkelijker met de search kunnen vinden? Dit zijn van die vragen die nog vaak terug zullen keren

_{Ik had trouwens niet verwacht dat er zo ontzettend veel tijdverschil tussen zou zitten, dit is een factor 3!}

[ Voor 0% gewijzigd door Verwijderd op 06-09-2002 22:54 . Reden: typo ]

[André]

Kick ^^^

Andere goeroe's nog reactie op deze verbluffende testresultaten.

[[eNeRGy]]

Probeer eens dezelfde test maar dan met de DOM zou ik zeggen.

[crisp]

[eNeRGy] schreef op 09 september 2002 @ 08:59:
Probeer eens dezelfde test maar dan met de DOM zou ik zeggen.

Het gaat niet om de snelheid van het aanmaken van de elementen, maar om de snelheid waarmee de browser de inhoud rendert.
Vaag trouwens dat IE6 weigert de div's inline weer te geven op het moment dat ik de width in de kop zet in plaats van inline...

[2]

Ik begrijp het niet. Waarom zou je in godsnaam zulke belachelijk grote tabellen willen gebruiken? Ik zou daar sowieso al een andere oplossing voor zoeken.

[André]

2 schreef op 09 september 2002 @ 10:00:
Ik begrijp het niet. Waarom zou je in godsnaam zulke belachelijk grote tabellen willen gebruiken? Ik zou daar sowieso al een andere oplossing voor zoeken.

Die belachelijk groote tabellen zijn alleen om mee te testen zodat de resultaten duidelijker zijn.

Want als je met een tabel van 1x1 test, is er niet zo veel verschil he...

[Verwijderd]

2 schreef op 09 september 2002 @ 10:00:
Ik begrijp het niet. Waarom zou je in godsnaam zulke belachelijk grote tabellen willen gebruiken? Ik zou daar sowieso al een andere oplossing voor zoeken.

Kijk dan zeg je gewoon: "Wat een gelul! Yogho zeker!"

[Verwijderd]

crisp schreef op 09 september 2002 @ 09:04:
[...]
Vaag trouwens dat IE6 weigert de div's inline weer te geven op het moment dat ik de width in de kop zet in plaats van inline...

Dat is niet vaag, dat is CSS. Mozilla gaat het ook niet goed doen. Dat komt, omdat ze bij w3c hebben bepaald dat een inline-element geen breedte kent.

Ik vind het overigens best wel irritant dat dat zo is

[[eNeRGy]]

crisp schreef op 09 september 2002 @ 09:04:
[...]

Het gaat niet om de snelheid van het aanmaken van de elementen, maar om de snelheid waarmee de browser de inhoud rendert.
Vaag trouwens dat IE6 weigert de div's inline weer te geven op het moment dat ik de width in de kop zet in plaats van inline...

Er is wel degelijk een verschil, als je namelijk een grote tabel in je source hebt duurt het langer voordat je browser gaat tekenen, oudere browsers wachten zelfs tot het einde van de tabel, met DOM kan je regel voor regel inserten, dus staat het resultaat al eerder op je scherm.

Verwijderd schreef op 09 september 2002 @ 13:10:
[...]

Dat is niet vaag, dat is CSS. Mozilla gaat het ook niet goed doen. Dat komt, omdat ze bij w3c hebben bepaald dat een inline-element geen breedte kent.

Ik vind het overigens best wel irritant dat dat zo is

Daar zijn de inline-tables voor gekomen denk ik?

[André]

[eNeRGy] schreef op 09 september 2002 @ 13:19:
Er is wel degelijk een verschil, als je namelijk een grote tabel in je source hebt duurt het langer voordat je browser gaat tekenen, oudere browsers wachten zelfs tot het einde van de tabel, met DOM kan je regel voor regel inserten, dus staat het resultaat al eerder op je scherm.

Ja maar als een gedeelte van een tabel al op het scherm staat en in een bepaalde cel komt heel veel content te staan moet hij de hele kolom van breedte veranderen. En als je dus een hele lange tabel hebt zie je iedere keer diverse kolommen van breedte veranderen totdat de tabel klaar is. En daar gaat meer tijd inzitten dan als hij van te voren precies weet hoe breed alle kolommen moeten zijn en dat in 1 keer op het scherm pleurt.

[2]

Yogho schreef op 09 september 2002 @ 10:44:
[...]

Die belachelijk groote tabellen zijn alleen om mee te testen zodat de resultaten duidelijker zijn.

Want als je met een tabel van 1x1 test, is er niet zo veel verschil he...

duh?

Ik had het over de 500 rijen en 10 kolommen waar de Topicstarter mee kwam.

(zoals de waard is ..?)

[[eNeRGy]]

2 schreef op 09 september 2002 @ 15:40:
[...]


duh?

Ik had het over de 500 rijen en 10 kolommen waar de Topicstarter mee kwam.

(zoals de waard is ..?)

Mwah, ik heb iets gebouwd dat overweg moet kunnen met 60000 regels, alleen wordt het highlighten van en <tr> in IE gigatraag, Mozzie blijft wel heel snel.

[André]

2 schreef op 09 september 2002 @ 15:40:
[...]


duh?

Ik had het over de 500 rijen en 10 kolommen waar de Topicstarter mee kwam.

(zoals de waard is ..?)

Dat begrijp ik ook wel, temeer omdat ik ook de topicstarter ben.

[ Voor 0% gewijzigd door André op 09-09-2002 16:21 . Reden: typo ]