Javascript 延迟或异步fb聊天

我用以下短代码在我的网站上添加了FB聊天：

<!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        xfbml            : true,
        version          : 'v6.0'
      });
    };

    (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 = 'https://connect.facebook.net/fr_FR/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your customer chat code -->
  <div class="fb-customerchat"
    attribution=setup_tool
    page_id="366112410637632"
    theme_color="#44bec7"
    logged_in_greeting="Bonjour, si vous avez la moindre question, je suis disponible pour vous aider !"
    logged_out_greeting="Bonjour, si vous avez la moindre question, je suis disponible pour vous aider !">
  </div>

window.fbAsyninit=函数（）{
FB.init({
xfbml：是的，
版本：“v6.0”
});
};
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=https://connect.facebook.net/fr_FR/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；

但是在加载过程中它有点重，yslow告诉我应该延迟或异步它，我尝试将延迟添加到，但它似乎不起作用。 我对js有点生疏我怎么能做到

---

提前感谢，

我回答这个问题有点晚了，但在2020年对我有效的解决方案（使用facebook像素）是将facebook脚本包装在一个超时函数中：

facebook为你的聊天插件提供的代码是：

<!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        xfbml            : true,
        version          : 'v8.0'
      });
    };

    (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 = 'https://connect.facebook.net/en_GB/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your Chat Plugin code -->
  <div class="fb-customerchat"
    attribution=setup_tool
    page_id="xxxxxxx" theme_color="#BB1C1C">
  </div>

window.fbAsyninit=函数（）{
FB.init({
xfbml：是的，
版本：“v8.0”
});
};
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=https://connect.facebook.net/en_GB/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；

然后我把它包装成这样：

<div id="fb-root"></div>
<script>
setTimeout(function(){
    window.fbAsyncInit = function() {
        FB.init({
            xfbml: true,
            version: 'v8.0'
        });
    };

    (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 = 'https://connect.facebook.net/en_GB/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}, 4500);
</script>
<div class="fb-customerchat" attribution=setup_tool page_id="1429606483967175" 
theme_color="#BB1C1C"></div>

setTimeout（函数（）{
window.fbAsyninit=函数（）{
FB.init({
xfbml：是的，
版本：“v8.0”
});
};
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=https://connect.facebook.net/en_GB/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；
}, 4500);

我回答这个问题有点晚了，但2020年对我有效的解决方案（以及facebook像素）是将facebook脚本包装在一个超时函数中：

facebook为你的聊天插件提供的代码是：

<!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        xfbml            : true,
        version          : 'v8.0'
      });
    };

    (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 = 'https://connect.facebook.net/en_GB/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your Chat Plugin code -->
  <div class="fb-customerchat"
    attribution=setup_tool
    page_id="xxxxxxx" theme_color="#BB1C1C">
  </div>

window.fbAsyninit=函数（）{
FB.init({
xfbml：是的，
版本：“v8.0”
});
};
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=https://connect.facebook.net/en_GB/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；

然后我把它包装成这样：

<div id="fb-root"></div>
<script>
setTimeout(function(){
    window.fbAsyncInit = function() {
        FB.init({
            xfbml: true,
            version: 'v8.0'
        });
    };

    (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 = 'https://connect.facebook.net/en_GB/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}, 4500);
</script>
<div class="fb-customerchat" attribution=setup_tool page_id="1429606483967175" 
theme_color="#BB1C1C"></div>

setTimeout（函数（）{
window.fbAsyninit=函数（）{
FB.init({
xfbml：是的，
版本：“v8.0”
});
};
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=https://connect.facebook.net/en_GB/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；
}, 4500);

以与普通SDK相同的方式嵌入它可能会起作用（请注意，脚本源不同）。Facebook曾建议使用与上述普通SDK类似的代码，但其中还包括显式设置async属性IIRC。他们现在似乎已经切换到了一个更简单的版本，可能是因为浏览器对async/defer的支持比以前更广泛了？由于它似乎不起作用，我在GTMetrix上仍然存在这个问题：这似乎不是SDK本身，而是它加载的附加脚本。也许稍后使用超时触发初始嵌入代码可能会有所帮助？我这样做了，没关系！谢谢：）以与普通SDK相同的方式嵌入它可能会起作用，（请注意，脚本源是不同的。）Facebook曾经为普通SDK建议类似于上述代码的代码，但其中还包括显式设置async属性IIRC。他们现在似乎已经切换到了一个更简单的版本，可能是因为浏览器对async/defer的支持比以前更广泛了？由于它似乎不起作用，我在GTMetrix上仍然存在这个问题：这似乎不是SDK本身，而是它加载的附加脚本。也许稍后使用超时触发初始嵌入代码可能会有所帮助？我这样做了，没关系！谢谢：）谢谢你的回答！您的意思是上述解决方案可能会导致像素出现问题？谢谢您的回答！你是说上述解决方案可能会导致像素问题？