Zes best practices voor jQuery voor betere prestaties

jQuery is er 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 de jQuery-code in plaats van rechtstreeks het vanille-JavaScript te gebruiken om dynamische functionaliteiten binnen te halen.

Maar jQuery heeft ook zijn tekortkomingen. Dit kan leiden tot prestatieproblemen bij onvoorzichtig gebruik 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 indien nodig

Browsers werken met 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 geven om uit te voeren tijdens het laden van de pagina, we kunnen verkort de tijd die het kost voor de uiteindelijke DOM-boom creatie en schilderen, waarna de gebruiker zal zijn in staat om de pagina te zien.

Een manier om dit in jQuery te doen, is door het te gebruiken $ .getScript om een ​​scriptbestand te laden op het moment van zijn behoefte 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 je het wilt, maar houd er rekening mee dat het opgehaalde bestand niet in de cache staat. Caching inschakelen voor getScript je moet hetzelfde inschakelen voor alle ajax-verzoeken. U kunt dit doen door de onderstaande code te gebruiken:

$ .ajaxSetup (cache: true); 

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

De $ (document) .ready () is gelijk aan DOMContentLoaded (waar DOMContentLoaded is beschikbaar) en $ (venster) .load () naar Laden. 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 a div dat is gestileerd door een externe stylesheet, het is het beste om te gebruiken $ (venster) .load ().

Maar als dat niet het geval is, is het beter om je daaraan te houden $ (document) .ready () want jQuery noemt het klaar gebeurtenishandler of u deze gebruikt $ (document) .ready () of niet, gebruik het dus wanneer je kunt.

3. Gebruik losmaken om elementen uit DOM te verwijderen die moesten 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 bewerken, zich aan te passen aan structurele wijzigingen van een element, de opening opvult die is achtergelaten door een element dat is verwijderd of een andere actie waarvoor een element nodig is lay-out verandering op de pagina. reflow is een duur browser proces.

We kunnen het aantal verminderen. van terugvloeiingen veroorzaakt door structurele veranderingen aan een element door de wijzigingen erop uit te voeren na het uit de paginastroom halen en zet het terug als het klaar is. Als u meerdere rijen één voor één aan een tabel toevoegt, zorgt dit voor veel terugbetalingen. Dus het is beter om neem de tafel uit de DOM-boom, voeg de rijen toe en plaats deze terug in de DOM; dit vermindert de terugvloeiing.

jQuery losmaken () laat ons een element van de pagina verwijderen, het is anders dan verwijderen() omdat het de gegevens die aan het element zijn gekoppeld, opslaat wanneer het later aan de pagina moet worden toegevoegd. Een losstaand element kan dan terug in de pagina worden geplaatst als het is gewijzigd.

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

Als u de hoogte of breedte van een element in jQuery instelt, raad ik u aan de css () functie omdat deze waarden worden ingesteld met hoogte() en breedte() zal extra teruggaven veroorzaken vanwege de toegang tot sommige layout-eigenschappen in de functie computeStyleTests in jQuery (getest in de laatste versie).

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

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

computeStyleTests wordt gebruikt om sommige ondersteuningstests uit te voeren. Het wordt ook wel 'while' genoemd krijgen de hoogte en breedte gebruiken beide css () en hoogte breedte() , maar voor omgeving het is alleen nodig hoogte breedte() die misschien niet nodig zijn, dus gebruik css () in plaats daarvan.

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 om een ​​van de lay-out eigenschappen vraagt, dit zorgt ervoor dat u de bijgewerkte waarde krijgt (in het geval dat de waarde eerder is ongeldig gemaakt) door het herberekenen van de waarden en het toepassen van lay-outwijzigingen.

Dus of u jQuery of vanille JavaScript gebruikt, pas op voor het onnodig openen van lay-outeigenschappen vooral in een lus of consequent na het maken van stijlwijzigingen.

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, zou je dat willen stel het globaal in zoals hieronder.

Merk ook op dat als u bronnen ophaalt met post het wordt niet in de cache opgeslagen, zelfs niet als u caching met de bovenstaande instellingen inschakelt.

Zoals ik al eerder zei, losmaken () caches de gegevens in verband met het element dat moet worden verwijderd in tegenstelling tot verwijderen();verbergen() caches de initiële CSS tonen waarde van een element voordat het wordt verborgen, zodat het 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 prestaties en foutopsporing detecteer de oorzaak van het probleem.

Omdat jQuery een cocon voor JavaScript is met extra functionaliteiten voor browsercompatibiliteit en -functies, kan het moeilijk zijn om de problemen te diagnosticeren zonder deze tools.