浏览器如何处理 JavaScript？答案

【问题标题】：How do browsers handle JavaScript?浏览器如何处理 JavaScript？
【发布时间】：2014-11-23 22:56:38
【问题描述】：

网络浏览器如何处理网页的 JavaScript 内容？ JavaScript 内容是否被解析为 DOM，然后被渲染？

我不需要规范，但我需要知道它是如何完成的。请告诉我在网页上处理 JavaScript 内容的整个过程。

【问题讨论】：

【解决方案1】：

网页的script 部分由浏览器的 JavaScript 解释器处理，它可能是浏览器的固有部分，但通常是一个不同的模块，有时甚至是一个完全不同的项目（Chrome 使用 V8；IE 使用 JScript ; Firefox 使用 SpiderMonkey 等）。

当 HTML 解析器到达 script 元素时，解析器所做的 all 将被读取并通过结尾的 </script> 标记存储文本（或检索通过 src 引用的文件属性）。然后，除非作者使用了defer or async attributes，否则所有的 HTML 解析和呈现都会停止，HTML 解析器会将脚本文本交给 JavaScript 解释器。 JavaScript 解释器在 window 对象的上下文中解释 JavaScript 代码，完成后返回 HTML 解析器，然后它可以继续解析和显示页面。这种 stop-everything-and-run-the-JavaScript 是为什么一些知名人士 recommend putting scripts at the bottom 的页面来改善感知加载时间的原因。这也意味着script 标签是按顺序处理的，如果一个脚本依赖于另一个脚本，这可能很重要。如果使用defer 或async 属性，则脚本执行可以推迟到支持它的浏览器上。页面上的所有脚本都在同一个全局执行上下文中执行，共享同一个全局命名空间和内存区域（因此可以相互交互）。

一旦页面被解析和呈现，就会发生各种事件——用户可以点击某物，浏览器窗口可以调整大小，鼠标可以在元素上移动。由于位于script 标签中而运行的 JavaScript 代码可以“挂钩”这些事件，请求浏览器在事件发生时调用 JavaScript 中的函数。这允许 JavaScript 具有交互性——例如，用户单击页面上的一个元素，浏览器会告诉 JavaScript 解释器它应该在 JavaScript 代码中运行函数 X。

正如您在上面看到的，有两种不同的情况可以运行 JavaScript 代码：在页面解析/渲染过程中（当 script 元素不使用 defer 或 async 属性时）正在初始处理），以及在解析/渲染过程（延迟脚本和响应事件运行的代码）之后。在解析/渲染过程中运行的 JavaScript 可以通过 document.write 函数直接将内容输出到 HTML 解析器。在解析/渲染完成后运行的 JavaScript 当然不能这样做，但可以使用非常强大的 DOM HTML API 与 DOM 进行交互。

noscript 元素可能值得注意：在启用 JavaScript 的浏览器中，noscript 元素被完全跳过。在没有 JavaScript 或禁用 JavaScript 的浏览器中，script 元素将被完全跳过，而改为读取 noscript 元素。这使得包含仅在呈现页面时在浏览器上启用或未启用 JavaScript 时才会显示的内容变得容易。