如何在不阻塞主线程的情况下运行代码（Google/Doubleclick Ads）

Question

有没有办法在不阻塞主线程的情况下运行 Google Ads 代码？Google Pagespeed Insights 向我显示了一个警告“减少第三方代码的影响”：第三方代码阻止了主线程...

Third-Party                   Size         Main-Thread Blocking Time
Google/Doubleclick Ads        193 KB       253 ms

我在页脚的页面末尾放置了一个脚本。

<script data-ad-client="ca-pub-xxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

我试图添加“data-aload data-original=...”但它没有帮助。也许使用 requestAnimationFrame() 或 setTimeOut() 是一个正确的选择，但我不知道如何实现它。

Answer 1

您可以动态添加脚本。注意，无需添加，async因为浏览器默认认为所有动态脚本都是异步的

const loadScript = (src, id, callback) => {
    const script = document.createElement('script');
    script.src = src; // URL for the third-party library being loaded.
    script.id = id; // e.g., googleMaps or stripe
    script.defer = true; // make sure that browser will run script after page loaded
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback(); // conditional callback
    };
};