问题描述
在https://bm-translations.de（完全自编码，没有cms等）上，我试图消除<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>的渲染阻塞。 Defer无法正常工作，因为页面<script src="globaljs.js"></script>的末尾还有另一个脚本，其中包含Bootstrap和jquery延迟加载等，以及其后的内联Javascript。我以为我可以给所有人async。起初，我认为它可以正常工作，但有时（如随机）显示如下：
我想知道是否还有其他选项或方法可以确保在页面底部的脚本之前加载渲染阻止jQuery，但没有渲染阻止？
解决方法
您可以使用以下方法按顺序依次加载带有诺言的脚本。
在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);
};
});
}
bm-translations.de不需要优化jquery加载，个人观点。 jQuery脚本不会阻止渲染，它已经放在底部
据我了解，在页面底部有两个脚本。第一个是jquery，第二个是动态的，由服务器端分别为每个页面生成，它将动态行为连接到HTML
BTW-将JS放在</body>结束标记之前的可能替代方法：
- 构建脚本
- 仅通过脚本连接脚本（对于旧项目，这可能会很好地工作）
- 使用
browserify，webpack等
- 使用
RequireJS可以处理异步脚本加载和加载依赖项 - 编写保证加载顺序的自定义JS
但是所有这些方法似乎不适用于bm-translations.de