「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战」。
前言
之前写过一篇关于面试的文章 高频面试题-在浏览器中输入URL会发生什么，文中对在浏览器中输入URL会发生什么流程做了一个阐述，这篇文章主要对于其中的浏览器渲染的过程做一下详细的叙述
浏览器解析页面的流程
大致分为以下几个步骤
- 解析HTML，构建DOM树
- 解析CSS，生成CSS规则树
- 合并DOM树和CSS规则树，生成render树
- 布局render树（Layout/reflow），负责各元素尺寸、位置的计算
- 绘制render树（paint），绘制页面像素信息
- 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上
生成 DOM 树
- 解析HTML到构建DOM流程如下
- 读取HTML的原始字节
- 将字节根据编码转换成字符串
- 将这些字符转换为不同的标记token，每个token都有自己独特的含义以及规则集
- 将token转为node对象
- 根据node对象构建DOM
生成 CSS 规则树
- 构建 CSS 规则树的流程和 DOM 树类似，最终生成一个 CSSOM
生成 render 树
- 合并之前生成的DOM树和CSS规则树生成 render 树
- 渲染树只包括需要展示的节点，如果节点的样式是
display: none， 就不在渲染树中
渲染
- 拿到渲染树之后就会开始渲染，根据样式定位页面元素，并绘制到页面上
- 渲染过程中如果碰到了
<script>就会发生阻塞，因为JS可能动态的修改DOM或者CSS，这一个过程就会引起重新的布局也叫回流（Reflow）或者重绘（Repaint）
重绘与回流
回流
- 当页面中元素的规模尺寸、布局的样式发生变化时，浏览器会重新计算其位置和几何信息，这个计算过程就叫做回流
重绘
- 涉及到改变某个元素的背景色、文字颜色、边框颜色等属性时，就会发生重绘，这些变更它不会影响页面布局，也就是说重绘可以单独发生
回流一定伴随着重绘，重绘却可以单独出现。回流的成本开销要高于重绘，在优化方案中劲量避免会引起回流的操作
