JavaScript 是一种广泛用于 Web 开发的脚本语言，它可以在浏览器端运行。但是，当浏览器加载一个包含 JavaScript 代码的网页时，它究竟是在什么时候开始执行这些代码呢？执行游标又是如何移动的呢？在本文中，我们将探讨这些问题，并提供相关的示例代码和指导意义。
执行时间
当浏览器开始加载一个网页时，它会按照以下顺序执行其中的代码：
- 加载 HTML 文件。
- 发现
<script>标签并加载相应的 JavaScript 文件。 - 在遇到
defer或async属性的<script>标签时，浏览器会延迟执行 JavaScript 代码，直到文档解析完成后再执行。而如果没有这些属性，则会立即执行代码。 - 如果 JavaScript 代码需要与 DOM 元素交互（比如修改元素的样式或内容），则需要等待文档解析完成后再执行。
因此，如果你希望 JavaScript 代码能够在 DOM 解析完成后再执行，你可以使用 defer 属性：
-- -------------------- ---- -------
------
------
----------------------
------- ----- --------------------------
-------
------
---
-------
-------执行流程
当 JavaScript 代码开始执行时，浏览器会创建一个全局执行上下文，并将其压入执行上下文栈。然后，JavaScript 引擎会从全局执行上下文中开始执行代码。在执行过程中，如果遇到函数调用，则会创建一个新的执行上下文，并将其压入执行上下文栈。当函数执行完毕后，其对应的执行上下文会从栈中弹出。
在执行 JavaScript 代码的过程中，引擎会使用一个执行游标（也称为程序计数器）来跟踪当前要执行的代码块。当引擎遇到一个代码块时，它就会将游标移到该代码块的起始位置，并开始执行其中的语句。一旦执行完成，游标就会移到下一个语句或代码块的起始位置。这个过程会一直重复，直到所有的语句都被执行完毕。
以下是一个简单的示例，演示了 JavaScript 代码的执行流程：
function greet(name) {
console.log('Hello, ' + name + '!');
}
greet('World');在这个例子中，当 greet 函数被调用时，引擎会创建一个新的执行上下文，并将其压入执行上下文栈。然后，引擎会将游标移到 greet 函数体的起始位置，并开始执行其中的语句。在这个例子中，只有一行语句，它会输出一条问候信息。当函数执行完毕后，其对应的执行上下文会从栈中弹出，并将游标移到调用该函数的位置，继续执行后续的代码。
指导意义
了解 JavaScript 代码的执行时间和流程对于编写高效、可靠的代码非常重要。以下是一些指导意义：
- 如果你需要确保 JavaScript 代码能够在 DOM 解析完成后再执行，可以使用
defer属性或将代码放在</body>标签前。 - 避免在全局作用域中声明过多的变量和函数，因为这可能会导致名称冲突和性能问题。
- 尽可能地将变量和函数声明限定在局部作用域内，以减少命名空间
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14541