Социальные плагины (Fb, Twitter, Google) добавляют 3 секунды времени загрузки на мой сайт.Отложить их? - PullRequest
Новая
       8

Социальные плагины (Fb, Twitter, Google) добавляют 3 секунды времени загрузки на мой сайт.Отложить их?

5 голосов
/ 27 июля 2011

Я знаю, что вы можете использовать атрибут defer = "" html для отсрочки файлов javascript, но он поддерживается только в IE (смеется), и это будет только задерживать файлы javascript, мне нужно отложить загрузку всего плагина.

Есть ли способ сделать это вообще? Мне нравится интеграция с Facebook и тому подобное, но плагины ТАК МЕДЛЕННЫЕ. Это более чем удваивает время загрузки.

Спасибо! ~ Джексон 

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

ПРИМЕЧАНИЕ. Класс .socialplugins предназначен только для размещения в моем заголовке.

Ответы [ 4 ]

4 голосов
/ 27 июля 2011

Динамически загружать файлы JavaScript без блокировки:

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

или

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

Этот метод работает примерно так: 

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

Этот новый элемент загружает исходный файл file1.js.Файл начинает загружаться, как только элемент добавляется на страницу.Важной особенностью этого метода является то, что файл загружается и выполняется без блокировки других процессов страницы, независимо от того, где начинается загрузка.Вы даже можете разместить этот код в документе, не затрагивая остальную часть страницы (кроме одного HTTP-соединения, которое используется для загрузки файла).

эта книга: "Высокопроизводительный JavaScript" by Nickolas Zakas содержит много интересной информации об оптимизации производительности JavaScript.

1 голос
/ 23 августа 2012 
/*
* 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");
1 голос
/ 27 июля 2011

Два решения, создайте элемент скрипта (он будет загружать JS асинхронно): 

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

А также написание тега сценария напрямую: 

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

Оба примера взяты из даже более быстрых сайтов книги Стива Соудерса.

0 голосов
/ 27 июля 2011

Переместите все свои теги в конец своей страницы, прямо над тегом </body>. Это должно препятствовать тому, чтобы встроенные сценарии блокировали пользовательский интерфейс и т. Д.

...