从输入URL到页面呈现——网络篇

阶段一：用户输入阶段

用户在地址栏输入内容之后，浏览器会首先判断用户输入的是合法的URL还是搜索内容，如果是搜索内容就合成URL，如果是合法的URL就开始进行加载。

阶段二：发起URL请求阶段

网络请求

此刻，在浏览器地址栏输入了百度的网址：

https://www.baidu.com/

1. 构建请求行

浏览器进程首先会构建请求行信息，然后通过进程间通信IPC将URL请求发送给网络进程。

2.查找强缓存

网络进程获取到URL之后，会先去本地缓存中查找是否有缓存资源，如果有则直接将缓存资源返回给浏览器进程，否则进入网络请求阶段。

3. DNS解析

络进程请求首先会从DNS数据缓存服务器中查找是否缓存过当前域名的信息，有则直接返回，否则，会进行DNS解析域名对应的IP和端口号。

4. 建立 TCP 连接

hrome有个机制，同一个域名同时最多只能建立6个TCP连接，如果超过这个数量的连接必须要进入排队等待状态。等待完后，通过TCP三次握手与服务器建立连接，然后进行数据传输。

5.发送 HTTP 请求

浏览器发 HTTP 请求要携带三样东西:请求行、请求头和请求体。请求行中包含了请求方法、请求URI和HTTP版，请求头，告诉服务器一些浏览器的相关信息，

6.服务器处理请求

服务器返回响应行，包括协议版本和状态码等

7.断开TCP连接：4次挥手断开连接

浏览器进程：
• 用户输入内容，进行URL 解析（编码）
• 如果是文本，则拼接成默认搜索引擎加关键字的 URL 进行搜索
• 如果是 URL 就进行页面访问请求，并加上协议头（http、https 的区别）

网络进程：
• 查询缓存（缓存相关知识）
• 如果有浏览器本地缓存可用则使用本地缓存
• DNS 解析（DNS 相关）
• 通过 DNS 来查询 IP 地址
• DNS 先查本地、后查运营商、逐级网上查。（域名解析是从后往前查的）
• 拿到 IP 地址发起 HTTP 请求（这块可以问网络相关各种基础知识，TCP、IP、UDP、HTTPS、HTTP2）
• 建立 TCP 三次握手连接
• 如果是 HTTPS 建立 TLS 安全通道连接（HTTPS 加密方式）
• 发送 HTTP 请求，这个请求可能回到代理服务器或者源服务器。（服务器代理）
• 拿到 HTTP 响应（HTTP 响应码）
• 根据 Content-Type 来判断响应文件类型（常用 HTTP 响应头的作用）
• stream 类，浏览器启动下载界面下载文件。
• text、图片类，浏览器直接展示在页面上
• html 类型，浏览器会进行页面解析。
渲染进程：
• 页面解析
• 网络进程向渲染进程传输 HTML 数据
• 对 HTML 进行词法分析，通过堆栈算法构建 DOM 树。（AST语法树）
• 如果遇到外部资源，浏览器会交给网络进程去下载。
• 构建完 DOM 树的同时，将 CSS 代码转为浏览器可以理解的 StyleSheets
• 标准化样式属性值（单位、大小）
• 计算出 DOM 树每个节点的具体样式
• 计算每个 DOM 节点的父节点们的样式（样式继承）
• DOM 树构建完成后， 合并 StyleSheets 构建出 CSSOM 渲染树。
• 排版：遍历渲染树，计算元素的坐标位置。
• 分层：为节点生成图层
• 绘制：用浏览器指令逐条绘制页面元素。（如何避免重绘重排）
• 栅格化
• 合成