前端代码是通过什么转换成用户眼中的页面？

htmlhtml5

前端代码转换成用户眼中的页面主要依赖于浏览器（Browser）的解析和渲染能力。当用户通过浏览器访问一个网页时，浏览器会执行以下主要步骤来将前端代码（主要是HTML、CSS和JavaScript）转换成用户可见的页面：

  1. 解析HTML：浏览器首先解析HTML文档，构建一个DOM（Document Object Model）树。DOM树是页面结构的内存表示，包含了页面中的所有元素及其关系。

  2. 解析CSS：随后，浏览器解析CSS文件或<style>标签中的样式信息，构建CSSOM（CSS Object Model）树。CSSOM树描述了文档中每个元素的样式信息。

  3. 合并DOM和CSSOM：浏览器将DOM和CSSOM合并成一个渲染树（Render Tree）。渲染树仅包含需要显示的节点和这些节点的样式信息，它用于计算每个节点的布局（位置和大小）。

  4. 布局（Layout）：浏览器根据渲染树来计算每个节点的几何信息（如位置、大小）。这个过程称为布局或回流（reflow）。

  5. 绘制（Paint）：在确定了每个节点的几何信息后，浏览器将遍历渲染树，并调用绘图API将内容绘制到屏幕上。这个过程称为绘制或重绘（repaint）。

  6. 合成（Compositing）：如果页面包含了复杂的层叠上下文（如使用了CSS的position: absolute;、opacity、transform等属性），浏览器会将这些层单独绘制到不同的图层上，然后将这些图层合并成一个最终的图像，展示给用户。

下面是一个简单的HTML文件示例，它展示了基本的HTML结构，并会被浏览器转换成用户可见的页面。

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单页面示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个简单的HTML页面示例。</p>
</body>
</html>

当用户将这个HTML文件保存为.html文件，并通过浏览器打开时，浏览器会按照上述步骤解析HTML和CSS，并将结果显示为包含蓝色标题“欢迎来到我的网站”和一段普通文本的页面。

上一篇：Canvas中如何建立裁切区域？

下一篇：我们看到网页背后本质是什么？