Stripe JavaScript似乎在我的网站上增加了将近1/2秒的主线程阻塞。根据Stripe文档，async或defer的JS完全可以。事实上，他们说，如果您通过npm包含它，它会自动执行此操作。如果我自己实现的话，这可能是我会做的，但我通过WordPress插件使用Stripe，无论他们在做什么，都是通过iFrame引入Stripe JS，而不是设置async:
<iframe name="__privateStripeController5481" ...>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://js.stripe.com/v3/fingerprinted/js/shared-0950781806f615c0693abdcbbb4bfc19.js"></script>
<script src="https://js.stripe.com/v3/fingerprinted/js/controller-842819e3871bc12ac5b51fa16b375c03.js"></script>
</head>
<body></body>
</html>
</iframe>
我认为应该有一些方法来解决这个问题，而不需要等待插件开发人员自己来做。我的想法是做一些类似的事情：
document.getElementById('ifrm').onload = function() {
const ifrm = document.getElementById('ifrm');
const scripts = ifrm.contentDocument?
ifrm.contentDocument: ifrm.contentWindow.document.getElementsByTagName('script');
for (const element of scripts) {
element.hasAttribute('async') ? {} : element.setAttribute('async', '');
}
};
但是onload，我敢肯定，会太晚了。有没有一种方法可以完成这种修改，使其足够早地发生，从而使iFrame中的脚本最终成为非阻塞的？
不，在浏览器从HTML中读取并开始处理script标记后，您无法更改对其处理方式。(尤其是因为您的页面和iframe运行在同一个主UI线程上——正是该线程被script标记阻止。)
你必须修改插件的代码。(也许可以做一个PR，让插件项目维护人员采用它。)