使用脚本元素（执行顺序，noscript）

来源：互联网发布：软件开发的公司编辑：程序博客网时间：2024/06/01 08:19

设置了src属性的script元素不能含有任何内容。不能用同一个script元素既定义内嵌脚本有引用外部脚本。

<script src="simple.js"></script>

例子中的script元素尽管没有任何内容，还是使用了结束标签。如果用自闭和标签引用外部脚本，浏览器则将忽略这个元素，不会加载引用的文件。

推迟脚本的执行

默认情况下，浏览器一遇到script元素就会暂停处理HTML文档，转而载入脚本文件并执行其中的脚本。在脚本执行完毕后浏览器才会继续解析HTML。

例如：

simple.js

document.getElementById("test").innerHTML = "This is test";

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>测试JavaScript的载入顺序</title>    <script src="simple.js"></script></head><body>    <div id="test"></div></body></html>

此例中不会显示任何内容，因为，浏览器在载入和执行simple.js的时候，下面的HTML文档内容还没有被解析。脚本找不到id为test的元素，所以也就不起作用。

1.通过改变script元素的位置解决脚本的时间安排。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>测试JavaScript的载入顺序</title></head><body>    <div id="test"></div>    <script src="simple.js"></script></body></html>

2.使用带defer属性的script元素

浏览器在遇到带有defer属性的元素时，会将脚本的加载和执行推迟到HTML文章中所有元素都已得到解析之后。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>测试JavaScript的载入顺序</title>    <script defer src="simple.js"></script></head><body>    <div id="test"></div></body></html>

提示：defer属性只能用于外部脚本文件，它对文档内嵌脚本不起作用

异步执行脚本

当某一脚本自成一体，不需要于HTML文档中的内容相互作用时，可以使用async属性，
浏览器将在继续解析HTML文档中的其他元素（包括其他script元素）的同时，异步加载和执行脚本。如果运用得当，这可以大大提高整体加载性能。

<script async src="simple.js"></script>

注：使用async属性的一个重要后果就是页面中的脚本可能不再按定义它们的次序执行，因此脚本使用了其他脚本定义的函数或值，那就不宜使用async属性。

noscript元素

noscript元素可以用来向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。与script元素类似，noscript元素所属类型取决于它在文档中的内容。

例如：

<noscript>    <h1>JavaScript is required!0</h1>    <p>You cannot use this page without Javascript</p></noscript>

一个页面中可以加入多个noscript元素

使用noscript元素重定向浏览器

<noscript>    <meta http-equiv="refresh" content="0;http://www.baidu.com"></noscript>

这段代码会在不支持JavaScript或者禁用了JavaScript的浏览器试图载入页面时将用户引至www.baidu.com网站。

2 0