游览器中javascript的执行过程(图文)

以下是浏览器中 JavaScript 的执行过程。

1. 解析 HTML 和 JavaScript

当浏览器加载一个新页面时，它会按顺序解析 HTML 和 JavaScript。HTML 解析器将 HTML 文档转换为 DOM (文档对象模型)，而 JavaScript 解析器会解析页面中的所有脚本，并将它们转换成可执行代码。

2. 构建 Document Object Model(DOM)

HTML 解析器将 HTML 文档转换为 DOM 。这意味着浏览器将文档的每个元素和文本内容都转换为一个 DOM 对象，这些对象形成了一个树结构。每个 DOM 对象都有它自己的属性和方法，这与浏览器中 DOM API 定义的一样。

3. 构建 CSS Object Model (CSSOM)

CSS 解析器将 CSS 文件解析为 CSSOM。这里的 CSSOM 是一个描述文档上所有 CSS 样式的树结构。每个 CSS 样式都被表示为一个对象，并且与 DOM 中的相应节点相匹配。

4. 构建 Render 树

根据 DOM 和 CSSOM，浏览器开始构建 Render 树。Render 树是一棵包含了所有要显示在屏幕上的元素的树。它包含了每个元素的样式信息，每个元素如何被放置以及它们在屏幕上的位置。

5. 布局

当 Render 树构建完成之后，浏览器开始进行布局。布局是计算每个元素在屏幕上的确切位置。浏览器需要知道每个元素的大小和位置，才能进行绘制。

6. 绘制

最后一步是绘制。浏览器将 Render 树上的每个节点绘制到屏幕上。为了提高性能，它将一次性绘制多个节点，而不是一个一个地绘制。

示例 1：

const p = document.createElement('p');
p.textContent = 'Hello, World!';
document.body.appendChild(p);

这个例子展示了如何使用 JavaScript 来创建一个新的元素并将其添加到文档中。首先，我们创建一个新的 p 元素，然后设置它的内容，最后将它添加到文档中。这将触发 DOM 和 Render 树的更新，以及布局和绘制的执行。

示例 2：

const btn = document.querySelector('#my-btn');
btn.addEventListener('click', function() {
  alert('Button clicked!');
});

这个例子展示了如何使用 JavaScript 来为按钮添加一个点击事件监听器。当用户点击按钮时，监听器将触发并显示一个警告框。这也将触发 DOM 和 Render 树的更新，以及可能的布局和绘制操作。