jQuery soms retetraag, hebben jullie dat ook?

[wustenveld]

Op onze website laadt jQuery soms retetraag en duurt het een paar seconden. Als ik in het webinfovenster naar het tabblad Netwerk kijk wordt het script uit het geheugen geladen, het is dus niet dat een download lang duurt. Het is ook niet iedere keer, meestal vliegt hij er in maar er zijn ook momenten dat je een paar seconden geduld moet hebben.

We hebben ook al op de server gekeken of daar dingen trager zijn, maar de pagina wordt heel snel gegenereerd en naar de browser gestuurd. Het lijkt echt op een ding in de browser. Zowel in Safari als in Chrome komt dit probleem voor.

Heeft iemand dit al eens tegengekomen met jQuery en zo ja, mag ik weten wat je er aan gedaan hebt om het te verhelpen?

[mcDavid]

Ik ben geen javascript developer, maar de logische stap is om te gaan profilen? Volgens mij kunnen de meeste browsers dat gewoon vanuit de development console.

[Gertjuhjan]

Word de jquery geladen van een CDN of lokaal?

[emnich]

Begin eens met meten want rente traag en hij vliegt erin is moeilijk te kwantificeren.

En wat is traag, het laden het bestand of tot jQuery iets gaat doen? Want dan kan het zijn dat iets anders vertraagd is waardoor het document nog niet klaar is.

[_NooT_]

Ik kan geen reden bedenken waarom specifiek query langzaam zou kunnen laden.
Hetgeen ik meer voor de hand vind liggen, is dat er een script wordt geladen dat niet goed functioneert.
Of in ieder iets anders dat het renderen van de pagina blokkeert.

Ik vermoed dat je bedoelt dat het lang duurt voordat een jquery script wordt uitgevoerd.
Dat is namelijk veel beter te verklaren. In de meeste gevallen wordt een jquery script pas uitgevoerd na het OnDocumentReady (vanwege verwijzingen naar elementen in de DOM).
'Vroeger' was dit duidelijker, omdat je dan $( document ).ready() moest gebruiken.
'Tegenwoordig' wordt voornamelijk de shorthand versie gebruikt, namelijk $(function() {}).
Dit betekent dat je stukje script pas wordt uitgevoerd als de gehele pagina en content is ingeladen.


Heb je gekeken of het probleem ook optreedt als je een kale pagina inlaadt, met verder alleen jquery?

[Juup]

Dat komt misschien omdat je voor een simpele homepage al 57 requests doet met totaal 5.27 MB verzonden.
Je weet dat er ook mensen zijn met trage verbindingen he?

[R4gnax]

_NooT_ schreef op dinsdag 12 februari 2019 @ 13:21:
Dit betekent dat je stukje script pas wordt uitgevoerd als de gehele pagina en content is ingeladen.

Nee. Dat betekent het niet.

De ready van jQuery hangt vast aan het DOMContentLoaded event en deze vindt plaats zodra de HTML van de pagina volledig geparsed is en de DOM tree compleet is.

Lopende requests voor secundaire resources zoals stylesheets, plaatjes, video-fragmenten, etc. evenals de inhoud van bijv. iframes wordt voor dit event niet op gewacht. Enkel parser-blocking resources krijgen dat voor elkaar. En die groep bestaat momenteel eigenlijk alleen uit <script> elementen die niet als async of defer gemarkeerd zijn.

[ Voor 16% gewijzigd door R4gnax op 12-02-2019 19:47 ]

[wustenveld]

Ik heb het met een CDN en als ik lokaal laad. Echter staat het script al in de lokale cache en kan ik zien dat hij hem uit het geheugen haalt.

Traag is dat hij 6 seconden wacht voordat de browser jquery inlaadt en verder gaat met de handelingen. Terwijl het normaal zo'n < 100 ms duurt om de pagina volledig op het scherm te hebben.

