Šest osvědčených postupů jQuery pro lepší výkon

jQuery je jedním z dnes nejoblíbenější JavaScript knihovny. Jeho API je velmi snadné použití, což vede k ne tak strmé křivce učení. Mnoho projektů používá kód jQuery namísto přímého použití vanilkového JavaScriptu, aby přineslo dynamické funkce.

Ale i jQuery má své nedostatky. To může vést k některým výkonnostní problémy, pokud se používá nedbale stejně jako jazyk, na kterém je založen. Tento příspěvek bude seznam některých z nejlepších postupů v používání jQuery, které nám pomohou vyhnout se jakýmkoliv problémům s výkonem.

1. Lazy zatížení skriptů v případě potřeby

Prohlížeče spustit JavaScript před vytvořením DOM stromu a malování pixelů na obrazovce, protože skripty mohou přidat nové prvky na stránku nebo změnit rozložení nebo styl některých uzlů DOM. Takže, podle dávat prohlížeč méně skriptů ke spuštění během načítání stránky, můžeme zkrátí dobu potřebnou k provedení pro konečné vytvoření DOM stromu a malování, po kterém bude uživatel vidět stránku.

Jeden způsob, jak to provést v jQuery je pomocí $ .getScript načíst libovolný soubor skriptu v době jeho potřeby, nikoli během načítání stránky.

$ .getScript ("skripty / galerie.js", zpětné volání); 

Je to ajax funkce, která bude mít jeden soubor skriptu, když chcete, ale všimněte si, že načtený soubor není uložen do mezipaměti. Povolení ukládání do mezipaměti pro getScript budete muset povolit stejné pro všechny požadavky ajax. Můžete tak učinit pomocí níže uvedeného kódu:

$ .ajaxSetup (cache: true); 

2. Vyhněte se $ (window) .load () pokud váš skript nepotřebuje žádné dílčí zdroje stránky

$ (document) .ready () je ekvivalentní DOMContentLoaded (kde DOMContentLoaded je k dispozici) a $ (window) .load () na Zatížení. První z nich se spustí při načtení vlastního DOMu stránky, ale ne externích aktiv, jako jsou obrázky a styly. Druhá je vypálena, když je načteno všechno, včetně vlastního obsahu a jeho dílčích zdrojů.

Pokud tedy píšete skript, který se spoléhá na dílčí zdroje stránky, jako je změna barvy pozadí div to je stylizované externím stylem, je nejlepší použít $ (window) .load ().

Ale pokud tomu tak není, je lepší držet se $ (document) .ready () protože, jQuery volá jeho připraven obsluha události, zda používáte $ (document) .ready () nebo ne, takže ho používejte, když můžete.

3. Použijte odpojit odstranit prvky z DOM, které je třeba změnit.

“Reflow” je termín, který odkazuje na změny rozvržení na webové stránce, je to tehdy, když prohlížeč přeskupí prvky stránky tak, aby vyhovovaly novému prvku, přizpůsobily se strukturálním změnám prvku, vyplnily mezeru, kterou zanechal odstraněný prvek, nebo nějakou jinou akci, která potřebuje změna vzhledu stránky. reflow je drahý prohlížeč.

Můžeme to snížit. způsobené strukturálními změnami prvku provedením změn na něm po vyndání z toku stránek a když je to hotovo. Pokud přidáváte více řádků ke stolu jeden po druhém, způsobí to spoustu zpětných toků. Takže je lepší vezměte tabulku ze stromu DOM, přidejte do ní řádky a vraťte ji zpět do DOM; Tím se sníží zpětné toky.

jQuery je odpojit() umožňuje odstranit prvek ze stránky, je to jiné odstranit() protože uloží data spojená s prvkem, když je třeba je přidat na stránku později. Samostatný prvek může být poté upraven zpět na stránku.

4. Použijte css () nastavit výšku nebo šířku namísto výška() a šířka()

Pokud nastavujete výšku nebo šířku prvku v jQuery, doporučuji použít css () funkce, protože nastavení těchto hodnot pomocí výška() a šířka() způsobí extra odrazy v důsledku přístupu k některým vlastnostem rozvržení ve funkci computeStyleTests v jQuery (testováno v posledním ver.).

Kód p.height ("300px"); zde jsou zpětné toky.

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

computeStyleTests se používá k provádění některých testů podpory. Je to také nazýváno dostat pomocí výšky a šířky oba css () a výška, šířka() , ale pro nastavení je to jen požadováno výška, šířka() které nemusejí být potřebné css () místo toho.

5. Nepřistupujte zbytečně k vlastnostem rozložení

Přístup k vlastnostem rozvržení, jako je výška, šířka, okraj atd., Vyvolá přeformátování stránky. Důvodem je vždy, když požádáte prohlížeč o některou z vlastností rozvržení zajistí, že získáte aktualizovanou hodnotu (v případě, že hodnota byla předtím neplatná) přepočítání hodnot a použití změn rozvržení.

Takže ať už používáte jQuery nebo vanilla JavaScript, Dejte si pozor na zbytečné zpřístupnění vlastností rozvržení zejména ve smyčce nebo následně po provedení změn stylu.

6. Využijte ukládání do mezipaměti, kde můžete

Některé funkce jQuery jsou vybaveny mechanismy ukládání do mezipaměti, které lze dobře využít. Požadavky Ajaxu ukládají prostředky do vyrovnávací paměti, ale nejsou k dispozici skript a jsonp, takže pokud chcete ukládat do mezipaměti všechny vaše iax požadavky, možná budete chtít globálně níže.

Všimněte si také, že pokud načtete prostředky pomocí pošta nebude uložen do mezipaměti, i když povolíte ukládání do mezipaměti s výše uvedeným nastavením.

Jak jsem zmínil dříve, odpojit() ukládá data spojená s prvkem, který má být odstraněn, na rozdíl od odstranit();skrýt() ukládá počáteční CSS do mezipaměti Zobrazit hodnotu prvku před tím, než jej skryjete tak, aby mohl být později obnoven bez ztráty dat.

Závěr

Jedním ze způsobů, jak si můžete být jisti, že používáte nejefektivnější kód jQuery pro vaši potřebu, je počkat, až ve skutečnosti spustíte kód a všimnete si, zda existuje nějaký problém s výkonem nebo ne. Pokud existuje, použijte nástroje pro výkon a ladění rozpoznat kořen problému.

Vzhledem k tomu, že jQuery je jako zámotek pro JavaScript s dalšími funkcemi pro kompatibilitu a funkce prohlížeče, může být obtížné diagnostikovat problémy bez těchto nástrojů.