浏览器如何处理JavaScript？

Question

浏览器如何处理JavaScript？

javascriptbrowser

8

一个网页浏览器如何处理网页中的JavaScript内容？JavaScript内容是否会被解析为DOM并进行渲染？

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

- DPD

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

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

当HTML解析器到达script元素时，解析器所做的只是读取并存储文本，直到结束的</script>标记（或检索通过src属性引用的文件）。然后，除非作者使用了defer或async属性，否则所有HTML解析和呈现都会突然停止，并且HTML解析器将脚本文本交给JavaScript解释器。 JavaScript解释器在window对象的上下文中解释JavaScript代码，并在完成后返回HTML解析器，然后可以继续解析和显示页面。这种停止一切并运行JavaScript的方式是为什么一些知名人士建议将脚本放在页面底部以提高感知的加载时间。它还意味着script标记按顺序进行处理，如果一个脚本依赖于另一个脚本，则可以很重要。如果使用了defer或async属性，则在支持它的浏览器上可以延迟脚本执行。页面上的所有脚本都在同一个全局执行上下文中执行，共享相同的全局命名空间和内存区域（因此可以彼此交互）。

一旦页面被解析和呈现，就会发生各种事件——用户可以单击某些内容，浏览器窗口可以调整大小，鼠标可以移动到元素上。作为在 script 标签中运行的结果，JavaScript 代码可以“钩入”这些事件，并请求浏览器在事件发生时调用 JavaScript 中的函数。这使得 JavaScript 可以交互——例如，用户单击页面上的一个元素，浏览器告诉 JavaScript 解释器应该在 JavaScript 代码中运行函数X。

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

值得注意的是noscript元素：在启用JavaScript的浏览器中，noscript元素将被完全跳过。在没有JavaScript或禁用JavaScript的浏览器中，script元素将被完全跳过，而noscript元素将被读取。这使得在页面渲染时，可以轻松地包含仅在JavaScript启用或未启用的浏览器上显示的内容。