浏览器如何处理 JavaScript? [英] How do browsers handle JavaScript?

问题描述

网络浏览器如何处理网页的 JavaScript 内容?是否将 JavaScript 内容解析为 DOM 并进行渲染?

How does a web browser handle the JavaScript content of a webpage? Is the JavaScript content being parsed into a DOM and then rendered?

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

I do not need a specification, but I need to know how it is done. Please tell me the whole process of handling JavaScript content on a web page.

推荐答案

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

The script sections of a web page are handled by the browser's JavaScript interpreter, which may be an intrinsic part of the browser but usually is a distinct module, sometimes even a completely distinct project (Chrome uses V8; IE uses JScript; Firefox uses SpiderMonkey; etc.).

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

When the HTML parser reaches a script element, all that the parser does is read and store the text through the ending </script> tag (or retrieve the file referenced via the src attribute). Then, unless the author has used the defer or async attributes, all HTML parsing and rendering comes to a screeching halt and the HTML parser hands the script text off to the JavaScript interpreter. The JavaScript interpreter interprets the JavaScript code in the context of the window object, and when done returns to the HTML parser, which can then continue parsing and displaying the page. This stop-everything-and-run-the-JavaScript is why some prominent people recommend putting scripts at the bottom of the page to improve the perceived load time. It also means that script tags are processed in order, which can be important if one script relies on another. If the defer or async attribute is used, script execution can be deferred until later on browsers that support it. All scripts on the page are executed within the same global execution context, sharing the same global namespace and memory area (and thus can interact with one another).

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

Once the page is parsed and rendered, a variety of events can occur — the user can click something, the browser window can be resized, the mouse can move over elements. JavaScript code that was run as a result of being in a script tag can "hook into" these events, requesting that the browser call a function in the JavaScript when the event occurs. This allows JavaScript to be interactive — the user clicks an element on the page, for instance, and the browser tells the JavaScript interpreter that it should run function X in the JavaScript code.

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

As you can see above, there are two somewhat different situations in which JavaScript code can be run: During the page parsing/rendering process (when a script element that does not use the defer or async attributes is being initially processed), and after the parsing/rendering process (deferred scripts, and code running in response to an event). JavaScript running during the parsing/rendering process can directly output content to the HTML parser via the document.write function. JavaScript running after the parsing/rendering is complete can't do that, of course, but can use the very powerful DOM HTML API to interact with the DOM.

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

It's probably worth noting the noscript element: In a browser with JavaScript enabled, noscript elements are completely skipped. In a browser without JavaScript or with JavaScript disabled, the script elements are completely skipped and the noscript elements are read instead. This makes it easy to include content that will be shown only if JavaScript is, or is not, enabled on the browser when the page is rendered.

推荐阅读:

• http://en.wikipedia.org/wiki/Client-side_JavaScript
• http://www.w3.org/TR/html5/scripting-1.html
• http://www.ecma-international.org/publications/standards/Ecma-262.htm

这篇关于浏览器如何处理 JavaScript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！