浏览器如何自动将“页面源代码”中的Javascript转换为HTML？

Question

现在我已经理解了如何访问原始的HTML+Javascript（通过HTTP GET接收）以及Javascript自动处理完成后的呈现结果，我需要理解它是如何实现的：

1. 是否有特定的Javascript函数嵌入到原始HTTP GET响应中，浏览器查找并调用它？（换句话说，网页程序员是否负责指示浏览器扫描原始内容并将所有非交互式Javascript替换为HTML？）
2. 浏览器是否分析整个页面，寻找某些线索，然后决定要转换什么？如果是这样，这些线索是什么，如何实现？

作为这个主题的完全新手，很可能以上都不适用，技巧是以完全不同的方式完成的。如果确实如此，请您指导我如何重新表达问题？

- PeSmith

Answer 1

HTML会按顺序加载。当发现

- Bart

Answer 2

HTML规范定义了JavaScript运行的情况。一些JavaScript附加到onSOMETHING属性上，它在定义的时间运行，其中一个重要的例子是'onload'。其他JavaScript只是在<script>元素中的顶层块中，根据规范，浏览器会在任何时候运行该代码块，仅此而已。

没有'转换'和'替换'。JavaScript是一种编程语言，浏览器会运行代码。在某些情况下，代码与DOM树交互以生成可显示的内容，而在其他情况下则不会（例如通过连接发送信息）。

- bmargulies

---

感谢您提供的好答案。请问您能为我澄清以下问题吗？我理解HTML/Javascript/DOM中的交互部分，如onClick、onMouseOver等——浏览器在生成“渲染”HTML时只是保留这些内容。但它是如何知道什么内容不需要保留而是在页面完成后运行呢？“随心所欲”是什么意思？不应该遵循一定的标准吗？是否有一类Javascript函数被绑定为自动执行的呢？ - PeSmith

@PeSmith: 抱歉抢了您的话题，不确定我是否回答了您的问题，但所有JavaScript都是“自动执行”的：当浏览器遇到<script>标签时，它会逐行运行其中的所有JavaScript。一些JavaScript函数修改DOM - 例如，document.getElementsByTagName('p')[0].style.backgroundColor='#c00';将使HTML页面中的第一个段落具有红色背景；而document.getElementsByTagName('p')[0].onclick = doSomething;将函数doSomething分配给每当第一段的点击事件发生时运行。其他函数则不会，例如var x = 1;。 - Paul D. Waite

@Pe，是关于@Paul所说的。顶层在页面加载期间或之后运行。 - bmargulies

Answer 3

当Web浏览器解析HTML页面时，如果遇到<script>元素，则停止解析HTML，并立即运行（或链接到）<script>元素中的JavaScript*。

JavaScript代码可以修改页面的DOM（文档对象模型——JavaScript可以访问的HTML的编程表示），从而更改浏览器显示的呈现HTML。（它还可以将函数分配给DOM节点上的内置事件处理程序，以便在用户单击链接或文档完成加载时运行某些JavaScript。）

因此，完全由网页程序员负责这样做。浏览器不会猜测如何处理已下载的JavaScript。它们运行并遵守它。

（* 这有点简化：defer属性可以防止脚本立即运行。）

- Paul D. Waite

---

在这个层面上几乎没有什么影响，但稍微准确一点的说法是脚本在解析器遇到</script>标签时执行。如果你考虑document.write通过将字符注入解析器输入流的方式工作，这就很有意义了。 - Alohci

@Alohci：啊，是的，我明白你的意思。我会用“<script>元素”而不是“<script>标签”。 - Paul D. Waite

Answer 4

浏览器解析HTML代码，在遇到用适当的<script>标签包含的JavaScript代码时，会评估遇到的JavaScript代码，这可能导致文档结构和/或内容更改，从而对用户可见。

- code_burgar

Answer 5

我看了你的最后一个帖子。

让我告诉你，浏览器有一个HTML版本的页面和一个DOM（文档对象模型）版本。

每当JavaScript更改某些内容时，它会在DOM中进行更改。首先，DOM是从页面HTML生成的。

因此，JavaScript不会更改页面源代码。

你在这里的问题完全无关紧要，因为浏览器执行以下操作来加载页面：

1. HTTP请求以接收数据（可能是HTML文档）
2. 解析接收到的数据（如果是HTML）
3. 查找解析数据中的其他资源（链接到其他JavaScript、CSS、图像等）
4. 下载剩余的资源（返回步骤2）
5. 生成DOM，运行CSS和脚本，显示图像。

浏览器从接收到的数据的顶部开始运行所有JavaScript。您还可以将JavaScript函数分配给页面元素的事件，以便在触发事件时自动调用指定的JavaScript函数。

解析HTML并运行其JavaScript与HTTP协议无关，可以仅在您自己的计算机上完成（打开磁盘上的HTML文件）。

- AbiusX

---

这不是我的专业领域，但我认为JavaScript在HTML解析阶段运行 - HTML解析在脚本运行时暂停。这是因为JavaScript包括document.write，它将HTML内容写入DOM中。然而，我不知道浏览器是否真正停止解析HTML，或者你的描述是否更接近于它们实际执行的操作。 - Paul D. Waite

@Paul - 我的理解是，解析器传统上会停止解析，因为你可以做一些像 document.write('<!--') 这样的事情，这将从根本上改变 DOM 的其余部分的外观。理论上，解析器可以标记 DOM 状态，暂时性地向前解析，并在脚本中遇到 document.write 时回溯。鉴于 HTML5 中引入了 async 属性，我猜测浏览器不会这样做。 - Alohci

Answer 6

浏览器是否有特定的Javascript函数嵌入在原始HTTP GET响应中，当找到它时，它会简单地调用它？换句话说，是网页程序员的责任指示浏览器扫描原始内容并将所有非交互式Javascript替换为HTML吗？

不是。有很多。请参见http://dev.opera.com/articles/view/creating-and-modifying-html/。

（实际上，您可能应该从http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc开始）

浏览器是否分析整个页面，寻找某些线索，然后决定要转换什么？如果是这样，这些线索是什么？ <script> 如何完成？

DOM

- Quentin