Einige dieser Dienste stellen ihre Skripte bereits (geschickt) asynchron zur Verfügung. Dies hier fasst sie in effizienteren, organisierteren und verständlicheren Code zusammen.
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
frag = doc.createDocumentFragment(),
add = function(url, id) {
if (doc.getElementById(id)) {return;}
js = doc.createElement(script);
js.src = url;
id && (js.id = id);
frag.appendChild( js );
};
// Google+ button
add('https://apis.google.com/js/plusone.js');
// Facebook SDK
add('//#/en_US/all.js#xfbml=1&appId=200103733347528', 'facebook-jssdk');
// Twitter SDK
add('//platform.twitter.com/widgets.js');
fjs.parentNode.insertBefore(frag, fjs);
}(document, 'script'));
Ich habe es beim Durchgehen von Website-Code gefunden und ich vergesse genau, wer es ursprünglich gemacht hat, aber es scheint eher eine Sache von Nicolas Gallagher oder Mathias Bynes zu sein. Korrigieren Sie mich, wenn ich falsch liege.
Sie benötigen das HTML vor Ort, damit die Skripte ihre Sachen einfügen können.
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
<div class="g-plusone" data-size="medium" data-count="true"></div>
<div id="fb-root"></div>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="1" data-show-faces="false" data-action="recommend"></div>
Warum übergeben Sie 'script' an die anonyme Funktion?
Das wird hier erklärt: http://mathiasbynens.be/notes/async-analytics-snippet In diesem Fall gibt es keinen wirklichen Laufzeit-Performance-Gewinn, es spart nur ein paar Bytes. Die Übergabe von
documentvermeidet jedoch Bereichs-Lookups und verbessert somit leicht die Laufzeit-Performance.Wenn er also den eingehenden Parameter ein einzelnes Zeichen hätte und es besonders, da er es mehr als einmal verwendet hätte, hätte das ziemlich viele Bytes gespart. In diesem Beispiel hilft es nicht wirklich viel...
Ich soll ein Tag zu Ihren Codes schreiben?
Weil ich vielleicht dumm bin, aber sie funktionieren bei mir nicht.
Ich mag das, sehr nützlich. Vielen Dank.
Hallo Chris,
Sie haben Recht – das ist Nicolas' allgemeine asynchrone Skriptladefunktion, basierend auf meiner Recherche zu diesem Thema (und insbesondere zum Google Analytics-Snippet).
:)
Eine Erwähnung wert ist, dass diese immer noch den "document complete" (geladen) aufhalten. Aaron Peters hat es leicht umgeschrieben, um auf "window load" zu warten, bevor es ausgeführt wird, um das zu handhaben.
http://www.aaronpeters.nl/blog/why-loading-third-party-scripts-async-is-not-good-enough
Diese Änderung hat jedoch keine Auswirkungen auf das Benutzererlebnis. Siehe die Kommentare zu diesem Artikel.
Es gibt einen besseren Weg, Schaltflächen hinzuzufügen!
Im Grunde erstellen Sie ein lokal gehostetes Bild-Sprite für alle sozialen Symbole. Fügen Sie eine API zum Abrufen von Zählungen hinzu. Sie erhalten einen viel leichteren und saubereren Code (ohne Iframes usw.).
Wir haben bereits ein WordPress-Plugin zum Hinzufügen von Freigabe-Schaltflächen für verschiedene soziale Netzwerke als Proof of Concept.
Es heißt rtSoical – http://wordpress.org/extend/plugins/rtsocial/
Das ist wirklich großartig zu sehen! Perfekte Kombination von JavaScript mit dem richtigen CSS-Code.
Besser als Plugins, da Plugins normalerweise die Ladezeit erhöhen.
Warum verwenden Sie
id && (js.id = id);anstelle vonif(id) js.id = id;?Es spart keine Bytes und die zweite Variante ist meiner Meinung nach etwas besser lesbar.
Trotzdem ein schönes Skript.
Hallo
Kleine Frage: Das Skript funktioniert einwandfrei, aber der Kompromiss für mich war, auf die twttr-Variable zu verzichten. Jetzt möchte ich Google Analytics für die Twitter-Schaltfläche implementieren (Link), also brauche ich sie wirklich.
Was ist Ihrer Meinung nach der beste Weg, diese Funktionalität zu erhalten und gleichzeitig generisch und sauber zu bleiben?
Danke
Ich bin ein Neuling in ASYNC und vielleicht verstehe ich es nicht ganz, aber...
Ich habe einen kleinen Test gemacht, um Ladezeit/Größe mit ShareThis (http://www.sharethis.com/get-sharing-tools/) und der oben genannten ASYNC-Methode zu vergleichen, die all das benötigte JS für die Freigabe lädt...
Bei 5 Freigabe-Schaltflächen (FB, LinkedIn, Pinterest, Google + und Twitter) erhöhte sich die Ladekapazität mit der obigen Methode um etwa 5 %.
Es könnte sich lohnen, eigene Tests durchzuführen, aber das hat einige Fragen für mich beantwortet. Ich kam zu dem Schluss, dass die Verwendung von ShareThis die Leistung beim Einsatz mehrerer Freigabe-Schaltflächen verbesserte. Dasselbe kann ich nicht sagen, wenn nur ein oder zwei ausgewählte Schaltflächen verwendet werden.
Könnte dies eine richtige Schlussfolgerung sein oder verfehle ich den Sinn von ASYNC?
Hallo, Async hat jquery.min.js geladen, aber funktioniert das?? Das
script async src=’/jquery/1.8.2/jquery.min.js’ type=’text/javascript’/
funktioniert nicht :( und das hier
(function(){var po=document.createElement(‘script’);po.type=’text/javascript’;po.async=true;po.src=’ bla bla’;var s=document.getElementsByTagName(‘script’)[0];s.parentNode.insertBefore(po,s)})();
Irgendeine Idee?,,
Zur Antwort an Matt,
Soweit ich weiß, ist der Zweck von Async-Code nicht, die Ladezeit der sozialen Schaltflächen zu verkürzen oder sie kleiner zu machen, sondern vielmehr zu verhindern, dass die Ladezeit der sozialen Schaltflächen die Ladezeit des Restes der Seite verlangsamt. Da die sozialen Schaltflächen mehrere verschiedene Server (Facebook, Google, Twitter usw.) kontaktieren müssen, kann das Laden dieser zusätzliche Zeit in Anspruch nehmen. Bei einer traditionellen Ladeweise stoppt die gesamte Seite das Laden, bis die Schaltflächen geladen sind. Auf diese Weise können die Schaltflächen und die Seite gleichzeitig geladen werden, sodass die Ladegeschwindigkeit der Hauptseiteninhalte nicht beeinträchtigt wird.
Toller Artikel. Danke Chris.
Können wir auch Google Analytics Überwachungscode hier einfügen und sie zu einem einzigen Skript zusammenfassen, das in einer externen .js-Datei gehostet wird?
Wird diese Technik die Ladegeschwindigkeit von http://www.urgentfiles.com/ verringern?
Hallo Chris Coyier,
Ich plane, in diesem Monat eine Website zu starten. Ich möchte, dass sie mobil ist. Welches Framework empfehlen Sie?