Inhoudsopgave
Een van de problemen die veel toepassingen hebben, is dat hoewel ze de inhoud snel laden, ze niet snel worden gezien in de browser van de gebruiker, dat wil zeggen dat de browser klaar is met het laden van alle inhoud, alle afbeeldingen en alle CSS Y JS, maar er is een kleine vertraging tussen wat we laden en wat we zien.Dit komt grotendeels door de positie van de bestandsuploads in de HTML, dat wil zeggen, we hebben waarschijnlijk de CSS en de JS gemengd en dit maakt het moeilijk voor de browser om alles weer te geven zoals bij het laden van een bestand JS u moet het verwerken voordat u doorgaat naar het volgende bestand.
De eerste aanbeveling is altijd om de stijlbestanden te plaatsen als de CSS bovenaan onze HTML, stelt dit ons in staat om de browser de applicatiepagina zo snel mogelijk progressief weer te geven.
Op deze manier vermijden we dat we vele seconden een blanco pagina zien voordat alles wordt geladen, anders zien we hoe de pagina geleidelijk wordt opgebouwd, dit is een verademing voor gebruikers, vooral degenen die een langzamere verbinding met het netwerk of internet hebben .
Als de stylesheets of CSS onderaan staan, zullen browsers de informatie normaal gesproken niet laden om te voorkomen dat ze de stijl moeten veranderen zodra ze dat punt hebben bereikt, waardoor de gebruiker niets ziet.
Het doel hiervan is dat de browser door kan gaan met het laden van de bronnen van de pagina, want als het een JS-bestand vindt totdat het het zonder fouten laadt, zal het niet doorgaan met het downloaden van andere bronnen, zelfs als ze zich in een CDN.
Waar de JS-bestanden te plaatsen?Hiervoor plaatsen we de bestanden JS zo ver terug als we kunnen in onze HTML, hoewel er gevallen zijn dat het niet mogelijk is vanwege de structuur van de applicatie, dan kunnen we het attribuut plaatsen verschuiven waarmee we de browser vertellen dat hij deze aan het einde van alles kan laden.
Het probleem met het attribuut verschuiven is dat niet alle browsers het op dezelfde manier interpreteren, dus soms kan het niet doen wat we denken, maar als we een bestand kunnen plaatsen, betekent dit attribuut dat het naar het einde kan worden verplaatst.
Laten we in de volgende afbeelding zien hoe het laden van een pagina verloopt, in het eerste deel staan de bestanden allemaal bovenaan en in willekeurige volgorde, in het tweede deel zijn de CSS op en de JS omlaag:
Hiermee voltooien we deze tutorial, we kunnen nu een nieuw element toevoegen om de snelheid en prestaties van onze applicatie te verbeteren, naast het verminderen van de wachttijd van de gebruiker om te zien wat zijn browser laadt.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven
