Wtyczki społecznościowe (Fb, Twitter, Google) dodające do mojej witryny 3 sekundy czasu ładowania. Odwrócić ich?

Question

Wiem, że możesz użyć atrybutu html defer = "" do odroczenia plików javascript, ale jest on obsługiwany tylko w IE (lol) i to tylko opóźni pliki javascript, muszę odłożyć cały ładunek od ładowania.

Czy w ogóle można to zrobić? Uwielbiam integrację z Facebookiem i takie, ale plaginy są WOLNE. To więcej niż podwaja czas ładowania.

Dzięki! ~ Jackson

<div class="socialplugins"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="DesignSweeter">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
</div> 

<div class="socialplugins"> 
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=218305128208494&amp;xfbml=1"></script><fb:like href="http://designsweeter.com/" send="false" layout="box_count" width="55" show_faces="true" font=""></fb:like> 
</div> 

<div class="socialplugins"> 
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> 
<g:plusone size="tall" count="true"></g:plusone> 
</div> 

UWAGA: Klasa .socialplugins jest tylko do pozycjonowania w moim cel.

Answer 1

wczytanie plików JavaScript dynamicznie nieblokującą mody:

http://berklee.github.com/nbl/

lub

https://github.com/rgrove/lazyload/

ta technika działa w pewnym sensie:

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = "file1.js"; 
document.getElementsByTagName("head")[0].appendChild(script); 

Ten nowy element ładuje plik źródłowy plik1.js. Plik rozpoczyna się pobieranie , gdy tylko element zostanie dodany do strony. Ważną rzeczą w tej technice jest to, że plik jest pobierany i uruchamiany bez blokowania innych procesów stron, niezależnie od miejsca rozpoczęcia pobierania. Możesz nawet umieścić ten kod w dokumencie dokumentu bez wpływu na resztę strony (oprócz połączenia HTTP używanego do pobrania pliku).

tej książki: "High Performance JavaScript" przez Nickolas Zakas ma wiele interesujących informacji na temat optymalizacji wprawdzie wydajność JavaScript.

Answer 2

Przenieś wszystkie swoje tagi na koniec strony, tuż nad tagiem </body>. To powinno zapobiec skrypty in-line z blokowania UI itp

Answer 3

dwa rozwiązania, tworzyć element skryptu (to będzie załadować JS asynchronicznie):

var scriptElem = document.createElement('script'); 
scriptElem.src = 'http://anydomain.com/A.js'; 
document.getElementsByTagName('head')[0].appendChild(scriptElem); 

A także pisanie tag skryptu bezpośrednio:

document.write("<script type='text/javascript' src='A.js'><\/script>"); 

Oba przykłady są z Even Szybsze strony internetowe książka Steve'a Soudersa.

Answer 4

/* 
* Google Plus 
* http://www.google.com/intl/en/webmasters/+1/button/index.html 
* */ 
(function() { 
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
    po.src = 'https://apis.google.com/js/plusone.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
})(); 

/* 
* Facebook 
* https://developers.facebook.com/docs/reference/plugins/like/ 
* */ 
(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 

/* 
* Twitter 
* http://twitter.com/about/resources/buttons 
* */ 
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");