JavaScript内核与高级编程之：`JavaScript`的浏览器渲染流程：从 `HTML` 解析到 `GPU` 绘制的完整管线。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！今天咱们聊聊JavaScript在浏览器里“装模作样”的全过程，也就是从HTML解析到GPU绘制的完整管线。别害怕，虽然听起来像火箭发射，但其实跟咱们平时写代码一样，都是一步一个脚印。准备好了吗？咱们这就开始！

一、HTML：建筑蓝图

首先，浏览器拿到的是一堆乱七八糟的HTML代码，就像建筑师拿到一张蓝图。这张蓝图描述了网页的结构，告诉浏览器该显示什么内容，怎么组织这些内容。

<!DOCTYPE html>
<html>
<head>
  <title>我的第一个网页</title>
  <style>
    body { background-color: lightblue; }
    h1 { color: navy; margin-left: 20px; }
  </style>
</head>
<body>
  <h1>欢迎来到我的网页！</h1>
  <p>这是一个段落。</p>
  <img src="image.jpg" alt="一张图片">
  <script>
    alert("Hello, world!");
  </script>
</body>
</html>

二、解析HTML：构建DOM树

浏览器拿到HTML蓝图后，第一件事就是解析它。这个过程就像建筑师根据蓝图搭建房屋框架。浏览器使用HTML解析器（通常是基于状态机的）将HTML代码转换成一个树状结构，叫做DOM树 (Document Object Model)。

DOM树是网页在内存中的一种表示，它以节点的形式组织网页中的元素、属性和文本。每个HTML标签、属性和文本都会成为DOM树上的一个节点。

你可以把DOM树想象成一棵倒立的树，根节点是document对象，然后分支是<html>标签，再往下是<head>和<body>标签，以此类推。

三、解析CSS：构建CSSOM树

有了DOM树，我们知道了网页的结构，但还不知道它长什么样。这时候就需要CSS来告诉浏览器如何渲染这些元素。

浏览器会解析CSS代码，构建另一个树状结构，叫做CSSOM树 (CSS Object Model)。 CSSOM树描述了每个元素的样式规则。

body { background-color: lightblue; }
h1 { color: navy; margin-left: 20px; }
p { font-size: 16px; }
img { width: 200px; height: 150px; }

CSSOM树的构建过程也需要解析器，它会识别CSS规则，并将它们转换成样式对象。

四、渲染树 (Render Tree)：DOM树 + CSSOM树 = 可见元素

有了DOM树和CSSOM树，浏览器就可以将它们合并成一个渲染树 (Render Tree)。渲染树只包含需要显示的元素，以及这些元素的样式信息。

可见元素： 只有DOM树中需要显示的元素才会出现在渲染树中。例如，<head>标签、display: none的元素以及visibility: hidden的元素都不会出现在渲染树中。
样式信息： 渲染树中的每个节点都包含了它对应的样式信息，这些样式信息来自于CSSOM树。如果一个元素没有明确的样式，那么它会继承父元素的样式，或者使用浏览器默认的样式。

渲染树构建流程：

遍历DOM树： 从DOM树的根节点开始，递归遍历每个节点。
过滤不可见节点： 排除display: none、visibility: hidden等不可见节点。
应用CSSOM规则： 对每个可见节点，找到匹配的CSSOM规则，并将样式信息应用到该节点。
构建渲染树节点： 为每个可见节点创建一个渲染树节点，并将样式信息添加到该节点。

五、布局 (Layout)：计算元素的位置和大小

有了渲染树，我们知道了每个元素应该显示什么，以及它们的样式。但我们还不知道它们应该在哪里显示，以及它们的大小是多少。这时候就需要布局 (Layout) 过程来计算这些信息。

布局过程也叫做回流 (Reflow)。浏览器会根据渲染树中的信息，计算每个元素在屏幕上的位置和大小。这个过程需要考虑元素的盒模型 (Box Model)、定位方式 (Positioning)、浮动 (Float) 等因素。

盒模型：

每个HTML元素都可以看作是一个盒子，这个盒子由以下几个部分组成：

内容 (Content)： 元素的内容，例如文本、图片等。
内边距 (Padding)： 内容与边框之间的空间。
边框 (Border)： 元素的边框。
外边距 (Margin)： 元素与周围元素之间的空间。

定位方式：

CSS提供了几种定位方式，用于控制元素在页面上的位置：

静态定位 (Static)： 默认的定位方式，元素按照正常的文档流排列。
相对定位 (Relative)： 元素相对于它在正常文档流中的位置进行偏移。
绝对定位 (Absolute)： 元素相对于最近的已定位祖先元素进行定位。
固定定位 (Fixed)： 元素相对于浏览器窗口进行定位。

浮动：

浮动 (Float) 是一种特殊的定位方式，它可以让元素脱离正常的文档流，并浮动到其父元素的左侧或右侧。

六、绘制 (Paint)：将元素绘制到屏幕上

有了布局信息，我们知道了每个元素的位置和大小。接下来，浏览器就可以将这些元素绘制到屏幕上。这个过程叫做绘制 (Paint)。

浏览器会将渲染树中的每个节点转换成一系列的绘制指令，然后将这些指令传递给GPU (Graphics Processing Unit)。 GPU负责执行这些指令，并将像素数据写入帧缓冲区 (Frame Buffer)。帧缓冲区中的数据最终会显示在屏幕上。

绘制过程涉及的步骤：

