• Na pozici záleží
  • Async a defer
  • Porovnání výkonu
    • Není defer ani async, v hlavě
    • Žádný defer ani async, v těle
    • S async, v hlavě
    • S defer, v hlavičce
  • Blokování parsování
  • Blokování vykreslování
  • domInteractive
  • Udržování pořádku
  • Jen mi řekněte, jak je to nejlepší

Při načítání skriptu na stránce HTML musíte být opatrní, abyste nepoškodili výkon načítání stránky.

Skript se do stránky tradičně začleňuje tímto způsobem:

<script src="https://flaviocopes.com/javascript-async-defer/script.js"></script>

kdykoli analyzátor HTML najde tento řádek, provede se požadavek na načtení skriptu a skript se spustí.

Jakmile je tento proces dokončen, může parsování pokračovat a zbytek HTML může být analyzován.

Jak si dokážete představit, tato operace může mít velký vliv na dobu načítání stránky.

Pokud načítání skriptu trvá o něco déle, než se očekává, například pokud je síť trochu pomalá nebo pokud jste na mobilním zařízení a připojení je trochu nedbalé, návštěvník pravděpodobně uvidí prázdnou stránku, dokud se skript nenačte a nevykoná.

Záleží na pozici

Když se poprvé učíte jazyk HTML, dozvíte se, že značky skriptů se nacházejí v tagu <head>:

<html> <head> <title>Title</title> <script src="https://flaviocopes.com/javascript-async-defer/script.js"></script> </head> <body> ... </body></html>

Jak jsem vám již řekl, když analyzátor najde tento řádek, jde načíst skript a spustí ho. Poté, co je s tímto úkolem hotov, přejde k parsování těla.

To je špatně, protože se tím zavádí velké zpoždění. Velmi častým řešením tohoto problému je umístit značku script na konec stránky, těsně před uzavírací značku </body>.

Při tom se skript načte a provede až poté, co je celá stránka již rozebrána a načtena, což je obrovské zlepšení oproti alternativě head.

To je to nejlepší, co můžete udělat, pokud potřebujete podporovat starší prohlížeče, které nepodporují dvě relativně nové vlastnosti jazyka HTML: async a defer.

Asynchronizace a odložení

Jak asynchronizace, tak odložení jsou logické atributy. Jejich použití je podobné:

<script async src="https://flaviocopes.com/javascript-async-defer/script.js"></script>
<script defer src="https://flaviocopes.com/javascript-async-defer/script.js"></script>

při zadání obou má async v moderních prohlížečích přednost, zatímco starší prohlížeče, které podporují defer, ale ne async, se vrátí k defer.

Tyto atributy mají smysl pouze při použití skriptu v části stránky head a jsou zbytečné, pokud skript umístíte do patičky body, jak jsme viděli výše.

Srovnání výkonu

Bez defer nebo async, v hlavičce

Takto se načítá skript bez defer nebo async, umístěný v head části stránky:

Parsování je pozastaveno, dokud není skript načten a proveden. Jakmile je to provedeno, parsování se obnoví.

Bez defer nebo async, v těle stránky

Takto se načítá skript bez defer nebo async, vložený na konec značky body, těsně před jejím uzavřením:

Parsování se provádí bez pauz, a když skončí, skript se načte a provede. Parsování se provede ještě před stažením skriptu, takže se stránka uživateli zobrazí mnohem dříve než v předchozím příkladu.

S asynchronně, v hlavičce

Takto se načítá stránka se skriptem async, vloženým do značky head:

Skript se načte asynchronně, a když je hotový, parsování HTML se pozastaví, aby se skript provedl, a pak se v něm pokračuje.

S defer, v hlavičce

Takto stránka načte skript s defer, vložený do značky head:

Skript je načten asynchronně a provede se až poté, co je hotové parsování HTML.

Parsování skončí stejně, jako když umístíme skript na konec tagu body, ale celkově skončí provádění skriptu mnohem dříve, protože skript byl stažen souběžně s parsováním HTML.

Takže toto je vítězné řešení z hlediska rychlosti 🏆

Blokování parsování

async blokuje parsování stránky, zatímco defer nikoliv.

Blokování vykreslování

Na blokování vykreslování nezaručuje nic ani async ani defer. To záleží na vás a vašem skriptu (například na tom, aby se vaše skripty spouštěly až po události onLoad).

domInteractive

Skripty označené defer se spustí hned po události domInteractive, která nastane po načtení HTML, jeho parsování a sestavení DOM.

CSS a obrázky se v tomto okamžiku ještě musí analyzovat a načíst.

