Tekst JavaScript Async SRC Geladen. Asynchrone downloaden JavaScript - Versnellen pagina met laden. Attributen toevoegen OFER OF ASYNC IN WORDPRESS
29.06.2020
Groeten, vrienden! Wist u dat het downloaden van JavaScript een van de meest smalle plaatsen in de uitvoering van de site is? Vandaag is mijn hoofdtaak om uit te leggen wat het script is en hoe het de snelheid en prestaties van de site beïnvloedt.
De browser laden Het script-tag stopt de weergave van de pagina totdat het script wordt gedownload en niet voldaan. De pagina is geblokkeerd en de browser reageert niet op de acties van de gebruiker. Vertragingstijd is afhankelijk van verschillende factoren:
configuraties
internetverbindingssnelheden
bestandsgrootte en andere ...
Om deze reden beveelt de Google PageSpeed \u200b\u200bInsights Site Downloads Snelle Analyzer aan te bevelen de JavaScript-code te verwijderen vanaf de bovenkant van de pagina die zijn weergave blokkeert. Goede praktijk is de plaatsing van scripts aan de onderkant van de site, bijvoorbeeld voor de sluitplaat
of asynchrone laden instellen.
Als de scriptcode de weergave van de bovenkant van de site beïnvloedt - neem het niet in een apart bestand, maar deze rechtstreeks in HTML insluiten.
JS kan de inhoud van de site wijzigen en zelfs worden omleid naar een andere URL. In dit geval zal de scriptverbinding aan het einde van het document leiden tot het "twitching" -effect van de pagina, nieuw laden of de bestaande elementen aan de bovenkant wijzigen.
ASYNC-en uitstelkenmerken voor script-tag toepassen
Laten we erkennen dat het een asynchroon en uitgestelde JavaScript-taak is en het belangrijkste verschil is tussen Async en de uitstelkenmerken. Maar overweeg eerst de documentverwerkingssequentie in de gebruikelijke aansluiting van de script-tag.
< sRC \u003d "example.js"\u003e
In een visueel voorbeeld zal ik de volgende voorwaardelijke notatie gebruiken:
- pagina verwerking - Download script - Uitvoering van het script
Aldus vindt de verwerkingssequentie plaats volgens het volgende schema:
De HTML-code-analyse wordt onderbroken op het moment van laden en uitvoeren van het script, waarna het doorgaat. Het webpagina-display vindt plaats met de vertraging.
Attribuutuitbuiging.
Met het uitstelkenmerk kan de browser de JS-bestanden parallel laden zonder de verdere verwerking van de pagina te stoppen. Hun uitvoering vindt plaats na een complete parsering van het objectmodel van het document (uit het Engelse documentobjectmodel, afgekort door de DOM), terwijl de browser een reeks garandeert op basis van de volgorde van aansluitbestanden.
< defer SRC \u003d "example.js"\u003e
Attribuut async.
De ondersteuning van het ASYNC-attribuut verscheen in HTML5, waardoor de browser JS-bestanden parallel downloadt en onmiddellijk na het laden uitvoeren, zonder te wachten op de verwerking van de rest van de pagina.
< async src \u003d "example.js"\u003e
Verwerkingsequentiediagram:
Dit is een asynchroon laden. Het attribuut wordt aanbevolen voor dergelijke scripts die geen significante impact hebben op het display van het document. Deze omvatten de Collection-tellers van Statistieken (Google Analytics, Yandex metric), reclame-netwerkcodes (Yandex Advertising Network, Google AdSense), sociale netwerkknoppen, enzovoort.
Site-downloadsnelheid is een van Google-rankingsfactoren.
Asynchrone aansluiting van Javascript vermindert de laadtijd van de pagina als gevolg van een gebrek aan vertraging. Daarbij raad ik aan om JS-bestanden in één te comprimeren en te combineren, bijvoorbeeld met behulp van de bibliotheek. Gebruikers houden van snelle sites 😎
Async and OFER - JavaScript Downloadstrategieën
JavaScript is een integraal onderdeel van elke moderne webapplicatie en strategieën die we besluiten te gebruiken om te downloaden, heeft direct invloed op de prestaties van deze applicatie zelf. In dit artikel zullen we proberen belangrijke verschillen tussen elke aanpak, voor- en nadelen te begrijpen. Samen met de effecten van prestaties en manieren om de interactie met de pagina en downloadtijd te optimaliseren.
Om aan te tonen, zal ik een website maken die bestaat uit de volgende externe afhankelijkheden. Besteed speciale aandacht aan de juiste maten van bestanden, omdat de downloadtijd van bestanden direct evenredig is.
Html - pagina ~ 1 MB. Bevat daadwerkelijke markering / inhoud om een \u200b\u200bdynamische uitvoer van JavaScript weer te geven.
Afbeelding - Image1.png ~ 5 MB
JavaScript - File1.js ~ 3 MB is een kernel (hoofdbestand) Javascript en is afhankelijk van de HTML-syntactische analyse. Het is nodig om enkele dynamische inhoud te tonen of een reageer / hoekcomponent op de pagina te monteren.
JavaScript - File2.js ~ 460B is een klein, onafhankelijk JavaScript-bestand dat met DOM communiceert.
JavaScript - File3.js ~ 1,5 MB is een secundair JS-secundair bestand en is afhankelijk van bestand1.js om wat uit te voeren met een lagere prioriteitscode. Deze code is niet onmiddellijk vereist voor het weergeven van de pagina en interactie met de gebruiker; Het toont iconen van sociale netwerken, opmerkingen, online hulp, lanceer wat analytics-taken, enz.
Nu is het tijd om verschillende benaderingen te analyseren
Nadering-1 [scripts in het hoofdgedeelte]
In het eerste geval zullen we alle script-tags in het hoofdgedeelte van onze HTML downloaden. Hieronder staat een screenshot van het tabblad Chrome Page Network, klaar om met de gebruiker te communiceren.
Voors:
De volgorde van de code van verschillende JS-bestanden wordt opgeslagen in de volgorde waarin de bestanden in HTML zijn opgenomen. In het huidige voorbeeld, zelfs als Bestand2 en FILE3 zijn gedownload naar Bestand1, is de uitvoeringsbevel correct.
MINUSSEN:
In dit scenario wordt de HTML-syntaxisanalyse opgeschort totdat alle 3 scripts in het hoofdgedeelte worden geladen, geanalyseerd en uitgevoerd. Een leeg wit scherm wordt aangetoond aan de gebruiker, zelfs als het HTML-bestand al is geladen [maar niet geanalyseerd]. Dit is absoluut niet goed voor bruikbaarheid.
Geen van de bovenstaande scripts heeft de HTML-pagina toegang tot / manipuleren, omdat DOM nog niet klaar is. Een van de mogelijke oplossingen voor het verwerken van dit probleem is het luisteren van het Domcontentloaded-evenement en vervolgens de uitvoering van de code daarna. DomcontentLoadedDigital wordt geactiveerd wanneer het bron HTML-document volledig is geladen en geanalyseerd, zonder te wachten op de upload om stijltafels, afbeeldingen te downloaden.
Naderen-2 [scripts aan het einde]
Om 2 problemen te overwinnen waarmee we in de eerste aanpak worden geconfronteerd, laten we alle 3 scripts aan de onderkant van het lichaamstag rijden.
Voors: HTML wordt geanalyseerd voor het downloaden van scripts, zodat de gebruiker de werkelijke inhoud onmiddellijk kan zien in plaats van te wachten op scripts.
Aangezien alle scripts worden uitgevoerd na het parseren van HTML, dan kunnen ze allemaal toegang krijgen tot DOM voor manipulaties. De volgorde van scripts wordt opgeslagen.
MINUSSEN:
Er is geen productiviteitsgroei als zodanig.
Naderen-3 [met behulp van het ASYNC-attribuut]
HTML5 introduceerde het ASYNC-attribuut-script, dat helpt bij het downloaden van de relevante scriptbestanden parallel aan een andere stroom zonder de HTML-syntaxisanalyse te beïnvloeden.
Het overeenkomstige script wordt echter geanalyseerd en uitgevoerd zodra het de download voltooit, ongeacht of de HTML-syntaxisanalyse is voltooid en een verwijzing naar het DOM-element op dit specifieke punt zal hebben.
Hier kunt u duidelijk zien dat files2.js is geladen op het HTML-bestand. Hoewel de browser het bestand 2 laadt, heeft het de syntactische HTML-analyse niet opgeschort en daarom had hij tegen het tijdstip van de uitvoering een verwijzing naar de HTML-placeholder om dynamische inhoud in te voeren.
Voors: Aangezien scripts in een andere stream worden geladen, wordt de HTML-syntaxisanalyse niet opgeschort en kan de gebruiker de directe inhoud zien in plaats van een wit leeg scherm. De belangrijkste toename van de prestaties, d.w.z. domcontentloaded tijd daalde van 47,68 seconden tot slechts 21,12 seconden en is ~ 55% toename.
MINUSSEN:
De JS-uitvoeringsvolgorde wordt niet opgeslagen. Het wordt uitgevoerd in de juiste opstartvolgorde en niet ingeschakelde reeks scripts binnen HTML. Browserondersteuning wordt niet ondersteund op oude webbrowsers, dat wil zeggen, dat wil zeggen 9 en hieronder.
Wat gebeurt er als JS is geladen voordat het DOM-element beschikbaar is? Er wordt een fout uitgegooid.
OPMERKING: het plaatsen van scripts met het ASYNC-attribuut aan de onderkant van het lichaamsdeel zijn nutteloze en equivalente aanpak-2.
Nadering-4 [met behulp van het uitstelkenmerk]
Defersattribuut maakt het script alleen uitvoeren nadat de HTML-parsing is voltooid. Een heel belangrijk punt om hier rekening mee te houden is dat Chrome nog geen vertraging ondersteunt en geen invloed heeft op de duur van domcontentload. Het voert echter scripts uit aan het einde van de HTML-syntaxisanalyse.
Voors:
De volgorde van importscripts wordt opgeslagen. Dus, file3.js wordt alleen uitgevoerd nadat de download en uitvoering van het bestand1 is voltooid, zelfs als het bestand eerder is geladen.
Browserondersteuning - het heeft een betere ondersteuning voor browsers in vergelijking met het attribuut Asyns, d.w.z. gedeeltelijk ondersteund in IE V6-9
Scripts hebben toegang tot de DOM, zoals alleen wordt uitgevoerd na de volledige HTML-parsing.
MINUSSEN:
Aanvankelijk dacht ik dat de vertraging de beste keuze zou zijn dan asynchronisch, maar later ontdekte dat Chrome het nog steeds niet ondersteunt [versie 71.0.3578.98] en geen invloed heeft op de duur van domcontentload.
Niettemin werkt het zoals verwacht, in Firefox met een significante verbetering van de prestaties.
conclusies
Het heeft de voorkeur om script-tags in het hoofdgedeelte te plaatsen met het ASYNC-attribuut voor bibliotheken van derden die afhankelijk zijn van Google Analytics, Google Recaptcha of iets anders dat geen toegang nodig heeft, omdat de bijbehorende scripts parallel worden geladen, maar worden uitgevoerd direct.
Gebruik de uitstel voor alle andere scripts die in het hoofdgedeelte worden gedownload, omdat ze ook parallel worden gedownload, maar wordt alleen uitgevoerd nadat de HTML- en DOM-syntaxisanalyse klaar is voor toegang / manipulatie.
U kunt ook een combinatie van domcontentloaded luisteraar in asynchrone scripts gebruiken om later functionaliteit uit te voeren. Laat uw mening en conclusies achter in de opmerkingen, en ik zal ze graag met u bespreken.
De auteur van dit materiaal is mij - Pahwanks Yuri. Ik verstrek diensten voor het schrijven van programma's in Java-talen, C ++, C # (evenals adviseren op hen) en het maken van sites. Ik werk met sites op CMS OpenCart, WordPress, Modx en Self-geschreven. Bovendien werk ik rechtstreeks met JavaScript, PHP, CSS, HTML - dat wil zeggen, ik kan uw website wijzigen of helpen met webprogrammering.
Verbonden scripts (JavaScript) blokkeert het laden van de HTML-code. Wanneer de browser (parser) naar de tag komt
En de volgende voorbeelden laten zien hoe u (een inline) script in de
Module fallback
Browsers die de modulatiewaarde voor het type kenmerk ondersteunen, negeren elk script met een nomoduleattribuut. Hiermee kunt u modulescripts gebruiken terwijl u ook nomodule-gewijzigd fallback-scripts biedt voor niet-ondersteunende browsers.
Punbb - GRATIS CMS voor het forum, het belangrijkste verschil hiervan is ingebouwde mogelijkheden voor interne SEO-optimalisatie, ontbreekt zelfs in een getal ...
Wat is hetzelfde cookie? Er is een mechanisme waarmee de HTTP-server een tekstinformatie op te slaan op de computer van de gebruiker, en vervolgens op ...
Het gebeurt vaak dat het nodig is om het ICQ-wachtwoord te kennen (laten we zeggen dat de gebruiker het wachtwoord is vergeten). En het is niet altijd hacking, hoewel dergelijke gevallen ...
Het iTunes-programma is de belangrijkste voor Apple-technologie, vooral voor smartphones. Het is dankzij iTunes dat u toegang hebt tot alle functies ...
Installeer optionele producten - DriverDoc (Solvusoft) | | | | Deze pagina bevat informatie over het installeren van de nieuwste downloads van stuurprogramma's ...
Instructies voor het gebruik van JSQL-injectie - Multifunctionele tool voor het zoeken en bedienen van SQL-injecties in Kali Linux GR
ShoppingGID: Hoe irritante spam te verwijderen?
Hoe een bericht sturen naar alle vrienden VKONTAKTE
Hoe hackersvaardigheden te kopen
Beste tools voor CRAW-marketing