Почему услуги, такие как Facebook, Disqus, Google, Twitter говорят нам, что

Question

Почему услуги, такие как Facebook Like Button, Disqus комментарии .. скажите нам, чтобы добавить этот код в наш документ

<div id="fb-root"></div> 
<script>(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/it_IT/sdk.js#xfbml=1&version=v2.5"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
</script> 

И не просто добавить этот код это то же самое?

<div id="fb-root"></div> 
<script id="facebook-jssdk"src="//connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.5"></script> 

Answer 1

Когда браузер находит тег <script src="...">, он блокирует дальнейший отрисовка страницы до загрузки javascript (или загрузка не удалась). Очевидно, что это не то, что вы хотите для своего сайта, застряли из-за внешних javascripts.

Facebook дает вам код, который будет загружать javascript асинхронно, не мешая загрузке вашей страницы. Начиная с HTML5, у вас также есть атрибут async для тега скрипта, который дает вам аналогичное поведение. <script src="..." async></script>

Вы можете найти подробную информацию о яваскрипте загрузке, в этой статье: http://www.html5rocks.com/en/tutorials/speed/script-loading/

Answer 2

<script>(function(d, s, id) { 
     var js, fjs = d.getElementsByTagName(s)[0]; //line 1 
     if (d.getElementById(id)) return;//line 2 
     js = d.createElement(s); js.id = id;//line 3 
     js.src = "//connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.5"; //line 4 
     fjs.parentNode.insertBefore(js, fjs);//line 5 
    }(document, 'script', 'facebook-jssdk')); 
</script> 

просто наблюдать на линии 1 и линии 5 - это просто пытается убедиться, что сценарий

1) Facebook должен быть первым скрипт на странице.

2) скрипт facebook загружен лениво. То есть, событие document.ready() не будет ждать загрузки этого скрипта.