前端 - src属性中的'嵌入内容'是如何工作的，为什么script标签为空？

Question

src属性“将目标文件中的内容全部嵌入到标签”这句话怎么理解？

1.↓ 这里页面渲染完之后，script仍然是空标签，js代码并没有被嵌入进来

2.如果说“嵌入到标签”指的不是将内容加载进来。那为什么从来不对href使用“嵌入到标签”这种描述

蹲。。。orz

Answer 1

在HTML中，src属性用于指定一个外部资源的URL，这个资源可以是图片、脚本、样式表等。当浏览器遇到带有src属性的标签时，它会去请求这个URL指定的资源，并将其内容嵌入到标签所在的位置。

对于<script>标签来说，src属性指定了一个外部JavaScript文件的URL。当浏览器解析到带有src属性的<script>标签时，它会暂停页面的解析，去加载并执行这个外部脚本文件。这就是为什么有时候页面渲染会等待脚本加载完成，因为这可以影响页面的行为和渲染。

关于src属性中的“嵌入内容”是如何工作的，这里有几个关键点：

1. 资源加载：浏览器会向src属性指定的URL发送请求，获取资源内容。
2. 内容替换：对于<img>标签，资源内容（图片）会被替换到<img>标签所在的位置。对于<script>标签，资源内容（JavaScript代码）会被执行，而不是直接显示在页面上。
3. 渲染影响：对于<script>标签，如果脚本是异步的（async）或者延迟执行的（defer），那么页面的渲染可以继续进行，脚本会在页面渲染完成后执行。如果没有这些属性，浏览器会阻塞页面渲染，直到脚本加载并执行完成。
4. 空的<script>标签：如果<script>标签没有src属性，那么它就是一个空的脚本标签，不会产生任何效果。如果<script>标签有src属性，但是对应的资源不存在或者加载失败，那么这个<script>标签也不会执行任何代码，页面上看起来就像是空的。

总结来说，src属性的“嵌入内容”是指将外部资源的内容加载到当前标签的位置，对于<script>标签来说，这意味着执行外部JavaScript文件中的代码，而不是将代码直接显示在页面上。如果<script>标签看起来是空的，那通常是因为脚本已经执行过了，或者因为某些原因（如资源未找到）没有执行任何代码。

href属性和src属性虽然都用于指定外部资源的URL，但它们在HTML中的作用和上下文有所不同，这导致了它们描述方式的差异：

1. href属性：

   • 用途：href属性主要用于<a>（链接）、<link>（链接资源，如样式表）等标签，用于指定链接的目标地址或关联的资源。
   • 行为：对于<a>标签，href属性定义了点击链接后浏览器应该导航到的URL。对于<link>标签，href属性指定了外部资源的URL，如CSS样式表，这些资源被“链接”到当前文档，但并不直接嵌入到文档内容中。
   • 描述：因为href属性通常用于定义一个跳转目标或关联资源，所以它的描述更侧重于“建立连接”。这种连接可以是直接的（如<a>标签），也可以是间接的（如<link>标签引入样式）。

2. src属性：

   • 用途：src属性主要用于<script>（脚本）、<img>（图片）、<iframe>（内嵌框架）等标签，用于指定要嵌入或执行的外部资源。
   • 行为：对于<script>标签，src属性指定的JavaScript文件会被下载并执行。对于<img>标签，src属性指定的图片会被下载并显示在页面上。对于<iframe>，src属性指定的页面会被加载并显示在框架中。
   • 描述：因为src属性通常用于嵌入外部资源到当前文档中，所以它的描述更侧重于“嵌入到页面中”。这种嵌入是直接的，资源的内容或效果直接成为页面的一部分。

总结来说，href属性更多地用于定义链接和关联资源，而src属性用于嵌入外部资源。这种差异导致了它们在描述上的不同，href强调的是“建立连接”，而src强调的是“嵌入到页面中”。这种区分有助于更清晰地理解每个属性在HTML文档中的角色和用途。

Answer 2

### 回答

1. **为什么 `script` 标签为空？**

   `src` 属性在 `<script>` 标签中的作用是指定一个外部 JavaScript 文件的 URL。当浏览器遇到带有 `src` 属性的 `<script>` 标签时，它会去加载并执行指定的外部文件，而不是将外部文件的内容直接嵌入到 `<script>` 标签内部。因此，在页面渲染完毕后，`<script>` 标签看起来仍然是空的，因为其内容实际上来自于外部文件。

2. **“嵌入到标签”的理解**

   “将目标文件中的内容全部嵌入到标签”这句话实际上是一种非正式的描述，旨在传达 `src` 属性指向的文件内容会被浏览器加载并执行的概念。然而，这种描述可能会引起误解，因为它并不意味着文件内容会物理上嵌入到 HTML 标签中。正确的理解是，浏览器会根据 `src` 属性的值去加载并执行外部资源，而这些资源的内容并不直接出现在 HTML 文档中。

3. **为什么不对 `href` 使用“嵌入到标签”这种描述？**

   `href` 属性通常用于 `<a>`, `<link>`, 和 `<base>` 等标签中，用于指定链接目标的 URL。与 `src` 属性不同，`href` 属性的主要作用是指定一个导航目标或资源引用，而不是直接加载并执行内容。因此，使用“嵌入到标签”这种描述对于 `href` 属性来说并不准确，因为它不涉及内容的直接加载和执行。

综上所述，`src` 属性在 `<script>` 标签中的作用是指定外部 JavaScript 文件的 URL，浏览器会加载并执行该文件的内容，但这并不意味着文件内容会被物理上嵌入到 `<script>` 标签中。同时，“嵌入到标签”这种描述更适用于解释某些资源（如 `src` 属性指向的文件）被加载和执行的概念，而不是用于描述 `href` 属性的行为。