原文链接：https://www.yuque.com/yunshang-twlfu/isvgha/osw2u7
渲染过程-显示引擎
一、总过程
解析html文本，把标记解析成dom树。同时解析css，得到标记和样式信息，组成呈现树。然后开始布局，分配每个节点应该出现在哪个坐标。最后遍历呈现树，绘制节点在界面上。
需要了解的chrom的工作原理主要有:
1、网络进程
2、js执行
3、渲染进程
4、web安全
扩展:
进程和线程，见操作系统。简单来说: 进程可以有多个线程，进程的一个线程挂掉整个进程会挂掉，进程与进程之间不影响。线程之间可以共享进程的数据，线程不能单独存在，需要进程管理。
浏览器发展：
1、单进程浏览器：
页面渲染，js执行都在一个进程，同一个时间只有一个模块可以执行，所以不流畅；插件容易崩溃，导致进程崩溃，只有一个进程的浏览器崩溃，所以不稳定； 插件容易获取控制到浏览器、电脑。
2、多进程浏览器：
目前的浏览器有多个渲染进程、多个插件进程、浏览器主进程、网络进程、GPU进程。进程运行在沙箱中，不能获取操作权限，硬盘数据。缺点：架构复杂，资源占用大。
GPU进程？
导航流程-从输入url到页面显示的过程：
1、输入url，回车：检查url，添加协议（举例：http1.1）
2、网络进程：检查当前资源是否已经请求过，如果是，则使用本地缓存。拦截请求
3、如果没有本地缓存的资源，则通过dns解析出ip地址和端口。这里也会看本地dns缓存有没有解析过当前url。如果有则不用请求dns系统查找域名和ip地址的映射关系。http的默认端口是80.。
4、建立tcp连接，浏览器对同一个域名维持6个tcp连接，超过需要等待。服务端返回响应头可以设置长连接：connection：keep-live告诉浏览器保持同一个连接发起请求。如果需要重定向，服务端响应头设置location字段，写出重定向的地址。如果要缓存数据：响应头设置cache-control字段
5、数据传输完成断开连接或者保持连接
6、渲染进程资源解析：
7、绘制
html语义化
什么是语义化：内容意义用具体的的标签展示。
有哪些语义化标签： 结构上，header,nav,section,aside,footer,article 内容上： img、ul、ol、a
非语义化标签：div span
为什么要语义化：1、被浏览器抓取到重要内容和有效信息。2、css被阻塞挂掉的时候，页面的内容、结构还能保持较为清晰。3、代码易于察看和维护， 4、被特别的设备解析
二、呈现树
在构建dom树的同时还会构建呈现树，呈现树是带样式信息，是有显示顺序的，所以构建呈现树需要计算每个节点的样式。
样式来源有：每个浏览器的默认样式，外部样式表，行内样式。
呈现树和dom树的区别与联系：
或者可以理解为呈现树是dom树的可视化表现？？但是呈现树和dom树不是一一对应的，例如浮动定位和绝对定位的元素，因为在正常的文档流之外。
样式计算：
1、选择器：根据选择器划分到不同的哈希表，例如id表，类表，标记名称表......根据标记的属性到对应的表获取样式规则。
2、层叠顺序：次序低到高
- 浏览器声明
- 用户普通声明
- 作者普通声明
- 作者重要声明
- 用户重要声明
需要注意的是呈现树没有计算位置和大小。结点位置、大小的计算过程叫做重排 || 布局。
三、布局/重排
计算位置和大小
大小的话主要是宽度的计算
定位
定位的方式
层叠
从第三维度，即分为图层。
四、绘制
在绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。
绘制工作是使用用户界面基础组件完成的。
拓展：
css选择器的权重高到低：
1、加了important的样式
2、行内样式 1000
3、id选择器 100
4、类选择器、伪类元素、伪类选择器10
5、元素、伪元素 1
6、通配符* 0
子类、相邻选择器会被拆开
资源解析
一、HTML解析
1、标记化解析html
html是上下文相关文法（上下文无关文法见编译原理）
对html内容进行词法分析，解析成标记（起始标记、结束标记、属性名、属性值）
解析过程-示例：
<html>
<body>
Hello world
</body>
</html>以状态机的状态计算变化来发出标记。
初始状态是数据状态。遇到字符 < 时，状态更改为“标记打开状态”。接收一个 a-z 字符会创建“起始标记”，状态更改为“标记名称状态”。这个状态会一直保持到接收 > 字符。在此期间接收的每个字符都会附加到新的标记名称上。在本例中，我们创建的标记是 html 标记。
遇到 > 标记时，会发送当前的标记&#
最低0.47元/天 解锁文章
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
