Všichni víme, že asynchronní načítání zdrojů je klíčem k zamezení nežádoucího a zbytečného blokování v prohlížeči. Existuje mnoho skriptů/knihoven, které vám pomohou s asynchronním načítáním skriptů, ale ty, které uspěly, jsou jednoduché, kompaktní a spolehlivé. Tato slova popisují LABjs Kylea Simpsona, lehký nástroj pro načítání vašich skriptů bez blokování.
Stáhněte si LABjs
LABjs si můžete stáhnout na webu LABjs nebo přes GitHub.
Zahrnutí tradičního skriptu
Tradiční zahrnutí skriptu blokuje načítání následných zdrojů. Toto je tradiční blokující zahrnutí skriptů:
<script src="mootools-1.3.js"></script> <script src="lightface/Source/LightFace.js"></script> <script src="lightface/Source/LightFace.Request.js"></script> <script src="lightface/Source/LightFace.Static.js"></script> <script src="Color.js"></script>
Počkej...počkej...počkej. Jaká ztráta času. Jiné části stránky se na těchto skriptech nespoléhají, tak proč by uživatelé měli čekat na načtení těchto skriptů, než se načtou jiné zdroje? LABjs tento nepořádek opravuje.
Použití LABjs
Samotný LABjs musí být součástí stránky prostřednictvím tradiční značky SCRIPT:
<script src="LAB.js"></script>
$LAB
proměnná je handle LABjs. Skripty můžete načíst pomocí metody skriptu:
$LAB.script('mootools-1.3.js');
wait
umožňuje zabránit spuštění skriptu (nenačte se ) před provedením následujících skriptů v řetězci:
$LAB .script('mootools-1.3.js').wait() .script('mootools-dependent-script.js');
Pomocí wait
je skvělý způsob, jak spravovat závislosti. Například nemůžete načíst MooTools More před MooTools Core, že? I když nařídíte Core, aby se načetl jako první, může se před Core načíst Více. To způsobí mnoho, mnoho chyb. Můžete použít wait
jak tomuto problému předejít:
$LAB .script('mootools-1.3.js').wait() .script('mootools-1.3-more.js');
wait
metoda také funguje jako zpětné volání po dokončení načítání skriptů:
$LAB .script('mootools-1.3.js').wait() .script('mootools-1.3-more.js').wait(function() { // Now that the Fx.Accordion is available.... var accordion = new Fx.Accordion(/* ... */); });
Abych dokončil příklad, začal jsem tento příspěvek:
$LAB .script('mootools-1.3.js').wait() .script('lightface/Source/LightFace.js').wait() .script('lightface/Source/LightFace.Request.js') .script('lightface/Source/LightFace.Static.js').wait(function() { var modal = new LightFace.Request(/* */); }) .script('Color.js')
Použití LABjs k načtení skriptů je tak jednoduché!
Možnosti LABjs
LABjs také poskytuje spoustu možností, jak přizpůsobit načítání skriptů vašim osobním potřebám. Možnosti lze nastavit pomocí metody setOptions:
$LAB.setOptions({ AlwaysPreserveOrder:true });
Některé z možností zahrnují:
AlwaysPreserveOrder
: Implicitně volá funkci wait() po každém skriptuUsePreloading
:Umožňuje LABjs vyzkoušet další triky načítání (informace o triku zde)BasePath
:Nastaví základní cestu pro všechny skripty
K dispozici je mnoho dalších možností. Více informací o možnostech LABjs získáte v dokumentaci.
LABjs + asynchronní FTW
LABjs je úžasný, úžasný malý nástroj: kompaktní, snadno použitelný a spolehlivý. Twitter se mnou musí souhlasit, protože používají LABjs. Velké rekvizity Kyleovi za jeho vynikající práci. Určitě vyzkoušejte LABjs; nízké riziko, vysoká odměna.