Wie lade ich Javascript am besten in eine Seite, um die Leistung zu optimieren?

Gibt es eine Möglichkeit, mein JavaScript in eine Seite zu laden, damit es schneller geladen wird?

Es gibt ein paar Dinge, die Sie tun können:

1. Laden Sie HTML und CSS vor dem Javascript. Dies gibt dem Browser alles, was er benötigt, um die Seite anzulegen und zu rendern. Dies gibt dem Benutzer den Eindruck, dass die Seite bissig ist. Platzieren Sie Skript-Tags oder -Blöcke so nah wie möglich am schließenden Body-Tag.

2. Erwägen Sie die Verwendung eines CDN. Wenn Sie eine der beliebten Bibliotheken wie JQuery verwenden, betreiben viele Unternehmen (z. B. Google, Yahoo) kostenlose CDNs, mit denen Sie die Bibliotheken laden können.

3. Laden Sie Code aus einer externen Datei anstelle eines eingebetteten Skripts. Dies gibt dem Browser die Möglichkeit, den JS-Inhalt zwischenzuspeichern und muss ihn überhaupt nicht laden. Aufeinanderfolgende Seitenladevorgänge sind schneller.

4. Aktivieren Sie die Zip-Komprimierung auf dem Webserver.

Yahoo hat eine großartige Seite mit Vorschlägen, mit denen sich die Ladezeiten von Seiten verkürzen lassen.

Neben Minifing, Gziping und CDNing (neues Wort?). Sie sollten überlegen, das Laden zu verschieben. Grundsätzlich werden die Skripte dynamisch hinzugefügt und das Blockieren verhindert, sodass parallele Downloads möglich sind.

Es gibt viele Möglichkeiten, das ist die, die ich bevorzuge

<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>

Platzieren Sie dies direkt vor dem schließenden Body-Tag und laden Sie jede js-Datei mit AttachScript.
Weitere Informationen hier http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

Vielleicht möchten Sie sich auch ansehen, wie Google Analytics lädt:

<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>

Da es sich um eine Art "Best Practice" -Skript handelt:
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

Einige Google-Leute haben auf der Velocity 2010 ein neues Open-Source-Projekt namens Diffable angekündigt . Diffable führt einige magische Aktionen aus, um inkrementell nur die Teile von JS, HTML und CSS zu veröffentlichen, die sich seit der im Cache des Benutzers gespeicherten Version geändert haben, anstatt eine vollständige neue Datei zu senden, wenn eine neue Version veröffentlicht wird.

Diese Technik ist wahnsinnig cool und derzeit am effektivsten (und die Mühe wert) auf Websites, auf denen Sie eine große JavaScript-Codebasis mit kleinen, häufigen Codeänderungen verwenden. Dies gilt insbesondere für Anwendungen wie Google Maps, für die jeden Dienstag mindestens eine Veröffentlichung stattfindet , und für die im Durchschnitt 100 neue Veröffentlichungen pro Jahr durchgeführt werden. Es macht im Allgemeinen auch sehr viel Sinn, wenn der lokale HTML5-Speicher weiter verbreitet ist.

Übrigens, wenn Sie nicht gesehen haben, wie Michael Jones von Google über Veränderungen sprach (in einem räumlichen Kontext), sollten Sie sich seine gesamte Keynote auf der GeoWeb 2009 ansehen .

Um ein Update auf diese Frage zu geben. Ich denke, dass in der heutigen Zeit die Art des nicht blockierenden Ladens nicht mehr benötigt wird, der Browser wird es für Sie tun.

Ich habe eine Frage zu StackOverflow hinzugefügt, ich werde den Inhalt hier alswel hinzufügen.

Der einzige Unterschied besteht darin, dass das Ladeereignis etwas früher ausgelöst wird, das Laden der Dateien selbst jedoch gleich bleibt. Ich möchte auch hinzufügen, dass selbst wenn der Onload mit dem nicht blockierenden Skript früher ausgelöst wird, dies nicht bedeutet, dass die JS-Dateien früher ausgelöst werden. In meinem Fall hat sich das normale Setup am besten bewährt

Nun sehen die Skripte zunächst so aus:

<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 ist hier nur ein Objekt, das alle URLs für alle Dateien enthält.

Ich habe 3 Test ausgeführt, hier sind die Ergebnisse:

Normales Setup

Dies ist nur das normale Setup, wir haben 4 CSS-Dateien im Kopf und 3 CSS-Dateien am unteren Rand der Seite.

Jetzt sehe ich nichts blockieren. Was ich sehe ist, dass alles gleichzeitig geladen wird.

Nicht blockierendes JS

Um dies ein wenig weiter zu führen, habe ich NUR die js-Dateien blockierungsfrei gemacht. Dies mit dem obigen Skript. Ich sehe plötzlich, dass meine CSS-Dateien das Laden blockieren. Das ist seltsam, weil es im ersten Beispiel nichts blockiert.Warum blockiert CSS plötzlich die Ladung?

Alles nicht blockierend

Schließlich habe ich einen Test durchgeführt, bei dem alle externen Dateien blockierungsfrei geladen werden. Jetzt sehe ich keinen Unterschied zu unserer ersten Methode. Sie sehen einfach beide gleich aus.

Fazit

Mein Fazit ist, dass die Dateien bereits nicht blockierend geladen sind, ich sehe keine Notwendigkeit, ein spezielles Skript hinzuzufügen.

Oder fehle ich hier etwas?

Mehr:

• Artikel: http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
• Frage: /programming/6828271/javascript-non-blocking-scripts-why-dont-simply-put-all-scripts-before-body
• Frage: /programming/5765113/do-modern-browsers-still-limit-parallel-downloads
• Code: http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
• Code: http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/