HTML文档流下的JavaScript执行顺序详解

61 浏览量更新于2024-08-30 收藏 139KB PDF 举报

本文将详细介绍JavaScript代码在网页中的执行顺序，重点讨论的是如何根据HTML文档流进行理解和应用。首先，理解JavaScript引擎的工作原理，尽管底层机制复杂，但代码执行顺序对于前端开发者来说更加直观易懂。本文主要分为两个部分： 1. **按HTML文档流顺序执行**: - HTML文档在浏览器中解析遵循从上至下的顺序，JavaScript作为嵌入的脚本，其执行顺序同样基于`<script>`标签的出现位置。在HTML文档中，如所示示例： - 顶部脚本 `<script>alert("顶部脚本");</script>` - 头部脚本 `<head><script>alert("头部脚本")</script><title></title></head>` - 页面脚本 `<body><script>alert("页面脚本")</script></body>` - 底部脚本 `<script>alert("底部脚本")</script>` - 如果脚本位于`<head>`内，它们会在`<body>`加载前执行，而`<body>`内的脚本会跟随页面内容加载。 2. **外部JavaScript文件的执行**: - 当使用`<script src="...">`引入外部JavaScript文件时，这些脚本的执行顺序依然保持在文档中引入的先后顺序，即使文件位于外部，也不会影响其执行时机。例如： - 头部外部脚本 `<head><script src="//www.jb51.net/head.js"></script>` - 页面外部脚本 `<body><script src="//www.jb51.net/body.js"></script>` - 这些外部脚本的执行不会因文件来源不同而改变，它们依然按照加载的顺序执行。总结来说，JavaScript代码的执行顺序是由HTML文档的结构决定的，嵌入脚本按文档流顺序执行，而外部脚本的加载顺序同样影响其执行时间。这对于编写和优化JavaScript代码、理解异步加载和事件驱动编程至关重要。理解这个执行顺序有助于避免常见的布局问题，并确保代码逻辑的正确性。

Hello = function() {

alert(“Hello World”);

}

Hello();

</script>

我们可以通过上面的代码很清晰地看到，其实函数也是数据，也是变量，我们也可以对“函数“进行赋值（重赋值）。

当然，我们为了防止这样的情况，也可以这样：

代码如下:

<scripttype=”text/javascript”>

functionHello() {

alert(“Hello”);

}

Hello();

</script>

<scripttype=”text/javascript”>

functionHello() {

alert(“Hello World”);

}

Hello();

</script>

这样，程序被分成了两段，JS引擎也就不会把他们放到一起了。

当JavaScript引擎解析脚本时，它会在预编译期对所有声明的变量和函数进行处理。

做如下处理：

1. 在执行前会进行类似“预编译”的操作：首先会创建一个当前执行环境下的活动对象，并将那些用var申明的变量设置为活动

对象的属性，但是此时这些变量的赋值都是undefined，并将那些以function定义的函数也添加为活动对象的属性，而且它们的

值正是函数的定义。

2. 在解释执行阶段，遇到变量需要解析时，会首先从当前执行环境的活动对象中查找，如果没有找到而且该执行环境的拥有

者有prototype属性时则会从prototype链中查找，否则将会按照作用域链查找。遇到var a = …这样的语句时会给相应的变量进

行赋值（注意：变量的赋值是在解释执行阶段完成的，如果在这之前使用变量，它的值会是undefined）所以，就会出现当

JavaScript解释器执行下面脚本时不会报错：

代码如下:

alert(a); // 返回值undefined

var a =1;

alert(a); // 返回值1

由于变量声明是在预编译期被处理的，所以在执行期间对于所有代码来说，都是可见的。但是，你也会看到，执行上面代码，

提示的值是undefined，而不是1。这是因为，变量初始化过程发生在执行期，而不是预编译期。在执行期，JavaScript解释器

是按着代码先后顺序进行解析的，如果在前面代码行中没有为变量赋值，则JavaScript解释器会使用默认值undefined。由于

在第二行中为变量a赋值了，所以在第三行代码中会提示变量a的值为1，而不是undefined。

同理，下面示例在函数声明前调用函数也是合法的，并能够被正确解析，所以返回值为1。

代码如下:

剩余11页未读，继续阅读

weixin_38514523

粉丝: 8
资源: 939

HTML文档流下的JavaScript执行顺序详解

JavaScript的执行过程详细研究

JavaScript执行顺序

浅谈Javascript 执行顺序

Javascript 跨域知识详细介绍

Javascript代码在页面加载时的执行顺序介绍

JavaScript 程序执行顺序问题总结

深入理解javascript的执行顺序

JavaScript执行顺序与语法特性解析

jQuery.html与跨域JavaScript执行顺序探究

JavaScript代码执行顺序解析

最新资源