Question

在下面的脚本中，只要jQuery.js包含在defer属性中，我就会收到“未捕获的ReferenceError：jQuery未定义”错误。调用jQuery对象的内联脚本也是延迟的，这没什么区别。

我正在尝试推迟脚本以加快页面呈现速度。

是否可以推迟jQuery而不会出现这样的错误？

未捕获的ReferenceError：未定义jQuery

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery defer test</title>
<link rel="stylesheet" href="styles.css" media="screen" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
    <p>content goes here...</p>
    <script type='text/javascript' src='scripts.jquery.js' defer='defer'></script>
    <script defer='defer'>
    jQuery(document).ready(function(){
        alert('deferred');
        });
    </script>
</body>
</html>

Answer 1

defer属性仅影响外部脚本。所以你的内联javascript将始终在外部jQuery资源之前执行。

来自http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#attr-script-defer

The defer and async attributes must not be specified if the src attribute is not present.

不幸的是，对于大多数网站来说，因为在DOM准备好之后他们需要访问jQuery(function() {})来初始化它几乎迫使你加载jQuery。这是从外部Google CDN提供jQuery的一个主要原因，因为它有可能已被您的用户（来自其他网站）缓存，并且它的交付时间可能比您自己的Web服务器快得多。

有几种方法可以解决这个问题，例如注册你自己的临时jQuery对象只是为了存储你的dom ready函数，但它有它的缺点。

Answer 2

您可以使用defer但仅限外部脚本！

可以推迟jquery而不会出错吗？

2 个答案: