it-swarm-eu.dev

Už „uvedení Javascriptu na dno“ poráží účel dokumentu.

Vím, že se doporučuje umístit Javascript do dolní části stránky, ale pokud používám jQuery, neporuší to jeho účel, který se má spustit při načítání DOM?

Mám-li například rozbalovací nabídku, rozevírací nabídky se nebudou zobrazovat, dokud se nenačte celá část stránky. Také se snažím vyvíjet s ohledem na progresivní vylepšení, takže bych mohl mít prvky, které jsou skryty pomocí jQuery místo CSS (takže je mohou vidět uživatelé, kteří nejsou JS).

Je snad nějaké šťastné médium?

26
DisgruntledGoat

Document.ready čeká na načtení DOM před spuštěním jakéhokoli JavaScriptu (http://www.learningjquery.com/2006/09/introducing-document-ready).

Myšlenka umístit ji na dno znamená, že pokud má váš server JS problémy nebo má osoba pomalé připojení, zbytek stránky se načte jako první a "visí".

JS stále běží, když se vše načte, ať už je to na začátku nebo na konci.

30
Callan

Pokud umístíte javascript na konec, znamená to, že se další obsah stránky (zejména text) načte před javascript, takže uživatelé nečekají na načtení JS, pokud mají pomalá připojení.

To nemá vliv na dokument. Už se to nazývá, když prohlížeč dokončí přípravu DOM na stránku. Ať tak či onak, vše musí být načteno jako první.

6
Macha

Skript nemá skutečné použití, dokud se HTML nedokončí načítání - skript nemůže změnit DOM, dokud se HTML nenačte. document.ready čeká na načtení DOM. Nemá smysl zmínit důležité věci, jako jsou styly stylů.

Umístěte skripty do dolní části stránky (před značku </body>), abyste si zajistili co nejrychlejší získání kódu HTML a CSS uživateli. Prohlížeč bude moci stránku vykreslit mnohem rychleji a pak je možné načíst skripty, místo aby ponechal prázdnou stránku, na kterou se uživatel dívá, zatímco čekají na stažení skriptů.

Zatímco prohlížeč stránku vykresluje postupně, pokud zasáhne značku skriptu (tj. Externí soubor Javascript) vše se zastaví. Skripty mají správnou cestu - zatímco se skript stahuje, prohlížeč nespustí žádné další stahování. tj. obrázky a šablony stylů a jakékoli další paralelní stahování bude blokováno, a to i na různých hostitelských jménech.

Nevýhodou umístění skriptů do spodní části stránky je to, že protože se stránka vykreslí před inicializací skriptů, budou moci zejména uživatelé s rychlým klikáním interagovat s vaším webem dříve, než bude připraven Javascript.

Poznámka: Opak je pravdou pro Stylesheets - Stylesheets v dolní části stránky, progresivní vykreslování, dokud nebudou stažené všechny styly a přesunuty do dokumentu HEAD eliminuje problém.


Existuje úhledný trik pro načtení javascriptu, aniž by uživatel čekal, můžete vytvořit prvek <script/> pomocí metody DOM createElement() a přidat jej na stránku těsně před závěrečným </body> štítek:

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

Prohlížeč nezačne stahovat skript js, dokud nebude nový prvek <script/> skutečně přidán na stránku. Jakmile je stahování dokončeno, prohlížeč interpretuje kód Javascript obsažený uvnitř.

3
Tom

Ano. Pokud dáte skripty na dno, doc.ready (DOMContentLoaded událost) již není potřeba - váš skript bude spuštěn po načtení všech předcházejících DOMů.

Protože skripty na konci zvyšují výkon (analýza HTML a načítání CSS a obrázků není skripty blokovány), doporučujeme místo toho používat doc.ready.

1
Kornel