我在页脚处使用此代码来消除渲染阻止资源
<script async or defer src="/jquery.js">
/* custom code */
<script>
$(document).ready(function(){
$('.menu-bar').click(function(){
$('.nav-bar').slideToggle();
});
$('.dropdown').click(function(){
$(this).toggleClass('inDrop');
$('.dropdown-menu').slideToggle('slow');
});
});
</script>
现在我遇到Uncaught ReferenceError: $ is not defined错误。
什么是使用异步/延迟JavaScript的最佳方法
异步非常困难，因为它会在完成时立即执行，因此您无法确定完成检索脚本的顺序。与defer相比，它也可以忽略不计，因为defer将等到HTML解析之后再启动，然后按顺序启动。
以下是两种情况：
<HTML start>
<async js 1>
<async js 2 (dep on 1)>
<HTML parses>
<js 2 finishes and executes>
<js 1 finishes and executes>
<HTML finishes parsing>
延迟：
<HTML start>
<defer js 1>
<defer js 2 (dep on 1)>
<js 2 loads, and waits>
<js 1 loads, and waits>
<HTML finishes parsing>
<js 1 is fired>
<js 2 is fired>
您可以使用defer保留依赖项。仅当您的脚本顺序不重要时，我才使用99.9％的时间。
如果需要内联js到wait
，直到加载依赖项，您将等待文档就绪状态。jQuery：
`$(document).ready(function() { ...code here... };`香草JS：
`document.addEventListener("DOMContentLoaded", function() {
...code here...
};`