facebook javascript SDK - Загрузка асинхронно

Question

Я использую facebook SDK для Javascript, может кто-нибудь объяснить, что это означает, чтобы загрузить SDK асинхронно и как этот код означает, что он загружается асинхронно и как это повлияет на мое приложение.

// Load the SDK asynchronously 
    (function(d){ 
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; 
     if (d.getElementById(id)) {return;} 
     js = d.createElement('script'); js.id = id; js.async = true; 
     js.src = "//connect.facebook.net/en_US/all.js"; 
     ref.parentNode.insertBefore(js, ref); 
     }(document)); 

Answer 1

min2bro, есть, вообще говоря, два пути скрипт/SDK можно загружать:

Синхронно. Это то, что обычно является дефолтом, когда вы включаете материал. Предполагается, что когда вы просите что-то, браузер ДОЛЖЕН ждать, пока он будет включен, прежде чем извлекать другие вещи. Другими словами, он будет делать только 1 вещь за раз. Это приятно и просто. Это «линейный», и вы можете легко проследить, что происходит.

Плюсы: Простота. Легко понять, легче работать. Вызывает меньше головных болей для разработчика.

Против: Скорость и пользовательский опыт. Если у вас есть 5 социальных кнопок/share/pin/whatever на одной странице (из разных сервисов), это значительно замедлит вашу страницу в том смысле, что пользователь не сможет прокрутить вниз и посмотреть остальную часть страницы, потому что они ждут появления похожих кнопок.

Асинхронно. Для сценариев это произойдет, только если вы укажете его вручную, как вы пытаетесь здесь. Это означает, что вы говорите: «Это нормально для пользователя, чтобы увидеть всю страницу и начать прокрутку до того, как будет доступен SDK для Facebook». «Facebook SDK» относится к любой функциональности, которая относится к Facebook, например, к кнопкам «like», Facebook connect и т. Д.

Плюсы: Скорость и пользовательский интерфейс. Если на вашей странице много скриптов, ваш пользователь все равно может прочитать статью/увидеть страницу и наслаждаться контентом.

Против: Сложнее работать с. В зависимости от того, какой сайт вы получили, вам может потребоваться реструктурировать ваш код, чтобы он дождался выхода SDK для Facebook. Вы не можете просто включить случайный скрипт после фрагмента, который вы вставили, и ожидать, что он будет работать. Вам нужно будет обернуть свою функциональность в обработчике событий, в частности window.fbAsyncInit = function() { ... }

TL; DR: Async означает, что вам может потребоваться внести изменения в свой собственный код, если он полагается на SDK для Facebook. Подобно кнопкам и т. Д., Может потребоваться немного больше времени. Async также означает лучший пользовательский интерфейс.