Jakmile je toto provedeno, prohlížeč vydá událost domComplete a poté onLoad.

domInteractive je důležitá, protože její načasování je uznáváno jako měřítko vnímané rychlosti načítání. Více viz MDN.

Udržování pořádku

Další případ pro defer: skripty označené async se spouštějí v náhodném pořadí, jakmile jsou k dispozici. Skripty označené defer se provádějí (po dokončení parsování) v pořadí, v jakém jsou definovány ve značce.

Jenom mi řekněte, jak to nejlépe udělat

Pro zrychlení načítání stránky při použití skriptů je nejlepší umístit je do head a přidat atribut defer do značky script:

<script defer src="https://flaviocopes.com/javascript-async-defer/script.js"></script>

Tento scénář vyvolá rychlejší událost domInteractive.

Vzhledem k výhodám defer se zdá, že je v řadě scénářů lepší volbou než async.

Pokud vám nevadí zpoždění prvního vykreslení stránky, ujistěte se, že při parsování stránky je již spuštěn požadovaný JavaScript.

Stáhněte si zdarma mou Příručku JavaScriptu pro začátečníky

Další návody pro prohlížeče:

  • Několik užitečných triků dostupných v HTML5
  • Jak jsem vytvořil CMS-založený na webových stránkách fungovat offline
  • Kompletní průvodce progresivními webovými aplikacemi
  • Průvodce rozhraním Fetch API
  • Průvodce rozhraním Push API
  • Kanál pro zasílání zpráv API
  • Service Workers Tutorial
  • The Cache API Guide
  • The Notification API Guide
  • Dive into IndexedDB
  • The Selectors API: QuerySelector a QuerySelectorAll
  • Efektivní načítání JavaScriptu pomocí defer a async
  • Objektový model dokumentu (DOM)
  • Webové úložiště API:
  • Zjistěte, jak fungují soubory cookie HTTP
  • Historie API
  • Obrázkový formát WebP
  • XMLHttpRequest (XHR)
  • Důkladný výukový kurz SVG
  • Co jsou to datové adresy URL
  • Mapa pro studium webové platformy
  • CORS, Cross-Origin Resource Sharing
  • Web Workers
  • Průvodce requestAnimationFrame()
  • Co je to Doctype
  • Práce s DevTools Console a rozhraním API Console
  • Rozhraní API syntézy řeči
  • Jak čekat na událost DOM ready v jednoduchém jazyce JavaScript
  • Jak přidat třídu do DOM prvku
  • Jak procházet smyčkou prvky DOM z querySelectorAll
  • Jak odebrat třídu z prvku DOM
  • Jak zkontrolovat, zda má prvek DOM třídu
  • Jak změnit hodnotu uzlu DOM
  • Jak přidat událost kliknutí do seznamu prvků DOM vrácených z querySelectorAll
  • WebRTC, Real Time Web API
  • Jak získat pozici posouvání prvku v jazyce JavaScript
  • Jak nahradit prvek DOM
  • Jak přijímat pouze obrázky v poli vstupního souboru
  • Proč používat náhledovou verzi prohlížeče?
  • Objekt Blob
  • Objekt File
  • Objekt FileReader
  • Objekt FileList
  • Objekt ArrayBuffer
  • Objekt ArrayBufferView
  • Objekt URL
  • Typy Pole
  • Objekt DataView
  • Api rozhraní BroadcastChannel
  • Api rozhraní Streams
  • Objekt FormData
  • Objekt Navigator
  • Jak používat API Geolocation

    • .

  • Jak používat funkci getUserMedia()
  • Jak používat rozhraní API Drag and Drop
  • Jak pracovat s rolováním na webových stránkách
  • Obsluha formulářů v jazyce JavaScript
  • Události klávesnice
  • Myška události
  • Dotykové události
  • Jak odstranit všechny děti z prvku DOM
  • Jak vytvořit atribut HTML pomocí vanilla Javascriptu
  • Jak pomocí JavaScriptu zkontrolovat, zda je zaškrtávací políčko zaškrtnuté?
  • Jak zkopírovat do schránky pomocí JavaScriptu
  • Jak zakázat tlačítko pomocí JavaScriptu
  • Jak zajistit, aby byla stránka v prohlížeči upravitelná
  • Jak na to? získat hodnoty dotazovacího řetězce v JavaScriptu pomocí URLSearchParams
  • Jak odstranit ze stránky všechny CSS najednou
  • Jak použít insertAdjacentHTML
  • Safari, varování před ukončením
  • Jak přidat obrázek do DOM pomocí JavaScriptu
  • Jak obnovit formulář
  • Jak používat písma Google

.

By: adminPosted on

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.