facebook异步加载

Question

我正在为Javascript使用facebook，有人能解释一下异步加载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：

Synchronously. --通常情况下，当您包含一些内容时，这是默认的。假设当您要求某些内容时，浏览器必须在获取其他内容之前等待它被包含。换句话说，它一次只能做一件事。这又好又简单。它是“线性的”，你可以很容易地跟踪发生的事情。

优点:简单。很容易理解，更容易相处。给开发人员带来的麻烦减少了。

缺点:速度和用户体验。如果您在同一页(来自不同服务)上有5个社交按钮，如/share/pin/任何按钮，则会显著减慢页面的速度，因为用户可能无法向下滚动并查看页面的其余部分，因为他们正在等待类似按钮的出现。

对于脚本，只有当您在这里尝试手动指定它时，它才会发生。这意味着你在说“用户可以在Facebook可用之前看到整个页面并开始滚动”。"Facebook“指的是与Facebook相关的任何功能，比如”喜欢“按钮、Facebook连接等等。

优点:速度和用户体验。如果您的页面上有很多脚本，您的用户仍然可以阅读这篇文章/查看该页面并欣赏其内容。

缺点:更难相处。根据您得到的站点，您可能需要重新构造代码，以便等待Facebook可用。您不能只在粘贴的片段之后包含一个随机脚本，并期望它能够正常工作。您必须在事件处理程序(特别是window.fbAsyncInit = function () { ... } )中包装您的功能

TL;DR:异步意味着您可能需要对您自己的代码进行更改，如果它依赖于Facebook。像按钮等可能需要更长的时间才能出现。异步还意味着更好的用户体验。