javascript - facebook javascript SDK - 异步加载

Question

我正在使用 facebook SDK for 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 可以通过两种方式加载:

同步。当您添加内容时，这通常是默认设置。假设当您请求某些内容时，浏览器必须等待它被包含，然后才能获取其他内容。换句话说，它一次只会做一件事。这很好又简单。它是“线性的”，您可以轻松追踪发生的情况。

优点:简单。易于理解，更易于使用。减少开发人员的麻烦。

缺点:速度和用户体验。如果您在同一页面上有 5 个社交喜欢/分享/固定/任何按钮(来自不同的服务)，那么它会显着减慢您的页面速度，因为用户可能无法向下滚动并看到其余的内容页面，因为他们正在等待“喜欢”按钮的出现。

异步。对于脚本，只有当您手动指定它时才会发生这种情况，就像您在此处尝试的那样。这意味着您的意思是“用户可以在 Facebook SDK 可用之前查看整个页面并开始滚动”。 “Facebook SDK”是指与 Facebook 相关的任何功能，例如“喜欢”按钮、Facebook 连接等。

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

缺点:更难合作。根据您所在的网站，您可能需要重组代码，以便等待 Facebook SDK 可用。您不能只在粘贴的代码片段后添加一个随机脚本并期望它能够工作。您必须将功能包装在事件处理程序中，特别是 window.fbAsyncInit = function () { ... }

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