Het is niet iedere keer, het is echt eens in de zoveel tijd duurt het een paar seconden voordat de browser hem laad. En "hem" is dan jquery.min.js. Het gaat dus niet eens om het uitvoeren van een script $(function()) maar echt gewoon het laden van het bestand zelf, die handelingen komen pas daarna.

[_NooT_]

R4gnax schreef op dinsdag 12 februari 2019 @ 19:45:
[...]


Nee. Dat betekent het niet.

De ready van jQuery hangt vast aan het DOMContentLoaded event en deze vindt plaats zodra de HTML van de pagina volledig geparsed is en de DOM tree compleet is.

Lopende requests voor secundaire resources zoals stylesheets, plaatjes, video-fragmenten, etc. evenals de inhoud van bijv. iframes wordt voor dit event niet op gewacht. Enkel parser-blocking resources krijgen dat voor elkaar. En die groep bestaat momenteel eigenlijk alleen uit <script> elementen die niet als async of defer gemarkeerd zijn.

Je hebt gelijk. Ik verwar het met het load event.


@wustenveld: je geeft nog steeds vrij weinig informatie waarmee we je kunnen helpen (of ik lees niet goed).

Treedt het probleem in alle onderstaande gevallen op?

• Laden pagina inclusief jQuery en verder helemaal niets
• Laden andere versie jQuery
• Aanpassen bestandsnaam jQuery
• Treedt het probleem ook op op andere apparaten / andere netwerkomgeving? (vast wel, maar ik vraag het toch)
• Gebruik je caching, zo ja, wat gebeurt er als je dit uitschakelt?
• Heb je het probleem ook wanneer de pagina('s) in kwestie vanaf een andere server geladen wordt/worden?

En zo zijn er nog wel meer factoren die kunnen meespelen.
Kwestie van alle niet relevante factoren elimineren om tot de kern van het probleem te komen en vervolgens kijken hoe je dit kan beïnvloeden/omzeilen.

Kan je misschien de link delen van de website/pagina waar het probleem optreed?

[q-enf0rcer.1]

jQuery is van zichzelf niet traag in ieder geval. De oorzaak ligt of bij de server waar jQuery vanaf wordt geserveerd of de code die jQuery aanspreekt. Beide heb je zelf invloed op.

[wustenveld]

Ik denk dat het toch ergens iets op de server mogelijk is. Door jullie goede vragen ben ik nog eens wat gaan testen en ontdekte ik dat ik de TTFB kan meten. Ik ben geen server-deskundige, maar een mooi support-artikel hielp me verder.

De TTFB is in de meeste gevallen goed, maar af en toe zit er dus die dip in van bijvoorbeeld 10 seconden. Het zit 'm dus niet in die jQuery. Ik heb wat screenshots verstuurd naar de partij die m'n server host en onderhoud en gevraagd wat ze hieraan kunnen doen. Ik las allerlei stappen die ik zou kunnen doen om verbetering te brengen, maar daar heb ik geen toegang toe.

Ik ben in ieder geval weer een stuk verder met m'n speurtocht. Dank jullie wel voor de goede vragen!!

[Verwijderd]

Probeer eens je browsercache te legen en het opnieuw te proberen. Kan best zijn dat je 10000 cache files hebt en je hardeschijf niet zo snel is...

[gitaarwerk]

Als je in chrome dev tools opentrekt, je network tab opent.. en je snelheid laag zet, kun je heel mooi zien wanneer wat geladen word. Het kan aan veel dingen liggen...

Het kan ook zijn dat je veel langzame scripts afvuurt voordat je jQuery inlaad, bijvoorbeeld.

Voorbeelden kunnen zijn;
- page load event met grote afbeeldingen en derde scripts
- veel scripts voorafgaan die direct worden uitgevoerd voordat jQuery aan de beurt is
- is je CSS traag? (single pagers kunnen meer bevatten)


Check om meer te weten vooral artikelen van Addy Osmani en Paul Irish. Het is lastig om zonder iets echt aan te wijzen.