本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。
前言
吃饱饭才有力气写代码~
这一部分以前也是了解的一知半解的，现在就趁这个机会自己理一理，借鉴的是《How Browsers Work》，把我理解的内容做个记录，有不正确的地方欢迎指教~
一.浏览器
说到浏览器大家都很熟悉对吧，像 IE(Internet Explorer)、Chrome、Firefox等。
非开发者最常用的功能无非就是在浏览器的地址栏输入一个网址，然后等着显示页面，之后在页面上进行浏览呀搜索呀之类的操作...我以前和浏览器的接触也就这些
随着对前端的学习，逐渐开始在浏览器上进行调试，但是呢对浏览器页面渲染这些流程也还是一知半解。这两天读了相关文档，了解如下：
- 浏览器的功能： 主要功能是通过从服务器请求并把相应的资源显示在浏览器窗口。资源格式通常是 HTML，但也有 PDF、图像等。资源的位置由用户使用 URI（统一资源标识符）指定。
- 浏览器常见的用户界面元素：
- 用于输入URL的地址栏
- 前进后退按钮
- 书签选项
- 刷新和停止按钮(用于刷新和停止加载当前文档)
- 主页按钮(用来进入主页)
- 浏览器的主要组件
- 用户界面
- 浏览器引擎
- 渲染引擎
- 网络
- UI后端
- JavaScript 解释器
- 数据存储
二.渲染引擎
渲染引擎首先通过网络获得所请求文档的内容，接下来：
graph TD
解析html来构建dom树 --> 构建render树 --> 布局render树 --> 绘制render树
2.1 首先了解一下DOM:
DOM是文档对象模型的缩写，用来表示html文档的对象，作为html元素的外部接口供js等调用。它和标签基本上一一对应，比如：
<html>
<head>
<tittle>谷歌</tittle>
</head>
<body>
<div>
<p>
Hello DOM
</p>
</div>
</body>
</html>
- 对应的 DOM 树：
graph TD
html --> head --> tittle --> text1
html --> body --> div --> p --> text2
HTML 文档中的内容都是节点，这些节点之间拥有例如：父子关系、兄弟关系等层级关系。最常见的几种节点有：文档节点、元素节点、文本节点、属性节点、注释节点等。
- 构建DOM树流程： 这个过程概括来说就是读取html文档，把字节转换成字符，确定tokens(标签)，再把tokens转换成节点，用这些节点构建DOM树。
graph TD
Bytes --> Characters --> Tokens --> Nodes --> DOM
2.2 什么是CSSOM树
与HTML文件中的标签节点类似，CSS中各节点之间也有层级关系，同样的逻辑下彼此相连，构成CSSOM树。
body{
font-size:20px;
}
p{
font-weight:bold;
}
span{
color:yellow;
}
p span{
display:none;
}
img{
float:left;
}
- 对应的CSSOM树：
graph TD
body --> p --> span1
body --> span2
body --> imgnengg
- 构建CSSOM树的流程： 和DOM树的构建流程一致，就是读取CSS文档，把字节转换成字符，确定tokens,再把tokens转换成节点，把这些节点构建成CSSOM树。
graph TD
Characters --> Tokens --> Nodes --> CSSOM
在CSSOM树生成节点时，会优先继承父节点的样式，再进行覆盖，为该节点应用更具体的样式，最后递归生成CSSOM树。
2.3 遇到JavaScript
要是在构建DOM树的时候遇到了script标签，HTML解析器就会阻塞，把这些交给JavaScript引擎去处理，等它处理完成后，浏览器才会继续进行DOM树的构建。根本原因是：Javascript会对DOM节点进行操作，浏览器没有办法预测接下来的DOM的具体内容，为了节省资源以及避免无效操作，它就会选择先阻塞DOM树的构建。
所以我们会发现前辈们在写代码时会把JS文件放在HTML底部，是因为如果在HTML头部加载JS文件，会由于JS阻塞延迟页面的展现。因此会放在末尾，来加快页面渲染。
2.4 构建渲染树
渲染树就是render tree ，它是由DOM树和CSSOM树合并来的，这个顺序没有先后之分，有时候会有并行构建，就会出现一边加载一边解析一边渲染的现象。这个树是文档的一个可视化表现，按照显示顺序排列的视觉元素，目的是使内容能够按照正确的顺序绘制。
具体显示的时候就是我们常说的盒模型的概念，本身包含一些几何属性，如宽度，高度，位置等，以及一个重要属性如何显示 display 。
2.5 布局绘制
在render树构造出来之后，还没有位置跟大小信息，为了确定这些信息，我们称之为布局。HTML里有个流式布局，就是从上到下，从左到右。浏览器在render树内对每一个render节点进行布局处理，计算出每一个元素的大小和位置，确定其在屏幕上的位置。最后通过遍历render树把实际的像素显示在屏幕上。
