HTML/CSS pas renderen van data na een click?

[Red devil]

Beste tweakerts,

Voor een visualisatie gebruik ik bepaalde boom structuren, op basis van HTML en CSS. Hier is een voorbeeld van een dergelijke visualisatie: https://codepen.io/P233/details/Kzbsi



Mijn bestaande setup creeert een aantal bestanden om verschillende bomen te visualiseren, in sommige gevallen kan zo'n boom redelijk groot worden waardoor het renderen tijd kan kosten.

Echter, voor een nieuwe implementatie ben ik genoodzaakt om alle bomen in 1 HTML file te zetten. Nu ben ik op zoek naar een methode waarbij ik de bomen bijv eerst hide onder een knop waarbij ze pas gerendered worden als er op die knop gedrukt wordt. Is zoiets mogelijk en in welke richting moet ik zoiets zoeken? Of worden die boompjes in HTML/CSS altijd al gerendered, ook al staan ze verborgen?

[KabouterSuper]

Ja, zoiets is zeker mogelijk. Met javascript is dit prima te programmeren. Ik heb in het verleden (2004) wel eens zoiets gemaakt in javascript. Die boomstructuur kon inklappen en uitklappen door op de blokken te klikken.

Maar, heb je getest hoe lang het renderen duurt?

[DJMaze]

Kijk eens naar het <template> element.
En dan icm JavaScript kan je alle kanten op.

[ Voor 37% gewijzigd door DJMaze op 30-08-2020 11:03 ]

[Red devil]

KabouterSuper schreef op zondag 30 augustus 2020 @ 10:17:
Ja, zoiets is zeker mogelijk. Met javascript is dit prima te programmeren. Ik heb in het verleden (2004) wel eens zoiets gemaakt in javascript. Die boomstructuur kon inklappen en uitklappen door op de blokken te klikken.

Maar, heb je getest hoe lang het renderen duurt?

Thanks. Heb dus op dit moment al een implementatie met die bomen en soms duurt het een tijdje voordat ze op het scherm staan. Zit ook wel redelijk wat meta-data onder, zal het ook niet sneller maken.

DJMaze schreef op zondag 30 augustus 2020 @ 11:02:
Kijk eens naar het <template> element.
En dan icm JavaScript kan je alle kanten op.

Goede tip, ik ga er mee bezig.

[Ed Vertijsment]

Voordat we allemaal fancy moeilijke webcomponent meuk gaan doen, werkt een simpele combinatie van display: none; en visibility: hidden; niet op verborgen elementen? Simpele toggle erop en klaar?

[Red devil]

Ed Vertijsment schreef op maandag 31 augustus 2020 @ 11:25:
Voordat we allemaal fancy moeilijke webcomponent meuk gaan doen, werkt een simpele combinatie van display: none; en visibility: hidden; niet op verborgen elementen? Simpele toggle erop en klaar?

Ga ik ook meenemen, ga komende dagen dingen testen!

[MKoole]

Ik zou eerst de Visibility kijken of dat een uitkomst is.

Als er toch een render impact is voor de invisble elementen, kan je kijken naar de HTML elementen pas toevoegen aan de DOM na een specifieke handeling (button click bijv.)

JQuery zou dit proces, HTML elementen creeeren, voor je kunnen versimpelen. Je zal dan wel de struktuur in JS moeten vastleggen. (Of ophalen van de server).

[Red devil]

MKoole schreef op maandag 31 augustus 2020 @ 13:29:
Ik zou eerst de Visibility kijken of dat een uitkomst is.

Als er toch een render impact is voor de invisble elementen, kan je kijken naar de HTML elementen pas toevoegen aan de DOM na een specifieke handeling (button click bijv.)

JQuery zou dit proces, HTML elementen creeeren, voor je kunnen versimpelen. Je zal dan wel de struktuur in JS moeten vastleggen. (Of ophalen van de server).

Begrijp ik goed dat er dan met visibility sowieso wordt gerendered maar dan onder de motorkap? Want ik heb al geconstateerd dat er een render impact is met grote bomen.

[DJMaze]

Red devil schreef op maandag 31 augustus 2020 @ 13:30:
Begrijp ik goed dat er dan met visibility sowieso wordt gerendered maar dan onder de motorkap? Want ik heb al geconstateerd dat er een render impact is met grote bomen.

Ja, want van elk element moet berekend worden hoe groot het is.

display:none kan ook, maar dan moet nog steeds alle elementen gemaakt worden.

Als je een json hebt van de structuur kan je de elementen creeren wanneer nodig.
HtmlTemplateElement is daarbij handig omdat je daarin bijvoorbeeeld ook gewoon <td> kan stoppen zonder gezeur.
Je cloned dan gewoon elke keer de inhoud van de <template> en vult die met de nodige data.
Hierbij verplaatst je dus de CPU rekenkracht naar de client ipv dat je server het steeds moet doen (mits het niet statisch is).

[ Voor 8% gewijzigd door DJMaze op 31-08-2020 19:37 ]

[Postman]

Hierbij verplaatst je dus de CPU rekenkracht naar de client ipv dat je server het steeds moet doen (mits het niet statisch is).

De vraag is dan waar momenteel de bottleneck zit. Renderen kun je interpreteren als de DOM (dus client side, zou zie ik het) of het schrijven van alle HTML aan de server.

[edeboeck]

DJMaze schreef op maandag 31 augustus 2020 @ 19:36:
[...]

Ja, want van elk element moet berekend worden hoe groot het is.

display:none kan ook, maar dan moet nog steeds alle elementen gemaakt worden.

Nochtans is er een groot verschil tussen visibility:hidden en display:none: waar de eerste wel degelijk volledig berekend wordt, maar enkel "op het einde" niet getoond wordt (maar wel de ruimte inneemt die het blok zou innemen indien het getoond zou worden), wordt de tweede mogelijkheid compleet genegeerd bij het renderen... zeker in een boom met veel elementen mag je hier performantieverschil verwachten. (bron)

MKoole schreef op maandag 31 augustus 2020 @ 13:29:
Ik zou eerst de Visibility kijken of dat een uitkomst is.[...]

Dat wil je nu net niét gebruiken om de performantie te verbeteren (het enige voordeel van visibility:hidden is dat uw content niet volop gaat schuiven).