我在页脚使用此代码来消除渲染阻塞资源
<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的最佳方法是什么
异步很难，因为它会在完成的那一刻执行，所以你无法知道脚本完成检索的顺序。与 delay 相比，它也可以忽略不计，延迟会等到 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保留依赖项。我使用 defer 99.9% 的时间，并且只有在脚本的顺序不重要时才使用。
如果您需要内联 js 等到加载依赖项，则需要等待文档就绪状态。
j查询：
`$(document).ready(function() {
...code here...
};`
香草JS：
`document.addEventListener("DOMContentLoaded", function() {
...code here...
};`