构建绘制列表 (Display List)： 浏览器会将渲染树中的每个节点转换成一系列的绘制指令，并将这些指令存储在一个列表中。绘制列表按照一定的顺序排列，以确保元素按照正确的顺序绘制。
栅格化 (Rasterization)： 将绘制列表中的指令转换成像素数据。这个过程也叫做光栅化。栅格化通常由GPU完成。
合成 (Compositing)： 将不同的图层合成在一起，形成最终的图像。浏览器会将页面分成多个图层，例如背景图层、文本图层、图像图层等。每个图层都有自己的绘制列表和像素数据。合成过程会将这些图层按照一定的顺序叠加在一起，形成最终的图像。

七、JavaScript的参与：动态修改页面

JavaScript可以在整个渲染流程中发挥作用，动态修改DOM树、CSSOM树和渲染树。例如，可以使用JavaScript来添加、删除或修改HTML元素，修改元素的样式，或者响应用户的交互。

// 获取元素
const heading = document.querySelector('h1');

// 修改文本内容
heading.textContent = '新的标题';

// 修改样式
heading.style.color = 'red';

// 添加事件监听器
heading.addEventListener('click', function() {
  alert('你点击了标题！');
});

当JavaScript修改了DOM树或CSSOM树时，浏览器需要重新构建渲染树，并重新进行布局和绘制。这个过程可能会导致性能问题，特别是当修改的元素影响到页面中的其他元素时。

八、性能优化：让网页飞起来

了解了浏览器的渲染流程，我们就可以针对性地进行性能优化，让网页加载更快，运行更流畅。

1. 减少HTML的大小：

压缩HTML代码： 删除不必要的空格、换行符和注释。
使用Gzip压缩： 在服务器端启用Gzip压缩，可以减小HTML文件的大小。

2. 优化CSS：

避免使用复杂的CSS选择器： 复杂的CSS选择器会降低CSSOM树的构建速度。
减少CSS规则的数量： 合并重复的CSS规则，减少CSS文件的数量。
使用CSS Sprites： 将多个小图片合并成一张大图片，减少HTTP请求的数量。

3. 优化JavaScript：

减少DOM操作： 尽量减少对DOM的操作，特别是频繁的DOM操作。
使用事件委托： 将事件监听器添加到父元素上，而不是添加到每个子元素上。
避免使用eval()函数： eval()函数会降低JavaScript的执行速度。

4. 优化图片：

选择合适的图片格式： JPEG适合用于照片，PNG适合用于图标和矢量图形。
压缩图片： 减小图片的大小，可以使用在线图片压缩工具。
使用CDN： 将图片存储在CDN (Content Delivery Network) 上，可以加快图片的加载速度。

5. 减少回流 (Reflow) 和重绘 (Repaint)：

批量修改样式： 尽量一次性修改多个样式，而不是多次修改。
使用DocumentFragment： 使用DocumentFragment来批量添加DOM元素。
避免使用offsetWidth、offsetHeight等属性： 这些属性会强制浏览器重新计算布局。

表格总结：

阶段	描述	优化策略
HTML解析	将HTML代码解析成DOM树。	压缩HTML代码，使用Gzip压缩。
CSS解析	将CSS代码解析成CSSOM树。	避免使用复杂的CSS选择器，减少CSS规则的数量，使用CSS Sprites。
渲染树构建	将DOM树和CSSOM树合并成渲染树，只包含需要显示的元素和样式信息。	避免使用`display: none`、`visibility: hidden`等属性，减少DOM操作。
布局 (回流)	计算渲染树中每个元素的位置和大小。	批量修改样式，使用`DocumentFragment`，避免使用`offsetWidth`、`offsetHeight`等属性。
绘制 (重绘)	将渲染树中的元素绘制到屏幕上。	优化图片，使用硬件加速。
JavaScript执行	JavaScript可以动态修改DOM树、CSSOM树和渲染树。	减少DOM操作，使用事件委托，避免使用`eval()`函数。

九、代码示例：性能优化实践

// 糟糕的代码：频繁修改DOM
function addListItems(items) {
  const list = document.getElementById('myList');
  for (let i = 0; i < items.length; i++) {
    const listItem = document.createElement('li');
    listItem.textContent = items[i];
    list.appendChild(listItem);
  }
}

// 优化的代码：使用DocumentFragment批量添加DOM
function addListItemsOptimized(items) {
  const list = document.getElementById('myList');
  const fragment = document.createDocumentFragment(); // 创建一个文档片段
  for (let i = 0; i < items.length; i++) {
    const listItem = document.createElement('li');
    listItem.textContent = items[i];
    fragment.appendChild(listItem); // 将listItem添加到文档片段中
  }
  list.appendChild(fragment); // 将文档片段一次性添加到列表中
}

// 糟糕的代码：多次修改样式
const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '16px';
element.style.fontWeight = 'bold';

// 优化的代码：一次性修改样式
element.style.cssText = 'color: red; font-size: 16px; font-weight: bold;'; // 使用cssText一次性设置多个样式

// 或者使用classList添加/删除class
element.classList.add('highlight');
element.classList.remove('hidden');

十、总结：了解流程，才能游刃有余

理解JavaScript在浏览器中的渲染流程，就像理解汽车的引擎原理一样。只有了解了引擎的工作方式，才能更好地驾驶汽车，避免出现故障。

同样，只有了解了浏览器的渲染流程，才能更好地编写JavaScript代码，优化网页性能，让用户体验更上一层楼。

希望今天的分享对大家有所帮助！记住，编程不仅仅是写代码，更是理解代码背后的原理。感谢大家的聆听！下次再见！

发表回复 取消回复

发表回复取消回复