JavaScript执行顺序详解：HTML文档流与外部文件加载

5星 · 超过95%的资源需积分: 10 154 浏览量更新于2024-09-17 2 收藏 93KB DOC 举报

在深入探讨JavaScript编程语言的精髓之前，理解其执行过程是至关重要的。本文将详细研究JavaScript的编译和执行机制，特别关注代码在实际网页环境中的动态执行流程。首先，让我们从HTML文档流的角度来看JavaScript的执行顺序。 HTML文档加载时，浏览器遵循从上至下的原则解析页面结构。JavaScript代码作为HTML的一部分，其执行顺序同样基于<script>标签的插入位置。在文档中，如示例所示： 1. **文档流顺序**： - 在`<head>`部分插入的`<script>`标签内的脚本（如`<script>alert("头部脚本");</script>`）会在文档头部加载后执行。 - 随后，`<body>`部分的脚本（如`<script>alert("页面脚本");</script>`）会按照文档结构依次执行。 - 最后，页面底部的`<script>`标签（如`<script>alert("底部脚本");</script>`）也会在前文提到的脚本之后执行。 2. **外部JavaScript文件**： - 如果代码分布在外部文件中，比如`<script src="head.js"></script>`和`<script src="body.js"></script>`，它们会在文档装载过程中并行下载，但依然遵循文档流的顺序进行加载和执行，不会因为文件来源不同而改变执行顺序。这个执行顺序可以确保用户能看到页面结构在JavaScript脚本影响下的完整呈现，这对于理解事件驱动的编程模式和DOM操作至关重要。同时，了解这些基本规则有助于开发者优化代码性能，避免不必要的延迟，以及正确处理依赖关系。此外，尽管我们这里主要讨论的是静态的HTML文档顺序，但在现代Web开发中，异步加载和模块化技术（如AMD、CMD或ES6的import/export）可能会引入不同的执行逻辑，使代码更加灵活和高效。然而，理解基础的文档流顺序仍然是理解和编写高质量JavaScript代码的基础。随着浏览器的不断更新和JavaScript运行环境的演进，开发者还需关注新的执行模型，如Web Workers和Service Workers等，以适应不断变化的编程实践。

Hello();

其实都是一样的。

但是当我们对其中的函数进行修改时，会发现很奇怪的问题。

<scripttype="text/javascript">

function Hello() {

alert("Hello");

}

Hello();

function Hello() {

alert("Hello World");

}

Hello();

</script>

我们会看到这样的结果：连续输出了两次 Hello World。而非我们想象中的 Hello 和

Hello World。

这是因为 Javascript 并非完全的按顺序解释执行，而是在解释之前会对 Javascript 进行

一次“预编译”，在预编译的过程中，会把定义式的函数优先执行，也会把所有 var 变量创

建，默认值为 unde!ned，以提高程序的执行效率。也就是说上面的一段代码其实被 JS

引擎预编译为这样的形式：

<scripttype="text/javascript">

var Hello = function() {

alert("Hello");

}

Hello = function() {

alert("Hello World");

}

Hello();

</script>

我们可以通过上面的代码很清晰地看到，其实函数也是数据，也是变量，我们也可以对“函

数“进行赋值（重赋值）。当然，我们为了防止这样的情况，也可以这样：

<scripttype="text/javascript">

functionHello() {

alert("Hello");

剩余11页未读，继续阅读

keshu1688

粉丝: 4
资源: 26

JavaScript执行顺序详解：HTML文档流与外部文件加载

游览器中javascript的执行过程(图文)

javascript v8执行引擎源码

关于Javascript加载执行优化的研究报告

跟我学习javascript的执行上下文

javascript

vanillajs：Vanilla JavaScript研究

JavaScript执行上下文深度解析

JavaScript基础学习与研究指南

深入理解JavaScript执行上下文与面向记录编程

NghbrAlpha2 JavaScript压缩优化技术研究

最新资源