我正在一个网站上工作并致力于其Page Speed Insights并拥有一个
Eliminate render-blocking JavaScript and CSS in above-the-fold content
所以基本上发生的事情是我在页面顶部有两个外部javascript导入，它是：
<script src="/remotestaff_2015/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/remotestaff_2015/js/bootstrap.min.js" type="text/javascript"></script>
这个网站有很多javascripts，但有些是在<body>标签之后的页面底部。所以我的问题是那两个在顶部。为了修复渲染块，我已经在google上搜索了一下，发现我可以使用defer或async属性。我的问题是网站上有一些模块有内联javascripts，如：
<script type="text/javascript">
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
if ($("#wrapper").hasClass("toggled")) {
$(".color-fade").css("opacity", ".5");
} else {
$(".color-fade").css("opacity", "1");
}
});
因此，如果我推迟我的jquery文件，我的内联javascripts会出现错误，因为它会在没有加载jquery的情况下加载。有没有办法修复这个内联脚本或以某种方式使它们在延迟的jquery或其他js文件加载后运行？我不想将这些内联脚本放在其他文件中。
据MDN称：
此布尔属性设置为向浏览器指示在解析文档之后但在触发DOMContentLoaded之前要执行脚本。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
因此，让您的内联脚本等待文档和加载的延迟脚本。发生这种情况时，DOMContentLoaded事件将会触发：
<script>
document.addEventListener('DOMContentLoaded', function() {
// Inline scripts go here
});
</script>
请注意，$(document).ready(function()不再需要了，因为那将等待相同的事件（DOMContentLoaded）。
你可以动态加载你的js
$(window).bind("load", function() {
// code here
});
要动态加载脚本，您可以使用代码
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
如果有帮助，请告诉我。
我会这样做，以使一切都干净。加载jQuery文件而不延迟，并在HTML头中定义菜单切换事件。
<script src="/remotestaff_2015/js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
// option 1
/* $('#menu-toggle').click(function() {
// your code
}); */
});
// option 2
$(document).on('click', '#menu-toggle', function() {
// your code
});
</script>
现在，您可以在HTML正文中的任何位置呈现元素，甚至可以从AJAX回调中呈现元素。