Skip to content

【基础】浏览器如何渲染 HTML & CSS #57

Open
Open
【基础】浏览器如何渲染 HTML & CSS#57
Assignees
zh-rocco
Labels
HTMLStar ✨
@zh-rocco

Description

@zh-rocco
zh-rocco
opened on Mar 6, 2019

目录

整体流程

渲染流程

  1. HTML 标记 -> DOM Tree
  2. CSS 标记 -> CSSOM Tree
  3. DOM + CSSOM -> Render Tree
  4. Layout
  5. Paint

构建 DOM Tree

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <title>Critical Path</title>
  </head>
  <body>
    <p>
      Hello
      <span>web performance</span>
      students!
    </p>
    <div>
      <img src="awesome-photo.jpg" />
    </div>
  </body>
</html>

解析过程

HTML 解析过程

  1. 将 HTML 的原始字节根据文件指定的编码类型（例如 UTF-8）将它们转换成字符串。
  2. 浏览器将字符串转换成 W3C HTML5 标准规定的各种令牌。
  3. 生成对应的 HTML Node 节点对象
  4. 构建 DOM 树

DOM 树

DOM Tree

构建 CSSOM Tree

body {
  font-size: 16px;
}
p {
  font-weight: bold;
}
span {
  color: red;
}
p span {
  display: none;
}
img {
  float: right;
}

解析过程

CSS 解析过程

CSSOM

CSSOM Tree

合并 Render Tree

Render Tree

注：渲染树只包含渲染网页所需的节点，如 display: none; 的元素是不会出现在渲染树种的。

Layout

将所有的大小样式都计算成像素。

Paint

参考

Metadata

Metadata

Assignees

Labels

HTMLStar ✨

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions