javascript - Webvitals 主线程阻塞时间

Question

function init() {  
      (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.async = true;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1111";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'))
        
}
window.onload = init;

尽管我在加载时调用了facebook 评论插件，但作为Main-Thread Blocking Time的一部分，我在 web-vitals 上得到了一个负分。

Answer 1

您应该使用Web Worker来加载facebook_comments插件。

Web Workers 是一种让 Web 内容在后台线程中运行脚本的简单方法。

这是一个例子：

facebook_comments.js：

function init() {  
      (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.async = true;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1111";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'))    
}

然后通过网络工作者加载它：

new Worker('facebook_comments.js');

这应该在后台线程中加载脚本，从而优化 TBT。