前言
虽然类似的文章有很多了，这篇文章意在记录一下自己对这个知识点学习后的总结，如有不足还请见谅。
用户输入
- 当用户在地址栏输入一个查询关键字时，地址栏会判断输入的关键字是搜索内容还是请求 URL（主进程），当用户回车后，当前页面触发 buforunload事件，标签页上的图标进入了加载状态。
URL 请求过程
- 主进程会通过进程间通信把 URL 请求发送给网络进程，网络进程收到 URL后，会启动 URL 请求的流程
- 在浏览器缓存中查询是否有请求的资源，如果有直接使用缓存中资源，没有则到下一步 。
考点：深入理解浏览器缓存机制
- 准备 IP 地址和端口，如果地址是域名的话，通过 DNS 获取获取 IP地址
- 进入 TCP 等待队列，同一个域名同时只能建立六个TCP连接，如果大于六个，超过六个的需要等待 TCP 连接空闲
- 与服务器三次握手建立连接
考点：TCP三次握手四次挥手
- 发送 HTTP 请求给服务器
- 服务器收到请求后，处理请求，响应请求
- 断开 TCP 连接，如果请求头或者响应头中含有 Connection:Keep-Alive 下一个请求直接复用当前 TCP 连接通道
- 收到回复后，浏览器开始准备渲染进程，通常情况下浏览器会给每一个页面分配一个渲染进程，如果从一个页面打开另外一个页面，新页面和当前页面属于同一个站点（协议和根域名一致），那它们会共用一个渲染进程
- 网络进程将收到的数据提交给渲染进程，渲染进程进入渲染阶段
渲染阶段
- 构建 DOM 树，HTML 解析器解析 HTML文件，输出树状结构的 DOM（存在内存中，可以通过js访问）。
- 样式计算：
- 渲染引擎将 CSS 文本转为浏览器可以理解的样式表
- 将样式表中的属性值转化为浏览器可以理解的值
- 计算出每一个 DOM节点具体样式
- 构建布局树
- 将所有可见的节点添加到布局树中
- 布局计算
- 分层，为特定的节点生成专用的图层，构建分层树。拥有层叠上下文属性的元素会被提升为单独的一层，需要剪裁的地方也会创建为图层。
科普：层叠上下文
- 图层绘制，绘制好后合成线程会将图层划分为图块，然后将视口附加的图块转换为位图（栅格化，涉及到 GPU 进程）
- 浏览器进程根据绘制结果将界面显示到显示器上。
考点：重绘 & 重排
