it-swarm-eu.dev

Jaký je nejlepší způsob, jak načíst Javascript na stránku pro optimalizaci výkonu?

Existuje způsob, jak načíst můj JavaScript na stránku, která ho zrychlí?

14
Jason

Můžete udělat několik věcí:

  1. Načtěte HTML a CSS před javascript. To dává prohlížeči vše, co potřebuje k rozložení stránky a vykreslení. Díky tomu bude mít uživatel dojem, že je stránka úhledná. Umístěte značky skriptů nebo bloky co nejblíže ke konci těla.

  2. Zvažte použití CDN. Pokud používáte některou z populárních knihoven, jako je JQuery, mnoho společností (např. Google, yahoo) provozuje bezplatné CDN, které můžete použít k načtení knihoven.

  3. Načíst kód z externího souboru namísto vloženého skriptu. To dává prohlížeči možnost ukládat obsah JS do mezipaměti a nemusí jej vůbec načítat. Postupné načítání stránek bude rychlejší.

  4. Na webovém serveru zapněte kompresi zip.

Yahoo má skvělou stránk návrhů, které mohou pomoci zkrátit dobu načítání stránky.

14

Kromě minifingu, gzipingu a CDNingu (nové slovo?). Měli byste zvážit odložené načítání. V zásadě to je dynamické přidávání skriptů a zabránění blokování, což umožňuje paralelní stahování.

Existuje mnoho způsobů, jak toho dosáhnout, je to ten, který preferuji

<script type="text/javascript">
    function AttachScript(src) {
        window._sf_endpt=(new Date()).getTime();
        var script = document.createElement("script");
        document.getElementsByTagName("body")[0].appendChild(script);
        script.src = src;
    }
    AttachScript("/js/scripts.js");
    AttachScript("http://www.google-analytics.com/ga.js");
</script>

Umístěte jej těsně před značku zavírání těla a pomocí AttachScript načtěte každý soubor js.
Některé další informace zde http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

7

Možná budete chtít podívat na způsob, jakým Google načítá Analytics:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.Push(['_setAccount', 'UA-xxxxxxx-x']);
  _gaq.Push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Vzhledem k tomu, že se považuje za skript typu „best practice“:
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

7
Jeff Atwood

Několik lidí Google ohlášeno nový projekt s otevřeným zdrojovým kódem na Velocity 201 s názvem Diffable . Diffable provádí nějakou magii, aby postupně publikoval pouze části JS, HTML a CSS, které se změnily od verze, která je uložena v mezipaměti uživatele, spíše než odeslání celého nového souboru, když je vydána nová verze.

Tato technika je šíleně v pohodě a je v současné době nejúčinnější (a stojí za námahu) na webech, kde používáte velkou základnu kódu JavaScript s malými častými změnami kódu. To platí zvláště dobře pro aplikace, jako jsou Mapy Google, které procházejí nejméně každé vydání každé úterý , a průměrně asi 100 nových vydání ročně. Obecně to také dává smysl, jakmile se místní úložiště HTML5 rozšíří.

BTW, pokud jste neviděli Google Michael Michael Jones mluvit o změně (v geoprostorovém kontextu), stojí za to sledovat jeho celý hlavní slovo na GeoWeb 2009 .

3
JasonBirch

Aktualizovat tuto otázku. Domnívám se, že v moderní době již není potřeba způsob blokování načítání, prohlížeč to udělá za vás.

Přidal jsem otázku do StackOverflow, přidám zde obsah popelem.

Jediným rozdílem je, že událost načtení bude spuštěna o něco dříve, ale samotné načítání souborů zůstane stejné. Chci také dodat, že i když je onload dokonce spuštěn dříve s neblokujícím skriptem, neznamená to, že soubory JS jsou spouštěny dříve. V mém případě bylo nejlepší nastavení normální

Teď první skripty vypadají takto:

<script>
(function () {
    var styles = JSON.parse(myObject.styles);
    for( name in styles ){
        var link  = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('type', 'text/css');
        link.setAttribute('href', styles[name]);
        document.getElementsByTagName('head')[0].appendChild(link);
    }

    var scripts = JSON.parse(myObject.scripts);
    for( name in scripts ){
        var e = document.createElement('script');
        e.src = scripts[name];
        e.async = true;
        document.getElementsByTagName('head')[0].appendChild(e);
    }
}());
</script>

myObject.styles je zde jen objekt, který obsahuje všechny adresy URL pro všechny soubory.

Mám spuštěn 3 test, zde jsou výsledky:

Normální nastavení

Page load with css in the head and javascript at the bottom

Toto je pouze normální nastavení, máme 4 css soubory v hlavě a 3 css soubory v dolní části stránky.

Teď nevidím nic blokujícího. Co vidím, že se vše načítá současně.

Neblokující JS

Page load with non-blocking javascript

Teď, abych si to vzal trochu dále, udělal jsem POUZE soubory js neblokující. To se skriptem výše. Najednou vidím, že moje soubory css blokují načítání. Je to zvláštní, protože v prvním příkladu nic neblokuje. Proč css náhle blokuje zátěž?

Vše neblokující

Page load with everything non-blocking

Nakonec jsem provedl test, kde jsou všechny externí soubory načteny neblokujícím způsobem. Teď nevidím žádný rozdíl s naší první metodou. Oba vypadají stejně.

Závěr

Můj závěr je, že soubory jsou již načteny neblokujícím způsobem, nevidím potřebu přidat speciální skript.

Nebo mi něco chybí?

Více:

1
Saif Bechan