返回

深度剖析script标签：从文档结构到执行流程

前端

一、script标签在HTML文档结构中的位置

script标签是HTML文档中用于嵌入JavaScript代码的标签，它可以放在文档的<head>部分或<body>部分。

  • 放在<head>部分：

    • 优点：可以使JavaScript代码在页面加载时立即执行，提高页面的加载速度。
    • 缺点：可能会阻塞DOM解析，导致页面渲染延迟。

  • 放在<body>部分：

    • 优点：不会阻塞DOM解析，避免页面渲染延迟。
    • 缺点：可能会导致JavaScript代码执行延迟，影响页面的交互性。

二、JavaScript代码的执行流程

JavaScript代码的执行流程可以分为以下几个步骤：

  1. 解析：

    • 浏览器解析HTML文档，遇到script标签时，会暂停HTML解析，并开始解析script标签内的JavaScript代码。
    • 解析JavaScript代码时，浏览器会构建抽象语法树（AST）。AST是JavaScript代码的结构化表示，它包含了代码中的所有元素，如函数、变量、语句等。

  2. 编译：

    • 浏览器将AST编译成字节码。字节码是一种低级代码，它比AST更接近机器码，但仍然是抽象的，不能直接由计算机执行。

  3. 执行：

    • 浏览器将字节码解释成机器码，并将其交给计算机执行。

三、script标签的奥秘

1. script标签的属性

script标签具有以下几个属性：

  • type： 指定脚本的类型，默认值为"text/javascript"。
  • src： 指定要加载的外部脚本文件的URL。
  • async： 指定脚本是否异步加载。如果设置为true，则脚本将在页面加载时立即执行，而不会阻塞DOM解析。
  • defer： 指定脚本是否延迟加载。如果设置为true，则脚本将在页面加载完成后执行，但不会阻塞DOM解析。

2. script标签的事件

script标签可以触发以下几个事件：

  • onload： 当脚本加载完成后触发。
  • onerror： 当脚本加载或执行时发生错误时触发。

3. script标签的全局变量

script标签可以定义全局变量，这些变量可以在脚本中使用，也可以在其他脚本中使用。

四、结语

script标签是HTML文档中不可或缺的元素，它为我们提供了在网页中嵌入JavaScript代码的能力。通过理解script标签在HTML文档结构中的位置、JavaScript代码的执行流程以及script标签的奥秘，我们可以更好地使用script标签来构建交互式网页。