速度优化：使用async优化渲染阻塞脚本

Question

在https://bm-translations.de上（完全自编码，没有CMS等），我试图消除<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>的渲染阻塞。由于页面底部有包含Bootstrap、jquery懒加载等内容以及内联Javascript的另一个脚本<script src="globaljs.js"></script>，所以延迟加载不起作用。我想把async都赋予它们。一开始我以为这样可以解决问题，但是有时候（随机的）会显示这个：

我想知道是否有其他选项或方法可以确保在页面底部的脚本载入之前，已经加载了渲染阻塞的jquery，但是不会阻塞渲染？

- Krystian

---

据我所知，通过带有async属性的script标签下载的脚本不能保证按照精确的顺序加载。在您的情况下，顺序很重要，因此可以同步进行加载（即，在相应的script标签中不要给出async属性），或者需要一些编程（例如，请参阅https://stackoverflow.com/q/24268791/1287643）。但是，为了消除渲染阻塞，通常将所有`script`标签放置在`document.body`的最后一个子元素位置会有所帮助。 - rishat

你需要给它们都加上 defer 属性。或者你也可以将 jQuery 移动到 body 的末尾？ - Bergi

将其放置在懒加载脚本之上但页面折叠区域之下是解决方案。其他方法都会导致布局问题。感谢您的提示！:-) 欢迎提供任何性能提示，我将支付赏金给它 :-) - Krystian

Answer 1

bm-translations.de不需要优化jquery加载，这是个人意见。jQuery脚本不会阻塞渲染，已经放置在底部。

据我所知，在页面底部有两个脚本。第一个是jQuery，第二个是动态的，由服务器端为每个页面单独生成，将动态行为连接到HTML。

顺便说一下 - 将JS放在</body>结束标记之前的可能替代方法：

• 构建您的脚本
  • 只需通过脚本连接您的脚本（对于旧项目，这可能很有效）
  • 使用browserify、webpack等
• 使用RequireJS，它可以处理异步脚本加载并加载依赖项
• 编写自定义JS，保证加载顺序

但所有这些方法似乎都不适用于bm-translations.de

- Andrii Muzalevskyi

Answer 2

你可以使用以下方法使用Promise顺序加载脚本。

在DOMContentLoaded时按顺序加载脚本，要异步加载脚本，可以使用ES6 Promise。

示例代码：

document.addEventListener('DOMContentLoaded', async function(event) {
    await loadScript("https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js");
    await loadScript("globaljs.js");
});

function loadScript(src) {
    return new Promise((resolve, reject) => {
        let file = document.createElement('script');
        file.src = src;
        document.body.appendChild(file);
        file.onload = file.onreadystatechange = function() {
            resolve(true);
        };
    });
}

- Sohail Ashraf