logo

Kam mám vkládat značky do HTML značek?

Při vkládání JavaScriptu do dokumentu HTML, kam je vhodné umístit <script> značky a zahrnutý JavaScript? Zdá se mi, že si vzpomínám, že byste je neměli umístit do <head> sekce, ale umístí se na začátek <body> sekce je také špatná, protože JavaScript bude muset být analyzován, než se stránka úplně vykreslí (nebo něco takového). Zdá se, že tím opouštíte konec z <body> oddíl jako logické místo pro <script> tagy.

Takže, kde je správné místo pro umístění <script> značky?

(Tato otázka odkazuje na tuto otázku, ve které bylo navrženo, že volání funkcí JavaScript by měla být přesunuta z <a> tagy na <script> značky. Konkrétně používám jQuery, ale hodí se i obecnější odpovědi.)

Odpověď

Co se stane, když prohlížeč načte webovou stránku s <script> tag na něm:

  1. Načtěte stránku HTML (např. index.html )
  2. Začněte analyzovat kód HTML
  3. Analyzátor narazí na <script> tag odkazující na externí soubor skriptu.
  4. Prohlížeč požaduje soubor skriptu. Mezitím analyzátor zablokuje a zastaví analýzu jiného kódu HTML na vaší stránce.
  5. Po nějaké době je skript stažen a následně spuštěn.
  6. Analyzátor pokračuje v analýze zbytku dokumentu HTML.

Krok č. 4 způsobuje špatný uživatelský dojem. Váš web se v podstatě přestane načítat, dokud si nestáhnete všechny skripty. Pokud existuje něco, co uživatelé nenávidí, pak je to čekání na načtení webu.

Proč se to vůbec děje?

Jakýkoli skript může vložit vlastní HTML pomocí document.write() nebo jiné DOM manipulace. To znamená, že analyzátor musí počkat, dokud nebude skript stažen a proveden, než bude moci bezpečně analyzovat zbytek dokumentu. Ostatně ten skript mohl vložili do dokumentu vlastní HTML.

Většina vývojářů JavaScriptu však již nemanipuluje s DOM zatímco dokument se načítá. Místo toho počkají, dokud se dokument nenačte, než jej upraví. Například:

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script src="my-script.js"></script>
    </head>
    <body>
        <div id="user-greeting">Welcome back, user</div>
    </body>
</html>

JavaScript:

// my-script.js
document.addEventListener("DOMContentLoaded", function() {
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

Protože váš prohlížeč nezná my-script.js pokud dokument nezmění, dokud nebude stažen a spuštěn, analyzátor přestane analyzovat.

Zastaralé doporučení

Starý přístup k řešení tohoto problému byl vložit <script> značky v dolní části vašeho <body> , protože to zajišťuje, že analyzátor nebude zablokován až do úplného konce.

Tento přístup má svůj vlastní problém:prohlížeč nemůže začít stahovat skripty, dokud není analyzován celý dokument. U větších webů s velkými skripty a styly je pro výkon velmi důležitá možnost stáhnout si skript co nejdříve. Pokud se váš web nenačte do 2 sekund, lidé přejdou na jiný web.

V optimálním řešení by prohlížeč začal stahovat vaše skripty co nejdříve a zároveň by analyzoval zbytek vašeho dokumentu.

Moderní přístup

Dnes prohlížeče podporují async a defer atributy ve skriptech. Tyto atributy sdělují prohlížeči, že je bezpečné pokračovat v analýze během stahování skriptů.

asynchronní

<script src="path/to/script1.js" async></script>
<script src="path/to/script2.js" async></script>

Skripty s atributem async jsou spouštěny asynchronně. To znamená, že skript je spuštěn, jakmile je stažen, aniž by byl mezitím zablokován prohlížeč. To znamená, že je možné, že skript 2 je stažen a spuštěn před skriptem 1.

Podle http://caniuse.com/#feat=script-async to podporuje 97,78 % všech prohlížečů.

odložit

<script src="path/to/script1.js" defer></script>
<script src="path/to/script2.js" defer></script>

Skripty s atributem odložit se spouštějí v pořadí (tj. nejprve skript 1, poté skript 2). To také neblokuje prohlížeč.

Na rozdíl od asynchronních skriptů se odložené skripty spouštějí až po načtení celého dokumentu.

Podle http://caniuse.com/#feat=script-defer to podporuje 97,79 % všech prohlížečů. 98,06 % to podporuje alespoň částečně.

Důležitá poznámka ke kompatibilitě prohlížeče:za určitých okolností může Internet Explorer 9 a starší spouštět odložené skripty mimo provoz. Pokud potřebujete tyto prohlížeče podporovat, přečtěte si nejprve toto!

(Chcete-li se dozvědět více a vidět některé opravdu užitečné vizuální znázornění rozdílů mezi asynchronními, odloženými a normálními skripty, podívejte se na první dva odkazy v sekci s odkazy této odpovědi)

Závěr

Současný stav techniky je vkládat skripty do <head> a použijte async nebo defer atributy. To umožňuje, aby byly vaše skripty staženy co nejdříve bez blokování vašeho prohlížeče.

Dobrá věc je, že vaše webové stránky by se měly stále správně načítat ve 2 % prohlížečů, které tyto atributy nepodporují, a zrychlit zbylých 98 %.

Odkazy

  • asynchronní vs odložené atributy
  • Efektivní načítání JavaScriptu s odložením a asynchronizací
  • Odstraňte JavaScript blokující vykreslování
  • Asynchronní, odložit, moduly:Vizuální cheat