HTML脚本(script)_html link as = 'script-优快云博客

转载出自： http://www.w3cschool.cn/html/html-css-script.html

延迟脚本

你可以通过使用async和defer属性来控制脚本的执行。

defer属性指示浏览器在页面加载和解析之前不执行脚本。

要了解defer属性的好处，让我们看看它解决的问题。

假设simple2.js脚本文件具有如下所列的单个语句。

document.getElementById("myID").innerText = "myValue";

当此脚本运行时，它将找到一个id属性值为myID的元素，并将该元素的内部文本更改为myValue。

以下HTML文档使用script元素引用脚本文件。

<!DOCTYPE HTML>
<html>
<head>
   <script src="simple2.js"></script>
</head>
<body>
   <p id="myID">This is a test.</p>
</body>
</html>

浏览器遇到script元素时的默认行为是停止处理HTML文档时，加载脚本文件并执行其内容。

这意味着浏览器在解析其余HTML之前加载并执行simple2.js中的语句，并发现了p元素。

脚本找不到所需的元素，因此不应用任何更改。

脚本完成后，浏览器继续解析HTML，并找到p元素。

要解决这个问题，请将script元素放在文档的末尾。

<!DOCTYPE HTML>
<html>
<body>
  <p id="myID">This is a test.</p>
  <a href="http://www.w3cschool.cn">Visit www.w3cschool.cn</a>
  <script src="simple2.js"></script>
</body>
</html>

defer属性

在HTML5中，您可以通过使用defer属性来实现相同的效果。当浏览器遇到具有defer属性的脚本时，它会阻止加载和执行脚本，直到HTML文档中的所有元素都已解析为止。

<!DOCTYPE HTML>
<html>
<head>
   <script defer src="simple2.js"></script>
</head>
<body>
   <p id="myID">This is a test.</p>
   <a href="http://www.w3cschool.cn">www.w3cschool.cn</a>
</body>
</html>

您可以仅对外部脚本文件使用defer属性。它不工作的内联脚本。