一、浏览器访问网页时候，做了这几件事：
- DNS解析
- TCP三次握手链接
- HTTP客户端请求和服务端响应
- 客户端渲染
前三步散扯请猛戳---这里---
本文主要散扯第四步
二、客户端渲染有以下几步：
- HTML 代码解析为 DOM，CSS 代码解析为 CSSOM（CSS Object Model）。
- 将 DOM 和 CSSOM 合成一棵渲染树（render tree）；
- 根据渲染树布局，计算出渲染树的布局（layout）；
- 将渲染树绘制到屏幕。
注意：
- 以上几步，不一定按照顺序依次执行的，有时候解析每结束，页面就出现了内容。
- render tree 构建前提必须有CSSOM 以及 DOM，所以先生成CSSOM 和 DOM
webkit渲染引擎流程
1) 那么问题来了，什么是DOM树（选看）？
- DOM树全称Document Object Model(文档对象模型)，它是用来呈现以及与任意XML和HTML交互的API，DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。
2) 那么问题又来了，什么是CSSOM树？
- CSSOM是一组允许用JavaScript操纵CSS的API。 它是继DOM和HTML API之后，又一个操纵CSS的接口，从而能够动态地读取和修改CSS样式。
1、解析HTML，CSS，生成DOM树、CSSOM树
将 HTML 解析成 DOM 树，经历一下过程：
- 编码：将 HTML 原始字节数据转成文件指定编码的字符。
- 令牌化：浏览器会根据 HTML 规范将字符串转换成各种令牌
- 什么是令牌：将<html> <body> <div> 这些分割转化成具有特殊意义的一组规则。令牌记录了开始和结束，如果<body>令牌开始与结束中间有<div>令牌，<div> 的父节点是<body>，这就为DOM树形提供了基础
- 生成对象：将每个令牌转化成定义其属性和规则的对象——节点对象，所有节点对象组成的就是DOM树
CSS 解析成 CSSOM 和 HTML 差不多，CSS 也是具有层级关系，比如：div p {color:red;} div 和 p 就具有父子关系，在给p标签渲染样式的时候，首先去寻找父标签有div的，然后才采取此样式渲染，这也是优化重点，尽量用类名选择器写样式，因为使用标签选择器，浏览器要在大量的标签中进行筛选，速度慢，相同类名量少有利于筛选
构建DOM树的流程，字节 -- 字符 -- 令牌 -- 节点对象 -- 文档对象模型。
解析HTML成DOM树栗子：
<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>
DOM树构建过程
-
当遇到link标签的时候，停止解析HTML，获取对应路径下的css文件
body { font-size: 16px } p { font-weight: bold } span { color: red } p span { display: none } img { float: right }将 CSS 解析成 CSSOM
CSSOM树
注意：
- HTML在解析生成DOM树的时候，可能会因为CSS和JS加载导致HTML停止解析生成DOM树，这就是渲染阻塞(优化重点)，什么是渲染阻塞以及如何优化，请继续往下瞅瞅...
- 为什么是DOM树，因为HTML标签具有父子关系，树形结构能清晰描述节点之间的关系
- 当 HTML 解析器被脚本阻塞时，解析器虽然会停止构建 DOM，但仍会识别该脚本后面的资源，并进行预加载。
2、DOM 和 CSSOM 合成一棵渲染树（render tree）
- DOM和CSSOM是独立的对象，并不能直接渲染到页面，需要将DOM和CSSOM结合在一起，这就是渲染树
渲染树
* 浏览器从DOM的根节点开始遍历每个可见节点并从CSSOM找到对应的css样式规则并应用
3. 根据渲染树布局，计算出渲染树的布局（layout）
- css布局采用的是盒模型的思维模型来表示节点与节点之间的位置关系，盒模型包括：外边距(margin)、内边距(padding)、边框(border)、内容(content)。每个节点都是一个小盒子
- 从渲染树的根节点开始遍历根据屏幕的大小确切到每个节点的位置
4. 将渲染树绘制到屏幕
- 渲染树布局计算完成之后，浏览器立即发出
Paint Setup与Paint事件，将渲染树绘制到屏幕上
参考：
