大家好，我是辉夜真是太可爱啦 。故事的开始，要从一道经典的面试题开始说起， 从输入 URL 到页面加载完成，发生了什么？ 相信大家应该对这个题目也很耳熟了。本系列是我 《一文搞懂JS系列》 之后的第二个系列。旨在让大家搞懂这个加载过程，从简答以及深入解答都能够对答如流！
前言
大家好，我是辉夜真是太可爱啦 。
在通过三次握手，建立 TCP 连接，通过 HTTP 请求获取网络资源之后，会先拿到 HTML 文件，HTML是一个页面的基础，所以会在最开始的时候下载它，下载完毕后就开始对它进行解析。而解析完成之后，渲染引擎承载着把静态资源转换为可视化界面的任务。
主要渲染过程
主要有五个渲染过程：
在这五个过程中，每一个过程都有相应产物
1. 构建DOM树
对 HTML 文档自上而下进行解析，并在解析 HTML 的过程中发出了页面渲染所需的各种外部资源请求。
（其实这一步，外部资源请求远远没有那么简单，关于外链 CSS , JS 的阻塞问题，可以查看这一篇文章 关于CSS堵塞和JS堵塞）。
在这一阶段生成 DOM树 。
2. 构建CSSOM树
对所有的 CSS 样式信息进行解析。
在这一阶段生成 CSSOM树 。
3. 合成Render树
将上面生成的 DOM树 和 CSSOM树 进行合并，生成 Render树 。（:before 和 :after 这样的伪元素会在这个环节被构建到 DOM 树中。）
在这一阶段生成 Render树 。
4. 布局
所有元素的相对位置信息，大小等信息均在这一步得到计算。
在这一阶段生成 布局盒模型 。
5. 渲染
根据上面的布局产物 盒模型 ，调用 GPU 绘制，合成图层，显示在屏幕上。
在这一阶段生成 目标界面 。
举个栗子
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>页面标题</title>
<style>
body{
font-size: 36px;
}
.main-box{
width: 200px;
height: 50px;
border: 2px solid green;
}
span{
font-size: 24px;
}
p{
color: rosybrown;
font-size: 18px;
}
</style>
</head>
<body>
<div class="main-box">
<span class="title">辉夜真是太可爱啦</span>
</div>
<p>图解浏览器渲染过程</p>
</body>
</html>
1. DOM树
2. CSSOM树
由于 CSS 有继承以及优先级的概念，所以会有样式覆盖的概念。
所以， CSSOM树需要等到完全构建后才可以被使用
3. Render树
值得一提的是，display: none; 的元素将不会出现在 Render树 中。
4. 布局盒模型
由于 <div> 设置了宽度和高度， <p> 是块级元素，独占一行。
