[javascript] Site langzaam door javascripts

[Verwijderd]

Ik heb een website ontwikkeld voor een touroperator, maar de inlaadtijd is gigantisch hoog.
Ik ben erachter gekomen dat deze tijd veroorzaakt wordt door de grote hoeveelheid javascripts die ik verwerkt heb in de internet pagina.
Ik heb alle javascripts in js bestandjes gestopt die ik vervolgens in de header heb geplaatst.
Hoe kan ik, zonder javascripts te verwijderen, de site toch sneller laten inladen.
Ik kan natuurlijk een omweg maken door met een asp script alleen de javascripts te laden die hij op dat moment nodig heeft, maar ik heb liever een andere oplossing.

[André]

Wat is de echte bottleneck dan? Zijn de scripts traag of zijn er teveel kb's?

[Verwijderd]

André schreef op 02 juni 2004 @ 11:06:
Wat is de echte bottleneck dan? Zijn de scripts traag of zijn er teveel kb's?

Ik denk zelf een combinatie van beide. Maar de hoeveelheid kb's doet het em. Want ik heb een test opstelling gemaakt om te kijken of misschien 1 enkel javascript de boosdoener was, maar dit was niet het geval. Naarmate er mee javascripts inkwamen werd de site trager.

[BtM909]

Wordt de site traag vanwege de hoeveelheid data (.htm en .js files) of door de werking van de javascripts?

edit:
Of ben ik gewoon traag

Verwijderd schreef op 02 juni 2004 @ 11:08:
[...]

Ik denk zelf een combinatie van beide. Maar de hoeveelheid kb's doet het em. Want ik heb een test opstelling gemaakt om te kijken of misschien 1 enkel javascript de boosdoener was, maar dit was niet het geval. Naarmate er mee javascripts inkwamen werd de site trager.

Het is sowieso handig om grote JavaScript gedeeltes extern te plaatsen vanwege caching. Maar hoe groot is de totale index (incl. js files)?

[ Voor 81% gewijzigd door BtM909 op 02-06-2004 11:11 ]

[McVirusS]

Heb je niet toevallig een linkje naar de site? We kunnen moeillijk helpen met optimaliseren als we niet weten wat die scripts doen en dergelijke. Hoe groot zijn de JS bestanden bij elkaar? Als bestandsgrootte het probleem is dan zou je daar lokaal geen last van moeten hebben. Als het ook lokaal langzaam werkt dan moet je denk je scripts gaan optimaliseren. Maar nogmaals; daar kunnen we je niet mee helpen als we niet weten wat die scripts doen en dergelijke .

[Bosmonster]

M.a.w.: Om hoeveel scripts (KB) gaat het en wat doen ze?

Dat was dus VOOR McV gepost!

[ Voor 23% gewijzigd door Bosmonster op 02-06-2004 11:11 ]

[McVirusS]

Anders vat jij mijn post ff samen .

[Bosmonster]

Tja sommige mensen hebben 5 regels nodig...

[André]

Anders zijn jullie allemaal laat (vooral BtM909)

[Verwijderd]

http://www.bonaviatours.com

het gaat om:
<script language="javascript1.2" src="layer.js" type='text/javascript'></script>
<script language="javascript1.2" src="slideshow.js" type='text/javascript'></script>
<script language="javascript1.2" src="window.js" type='text/javascript'></script>
<script language="javascript1.2" src="validate.js" type='text/javascript'></script>
<script language="javascript1.2" src="months.js" type='text/javascript'></script>
<script language="javascript1.2" src="calculate.js" type='text/javascript'></script>
<script language="javascript1.2" src="typeroom.js" type='text/javascript'></script>

kb's: 37,2

[BtM909]

André schreef op 02 juni 2004 @ 11:14:
Anders zijn jullie allemaal laat (vooral BtM909)

Ey, STFU....

_{Soms wou ik dat ik Mod was... Kon ik André mijn stick laten voelen}

