https://blog.csdn.net/Newbie___/article/details/107212575
https://juejin.cn/post/6869279683230629896
- 浏览器栏输入url地址
- 检查浏览器缓存，如果有缓存且缓存结果生效，直接取缓存数据，没有则进行下一步
- dns解析获取ip地址
- 三次握手建立tcp连接，发送http请求
- 服务器接收并解析请求，返回响应数据
- 浏览器接收相应数据，判断是否需要进行缓存
- 浏览器解析数据包，处理html生成dom树和 处理css生成css规则树，将两者合并成render树，根据renders树计算各节点位置
- 页面是一层层叠加在一起生成的，渲染引擎会生成对应的分层树
- 合成线程（渲染进程中的）会把分层树的图层变成图块
- 调用Gpu绘制（Gpu栅格化，将视窗附近的图块变成位图「又名比特图，是像素点构成的矩阵图像」，然后保存在gpu进程中。栅格化完成，浏览器从gpu进程中取也面内容）
image.png
浏览器tab页左上角的图标icon，在页面加载的时候会loading，逆时针转动则表示正在做网络请求，网络进程正在起作用；顺时针转动，则表示正在渲染，渲染进程起作用
页面渲染过程
- 浏览器无法直接读取html，需要先构建Dom树。
- 把读取到的css，变成浏览器可以理解的cssom树。
转换样式表中的属性值，使其标准化。2em 被解析成了 32px，red 被解析成了 rgb(255,0,0)，bold 被解析成了 700……
计算出 DOM 树中每个节点的具体样式。利用css继承、css优先级、css层叠规则等计算出来。 - 浏览器会先从DOM树的根节点开始遍历每个可见节点，并把这些节点添加到渲染树中。不可见的节点不会添加到渲染树，比如css设置了display为none 属性的节点。
- 根据生成的渲染树，进行布局（也可以叫做回流），得到各个节点在页面中的确切位置和大小。（自动重排）。布局阶段的输出是一个盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小，所有相对的测量值也都会被转换为屏幕内的绝对像素值（重绘）。
- 生成分层树，页面都是一层一层叠加在一起形成的。比如一些复杂的css动画，z-index等，渲染引擎会为他们生成专用的图层，并生成对应的图层树。
- 构建完图层之后，渲染引擎会对图层树中的每个元素进行绘制。合成线程会把分层树的图层变成图块。
- GPU的栅格化把视窗附近的图块变成位图，然后保存在GPU的进程中。（因为一个页面可能很大，而用户只能看到视口中页面的一部分，如果全部绘制开销会很大，所以合成线程会按照视口附近的图块来优先生成位图）
- 栅格化完成之后，浏览器进去GPU进程里取出页面内容显示在屏幕上，这就完成了渲染阶段
浏览器的性能优化机制
- 浏览器自身会有一个优化机制，会有一个队列，然后类似于批处理的形式，当队列中的任务或者时间间隔达到一定的阈值时，清空队列，然后这样会把多次重排和重绘变成一次
- 但是，如果触发了同步布局事件，则会立刻清空队列，执行绘制操作
getBoundingClientRect、getComputedStyle()、offsetTop、scrollWidth、clientWidth、
