访问URL的响应过程
- 浏览器收到URL，建立页面进程，开启网络请求线程
- 发起完整的HTTP请求：进行DNS解析(获取域名对应IP地址)建立通信链路，经历3次TCP握手
- 服务器接收到请求，后端处理请求
- 前后端之间的HTTP交互(响应请求)和涉及的缓存机制
- 浏览器接收到数据包后的关键渲染路径
- JS引擎的解析js代码过程
浏览器的进程
浏览器每打开一个新页面，都会建立一个新的进程并开启相应的请求线程。
如下，我们打开浏览器的任务管理器可以看到：
主要进程与线程
通过浏览器的任务管理器，我们可以发现，浏览器自身就会开启以下进程。开启多个线程处理的好处是避免某个进程崩溃时，影响浏览器主进程或其他进程（网络、存储、页面等进程）
- 浏览器主进程
- GPU进程
- Network Service 网络进程
- Storage Service 存储进程
- Audio Service 音频进程
- 扩展程序进程(安装启用的扩展程序也会建立进程)
- 渲染程序进程 - 也称为浏览器内核，默认会为每个页面建立独立渲染进程。
- 页面进程，所访问的每个页面都会建立对应的进程，负责将HTML、css、js等资源转为可交互页面。其中包含多个子线程(JS引擎、GUI宣传、事件触发、定时器触发、异步HTTP请求等线程)
构建对象模型
- DOM - 树 文档对象模型
- CSSOM - 树 层叠样式模型
建立HTTP请求
进行DNS解析获取访问域名所对应的IP地址，然后建立通信链路。
DNS解析的过程
建立TCP连接
建立TCP连接会经历3次握手，作用是为了确认双方的收发能力都是正常的。需要3次握手是因为一般情况下，客户端请求建立连接请求发送后没有得到响应会再次发送，如果仅握手2次，就会导致多次建立连接浪费资源，而3次握手，以第三个信息为准则能避免上诉情况。 三次握手：
- 客户端请求建立连接
- 服务端确认应答及请求建立连接
- 客户端确认应答
渲染绘制
按照文档对象模型和层叠样式模型的规则，将两个对象模型合并为渲染树，渲染树只包含可见节点。
渲染步骤：
- 从生成DOM树的根节点开始向下遍历每个子节点，忽略所有不可见的节点(脚本或css标记为不可见的隐藏的),因为不可见节点不会出现在渲染树中。
- 在CSSOM中为每个可见的子节点找到对应的规则并应用
- 根据所得到的渲染树，计算他们在视图中的位置与大小，这一步输出的是一个 盒模型
- 将每个节点完成绘制，呈现在屏幕上。
DOM 树
CSSOM 树
最后建立的 渲染树
整渲染树构建过程、布局计算以及绘制过程所需要的时间取决于实际文档内容的大小。文档越大整个构建渲染过程所花费时间就越长，所以关键渲染路径的执行快慢，将直接影响首屏加载时间的性能指标
当首屏渲染完成后，用户交互过程中或者接口调用响应时更改了渲染树的结构，如DOM改变或者CSS布局大小的改变，这个渲染过程就会重新再执行一遍。这一过程会与交互性能指标相关
具体的渲染过程，与耗时情况，可以打开性能面板进行查看。