[André]

Oke, na een korte eerste blik kom ik direct tot het oordeel dat zoveel js script niet nodig zijn. Die site ziet er verschrikkelijk simpel uit. Dus flikker alle overbodige troep er uit en KISS.

BtM909 schreef op 02 juni 2004 @ 11:15:
[...]

Ey, STFU....

_{Soms wou ik dat ik Mod was... Kon ik André mijn stick laten voelen}

Muahaha, het is niet de eerste keer dat je laat bent

[ Voor 41% gewijzigd door André op 02-06-2004 11:17 ]

[BtM909]

André schreef op 02 juni 2004 @ 11:16:
Oke, na een korte eerste blik kom ik direct tot het oordeel dat zoveel js script niet nodig zijn. Die site ziet er verschrikkelijk simpel uit. Dus flikker alle overbodige troep er uit en KISS.

Daarnaast maak je hevig gebruik van geneste tabellen, waarbij content (in IE) dus vaak pas wordt weergegeven, indien de laatste </table> tag wordt gezien...

Het valt me trouwens ook op dat je .asp gebruikt. Wordt er nog wat gepreprocessed, wat vertraging kan opleveren?

edit:

André, speciaal voor jou: dit is een aanvulling op jouw verhaal. Ben nu dus niet te laat

[ Voor 23% gewijzigd door BtM909 op 02-06-2004 11:19 ]

[Verwijderd]

André schreef op 02 juni 2004 @ 11:16:
Oke, na een korte eerste blik kom ik direct tot het oordeel dat zoveel js script niet nodig zijn. Die site ziet er verschrikkelijk simpel uit. Dus flikker alle overbodige troep er uit en KISS.

ja..de site lijkt simpel. Maar daar zit het em in. Het is belangrijk voor dit project om de site simpel te houden ivm gebruiksvriendelijkheid.
De module die de meeste javascripts gebruikt is op dit moment gedeactiveerd. Dat is de bookings module.
Deze zal binnenkort ook online komen.

[Verwijderd]

aan BTM:

Neeh de asp is niet vertragend, want ik heb geprobeerd alle javascripts te verwijderen en toen liep ie wel snel.

Ik denk idd dat het wel iets met caching te maken kan hebben...zal eens even checken.

[ Voor 27% gewijzigd door Verwijderd op 02-06-2004 11:23 ]

[André]

Verwijderd schreef op 02 juni 2004 @ 11:19:
[...]

ja..de site lijkt simpel. Maar daar zit het em in. Het is belangrijk voor dit project om de site simpel te houden ivm gebruiksvriendelijkheid.
De module die de meeste javascripts gebruikt is op dit moment gedeactiveerd. Dat is de bookings module.
Deze zal binnenkort ook online komen.

Hoe kan een boekingsmodule nou veel js gebruiken? Het zijn hooguit een paar dynamische pulldowns enzo, de rest kun je server-side allemaal processen.

Never trust user input, dus valideren en dat soort zaken moet je ook allemaal server-side doen, scheelt weer een paar kb's.

[Verwijderd]

hmmm...neeh maar er is meer. Het gaat hier ook om calculatie van de datum.
Bijv. ik selecteer de aankomst datum en het aantal nachten. Een javascript zorgt er dan voor dat automatisch de vertrekdatum wordt gegenereerd.

[Johnny]

Ik zou die browserchecks voor NS4 en IE4 er uit gooien, en gewoon overal getElementById gebruiken.

Vervolgens kun je alle javacsripts die je op iedere pagina nodig hebt het beste in een enkel bestand steken, dat gaat altijd nog sneller dan meerdere losse bestanden.

Als je bepaalde javascripts alleen in de boekingsmodule nodig hebt dan moet ej ze nog niet op de homepage laden. Laad alleen wat je nodig hebt, deze blijven dan in het cache en als je later nog meer javascript nodig hebt kun je het dan laden.

