Zes jQuery best practices voor betere prestaties

jQuery is een van de meest populaire JavaScript-bibliotheken van vandaag. De API is zeer eenvoudig in gebruik en leidt tot een niet zo steile leercurve. Veel projecten gebruiken jQuery-code in plaats van direct het vanille-JavaScript te gebruiken om dynamische functionaliteiten binnen te halen.

Maar jQuery heeft ook zijn tekortkomingen. Het kan leiden tot prestatieproblemen als het achteloos wordt gebruikt, net zoals de taal waarop het is gebaseerd. In dit bericht worden enkele van de aanbevolen procedures voor het gebruik van jQuery vermeld, zodat we prestatieproblemen kunnen voorkomen.

1. Lazy load-scripts wanneer nodig

Browsers gebruiken JavaScript voordat ze de DOM-structuur maken en de pixels op het scherm tekenen, omdat scripts nieuwe elementen aan de pagina kunnen toevoegen of de lay-out of stijl van sommige DOM-knooppunten kunnen wijzigen. Dus door de browser minder scripts te laten uitvoeren tijdens het laden van de pagina, kunnen we de tijd die nodig is voor de uiteindelijke DOM-tree maken en verven verkorten, waarna de gebruiker de pagina kan zien .

Een manier om dit in jQuery te doen is door $.getScript te gebruiken om een ​​scriptbestand te laden op het moment dat het nodig is, in plaats van tijdens het laden van de pagina.

 $ .getScript ("scripts / gallery.js", callback); 

Het is een ajax-functie die een enkel scriptbestand krijgt wanneer u het wilt, maar houd er rekening mee dat het opgehaalde bestand niet in de cache wordt opgeslagen. Als u caching voor getScript wilt inschakelen, getScript u hetzelfde inschakelen voor alle ajax-aanvragen. U kunt dit doen door de onderstaande code te gebruiken:

 $ .ajaxSetup ({cache: true}); 

2. Vermijd $( window ).load() als uw script geen $( window ).load() van de pagina nodig heeft

Het $( document ).ready() is gelijk aan DOMContentLoaded (waar DOMContentLoaded beschikbaar is) en $( window ).load() om te Load . De eerste wordt geactiveerd wanneer de eigen DOM van een pagina wordt geladen, maar geen externe elementen zoals afbeeldingen en stylesheets. De tweede wordt afgevuurd wanneer alles van een pagina is samengesteld, inclusief de eigen inhoud en de bijbehorende subbronnen zijn geladen.

Dus, als u een script schrijft dat vertrouwt op de subbronnen van een pagina, zoals het veranderen van de achtergrondkleur van een div die is vormgegeven door een externe stylesheet, is het het beste om $( window ).load() .

Maar, als dat niet het geval is, is het beter om vast te houden aan $( document ).ready() omdat jQuery zijn ready gebeurtenisafhandelaar noemt, of u $( document ).ready() of niet, dus gebruik het wanneer u kunt.

3. Gebruik detach om elementen uit DOM te verwijderen die moeten worden gewijzigd.

"Reflow" is een term die verwijst naar lay-outwijzigingen in een webpagina, dit is wanneer de browser de elementen van een pagina opnieuw rangschikt om een ​​nieuw element te plaatsen, zich aan te passen aan structurele wijzigingen van een element, de opening te vullen die een element is verwijderd of een andere actie. die een lay-outverandering in de pagina vereist. reflow is een duur browserproces .

We kunnen het nee verminderen. van terugvloeiingen veroorzaakt door structurele wijzigingen aan een element door de wijzigingen erop uit te voeren nadat het uit de paginastroom is gehaald en teruggezet wanneer het klaar is . Als u meerdere rijen één voor één aan een tabel toevoegt, zorgt dit voor veel terugbetalingen. Het is dus beter om de tabel uit de DOM-structuur te halen, de rijen eraan toe te voegen en deze terug te zetten naar de DOM ; dit vermindert de terugvloeiing.

jQuery's detach() laat ons een element verwijderen van de pagina, het verschilt van remove() omdat het de gegevens behorend bij het element opslaat voor wanneer het later aan de pagina moet worden toegevoegd. Een losstaand element kan vervolgens worden teruggeplaatst in de pagina wanneer het is gewijzigd.

4. Gebruik css() om de hoogte of breedte in te stellen in plaats van height() en width()

Als u de hoogte of breedte van een element in jQuery instelt, raad ik u aan de functie css() te gebruiken omdat het instellen van die waarden met height() en width() extra teruggaven veroorzaakt vanwege de toegang tot sommige lay-outeigenschappen in de function computeStyleTests in jQuery (getest in de nieuwste versie).

Voor de code p.height("300px"); hier zijn de terugvloeiingen.

Voor p.css({ "height": "300px"});

computeStyleTests wordt gebruikt om een ​​aantal ondersteuningstests uit te voeren. Het wordt ook wel de hoogte en breedte genoemd met behulp van css() en height()/width(), maar voor het instellen wordt alleen de height()/width() aangeroepen die mogelijk niet nodig is, dus gebruik in plaats daarvan css() .

5. Open de lay-out eigenschappen niet onnodig

Als u lay-outeigenschappen zoals hoogte, breedte, marge, enzovoort opent, wordt het verloop van de pagina geactiveerd. De reden hiervoor is dat wanneer u de browser vraagt ​​naar een lay-outeigenschap, deze ervoor zorgt dat u de bijgewerkte waarde krijgt (in het geval dat de waarde eerder ongeldig is gemaakt) door de waarden opnieuw te berekenen en eventuele indelingswijzigingen toe te passen .

Dus of u nu jQuery- of vanilla-JavaScript gebruikt, pas op voor het onnodig openen van lay-outeigenschappen, met name in een loop of als gevolg daarvan, nadat u stijlwijzigingen hebt aangebracht.

6. Maak gebruik van caching waar je kunt

Sommige functies van jQuery worden geleverd met caching-mechanismen die goed kunnen worden gebruikt. Ajax-verzoeken cachen de bronnen, maar het is niet beschikbaar voor script en jsonp, dus als je caching over al je ajax-verzoeken wilt, kun je het globaal instellen zoals hieronder.

Houd er ook rekening mee dat als u bronnen ophaalt met post, deze niet in de cache worden opgeslagen, zelfs niet als u caching met de bovenstaande instellingen inschakelt.

Zoals ik al eerder zei, detach() caches de gegevens die horen bij het element dat moet worden verwijderd, in tegenstelling tot remove() ; hide() plaatst de oorspronkelijke CSS- display van een element in de cache voordat deze wordt verborgen, zodat deze later kan worden hersteld zonder de gegevens te verliezen.

Conclusie

Een manier om er zeker van te zijn dat u de meest effectieve jQuery-code gebruikt, is te wachten tot u uw code daadwerkelijk hebt uitgevoerd en hebt gemerkt of er een probleem met de prestaties is of niet. Als dat het geval is, gebruikt u de hulpprogramma's voor prestatie en foutopsporing om de oorzaak van het probleem te achterhalen .

Omdat jQuery een cocon voor JavaScript is met extra functies voor compatibiliteit en functies van een browser, kan het moeilijk zijn om de problemen te diagnosticeren zonder deze hulpmiddelen.