Waarom CSS Ingeladen Moet Worden Voor JS

Vorige week heb ik uren gespendeerd aan het debuggen van een stuk Javascript code. De oplossing was kinderlijke eenvoudig, maar tot mijn grote verbazing was er weinig over te vinden op het internet: laad je CSS bestanden in voordat je JS bestanden inlaad. Laten we wat details bespreken:

Foto credits: Kaiban

Het ziet er beter uit

Wat zie je liever gebeuren tijdens het laden van je website:

• Wit scherm > ongestijlde website > gestijlde website > interactie > gestijlde en interactieve website
• Wit scherm > ongestijlde website > interactie > gestijlde website > gestijlde en interactieve website

Ik kan me niet voorstellen dat iemand kiest voor de laatste optie. Dit zou betekenen dat bezoekers die gebruik maken van een langzame internetverbinding eerst een ongestijlde website zullen zien, waarmee ze al wel kunnen interacteren door middel van Javascript (die is immers al geladen). Verder wordt het aantal seconden dat er wordt gekeken naar een ongestijlde website gemaximaliseerd op deze manier. Waarom zou iemand dat willen?

Het werkt beter

In de jQuery documentatie staat dat 'Wanneer je gebruik maakt van scripts die afhankelijk zijn van waardes uit CSS stijlen, dan is het belangrijk dat externe stylesheets of inline stijlelementen wordt aangeroepen voor deze scripts (vertaald)'. Hoewel ik er geen directe vermelding over kan vinden in de MooTools documentatie, laden zij wel overduidelijk hun CSS bestanden in voor hun JS bestanden op hun demo website.

Wanneer de bestanden in de verkeerde volgorde worden ingeladen (eerst JS, dan CSS), al Javascript code die afhankelijk is van waardes in het CSS bestand (bijvoorbeeld de hoogte of breedte van een div) niet goed ingeladen worden. Het lijkt er op dat met een verkeerde volgorde, de correcte waardes 'soms' bekend zijn bij Javascript. Dit effect lijkt groter of kleiner afhankelijk van de gebruikte webbrowser.