Verder zit er nog allerei javascript in je HTML zelf, dat hoort daar niet. Het opruimen van je HTML code (CSS?) zou ook enorm kunnen schelen.

[Verwijderd]

Dit is de search engine van de bookings engine.

[André]

Verwijderd schreef op 02 juni 2004 @ 11:26:
hmmm...neeh maar er is meer. Het gaat hier ook om calculatie van de datum.
Bijv. ik selecteer de aankomst datum en het aantal nachten. Een javascript zorgt er dan voor dat automatisch de vertrekdatum wordt gegenereerd.

Er zijn mensen die Wolfenstein / Pac-man / Tetris nabouwen in 5k code (zie de 5k contests) en jij hebt voor die site 37k nodig? Een datum script is een paar regeltjes, zo ook de andere scripts. Eerst alle overbodige troep er maar eens uit halen.

Verwijderd schreef op 02 juni 2004 @ 11:29:
[afbeelding]
Dit is de search engine van de bookings engine.

Alleen voor de vertrekdatum ben je een script nodig en de rest valideer je serverside.

[ Voor 21% gewijzigd door André op 02-06-2004 11:32 ]

[Verwijderd]

Verwijderd schreef op 02 juni 2004 @ 11:14:
http://www.bonaviatours.com

het gaat om:
<script language="javascript1.2" src="layer.js" type='text/javascript'></script>
<script language="javascript1.2" src="slideshow.js" type='text/javascript'></script>
<script language="javascript1.2" src="window.js" type='text/javascript'></script>
<script language="javascript1.2" src="validate.js" type='text/javascript'></script>
<script language="javascript1.2" src="months.js" type='text/javascript'></script>
<script language="javascript1.2" src="calculate.js" type='text/javascript'></script>
<script language="javascript1.2" src="typeroom.js" type='text/javascript'></script>

kb's: 37,2

37,2 KB valt toch reuze mee? Of mag je tegenwoordig er nog niet vanuit gaan dat jan en allemaal breedband heeft?

Bovendien vind ik dat je ook client-side hoort te valideren. Dus zowel client-side als server-side. Niets vind ik zo irritant als een formulier invullen, of verzenden drukken, refresh afwachten en dan het bericht krijgen dat er geen spaties tussen het telefoonnummer mogen

[Verwijderd]

Bedankt jongens...ik ben nu al een heel stuk verder. Ik heb de javascriptjes een beetje verplaats. Dit helpt al een heel stuk.

[André]

Verwijderd schreef op 02 juni 2004 @ 11:42:

37,2 KB valt toch reuze mee? Of mag je tegenwoordig er nog niet vanuit gaan dat jan en allemaal breedband heeft?

Nee, er zijn nog altijd mensen met een lite-abbo of met 56k6, daar komt bij dat ik ook al had ik breedband dat ik het prettiger vind dat een site binnen 1 seconde op mijn scherm staat ipv 3.

Bovendien vind ik dat je ook client-side hoort te valideren. Dus zowel client-side als server-side. Niets vind ik zo irritant als een formulier invullen, of verzenden drukken, refresh afwachten en dan het bericht krijgen dat er geen spaties tussen het telefoonnummer mogen

Daar is wat voor te zeggen bij trage servers, maar als de server snel genoeg is is die interactie ook maar een kwestie van een fractie van een seconde.

[Bosmonster]

Verwijderd schreef op 02 juni 2004 @ 11:42:
[...]

Bovendien vind ik dat je ook client-side hoort te valideren. Dus zowel client-side als server-side. Niets vind ik zo irritant als een formulier invullen, of verzenden drukken, refresh afwachten en dan het bericht krijgen dat er geen spaties tussen het telefoonnummer mogen

Dan is de server te traag. Maar belangrijker.. het systeem te dom om zelf een spatie weg te halen. Fouten in formulieren worden relatief weinig gemaakt als het formulier enigszins vriendelijk is opgezet (als je weet welke velden verplicht zijn etc).