下面是页面中js执行顺序的完整攻略。
执行顺序
在页面中,JavaScript脚本可以通过多种方式嵌入到HTML文档中,如内联脚本、外部脚本和动态添加脚本等。JavaScript脚本的执行顺序有以下规则:
-
按照文档内的顺序解析脚本,在HTML文档中与JavaScript相关的所有元素按照它们在文档中的顺序来解析。因此,文档中后面出现的脚本无法使用文档前面定义的变量和函数。
-
按照异步加载的顺序执行脚本,当使用
<script>
标签引入外部脚本时,可以通过将async
或defer
属性设置为true
来控制脚本的执行时间。async
表示页面加载的同时异步加载脚本,而脚本的响应速度通常比页面快,所以脚本的执行顺序是不确定的;defer
则表示该脚本将在页面解析完毕后执行,多个延迟执行的脚本会按照它们在文档顺序上的先后顺序依次执行。 -
在执行脚本时必须先加载执行所需的外部脚本、文件和图片等资源,否则浏览器会挂起执行,等待资源加载完成后再执行。
示例说明
下面举两个例子,来说明JavaScript脚本的执行顺序。
示例1
HTML代码:
<!DOCTYPE html>
<html>
<head>
<script src="a.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<script src="b.js"></script>
</body>
</html>
其中a.js内容如下:
console.log("a.js loaded");
b.js内容如下:
console.log("b.js loaded");
当浏览器解析这个页面时,先加载a.js,输出"a.js loaded",然后才是b.js,输出"b.js loaded"。
因此,这个例子说明了文档内的顺序和先后顺序两个规则。
示例2
HTML代码:
<!DOCTYPE html>
<html>
<head>
<script src="a.js" defer></script>
<script src="b.js" defer></script>
</head>
<body>
<h1>Hello World!</h1>
<script src="c.js"></script>
</body>
</html>
其中a.js和b.js的内容如下:
console.log("a.js loaded");
console.log("b.js loaded");
c.js的内容如下:
console.log("c.js loaded");
当浏览器解析这个页面时,先加载并解析a.js和b.js,但是它们不会立即执行,而是等待文档解析完成后,在文档元素按照顺序执行完毕后,按照它们在文档顺序上的先后顺序依次执行。所以在本例中,c.js会先于a.js和b.js执行,输出"c.js loaded",然后才是a.js和b.js,分别输出"a.js loaded"和"b.js loaded"。
因此,这个例子说明了延迟加载和异步加载两个规则。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:页面中js执行顺序 - Python技术站