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

14

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

Jason
quelle

Antworten:

14

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.

Gareth Farrington
quelle
1
Yahoo vertreibt auch das YSlow-Plugin für Firefox, das Ihre Seite anhand der oben genannten Best Practices analysiert und Ihnen ein Zeugnis aushändigt. Siehe developer.yahoo.com/yslow
Alan
1
Es gibt auch Techniken wie das asynchrone Laden, die verwendet werden können, wenn Sie Site-Elemente haben, für die das Skript beim ersten Rendern der Seite nicht geladen werden muss. Sowohl dies als auch das Platzieren des Skripts am unteren Rand der Seite unterliegen Einschränkungen. In einigen Fällen müssen Sie das JS in den Dokumentenkopf laden.
JasonBirch
7

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/

Der Desintegrator
quelle
1
Hey, du hast CDNing gestohlen; Es soll etwas Kanadisches bedeuten! ;)
JasonBirch
jajajaja good one
The Disintegrator
7

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/

Jeff Atwood
quelle
3

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 .

JasonBirch
quelle
1

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

Seite laden mit CSS im Kopf und Javascript am unteren Rand

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

Seitenladen mit nicht blockierendem Javascript

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

Seitenladen mit allem, was nicht blockiert

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:

Saif Bechan
quelle
Der Unterschied liegt in der Position der blauen Linie, die meiner Einschätzung nach zu dem Zeitpunkt liegt, an dem die Seite gerendert wird. Aus der Sicht des Endbenutzers ist dies der Zeitpunkt, an dem die Seite "geladen" wird, da dies der Zeitpunkt ist, an dem sie anfängt, Inhalte zu sehen. Im ersten Beispiel beginnt das Rendern nach dem Laden der letzten JS-Datei bei 900 ms. In der zweiten Phase werden die Stylesheets geladen (~ 700ms). Im dritten Fall wird der HTML-Code heruntergeladen (~ 500 ms). Ich würde immer noch mit dem zweiten Ansatz weitermachen, da Sie nicht wirklich wollen, dass CSS nach dem Rendern der Seite geladen wird.
Tim Fountain