二、从输入 URL 到浏览器显示页面发生了什么?

用户输入的是关键字还是 URL？ 如果是关键字则使用默认搜索引擎生产 URL

1.浏览器进程的相互调用

• 在浏览器进程中输入url地址开始导航。并准备渲染进程
• 在网络进程中发送请求，将响应后的结果交给渲染进程处理
• 解析页面，加载页面中所需资源
• 渲染完毕，展示结果

我们开始细化每一步流程，并且从流程中提取我们可以优化的点。

2.URL 请求过程

• 浏览器查找当前 URL 是否存在缓存，如果有缓存、并且缓存未过期，直接从缓存中返回。
• 查看域名是否已经被解析过了，没有解析过进行DNS解析将域名解析成IP地址，并增加端口号
• 如果请求是HTTPS，进行SSL协商
• 利用IP地址进行寻址，请求排队。同一个域名下请求数量不能多余 6 个。
• 排队后服务器创建TCP链接 （三次握手）
• 利用TCP协议将大文件拆分成数据包进行传输(有序传输)，可靠的传输给服务器（丢包重传），服务器收到后按照序号重排数据包 （增加TCP头部，IP头部）
• 发送 HTTP 请求（请求行，请求头，请求体）
• HTTP 1.1中支持keep-alive属性，TCP 链接不会立即关闭，后续请求可以省去建立链接时间。
• 服务器响应结果（响应行，响应头，响应体）
• 返回状态码为 301、302 时，浏览器会进行重定向操作。（重新进行导航）
• 返回 304 则查找缓存。（服务端可以设置强制缓存）

通过network Timing 观察请求发出的流程：

• Queuing: 请求发送前会根据优先级进行排队，同时每个域名最多处理 6 个 TCP 链接，超过的也会进行排队，并且分配磁盘空间时也会消耗一定时间。
• Stalled :请求发出前的等待时间（处理代理，链接复用）
• DNS lookup :查找DNS的时间
• initial Connection :建立 TCP 链接时间
• SSL: SSL握手时间（SSL协商）
• Request Sent :请求发送时间（可忽略）
• Waiting(TTFB) :等待响应的时间，等待返回首个字符的时间
• Content Dowloaded :用于下载响应的时间

蓝色：DOMContentLoaded:DOM构建完成的时间 红色：Load:浏览器所有资源加载完毕 本质上，浏览器是方便一般互联网用户通过界面解析和发送 HTTP 协议的软件

3.HTTP发展历程

• HTTP/0.9 在传输过程中没有请求头和请求体，服务器响应没有返回头信息，内容采用 ASCII 字符流来进行传输 HTML
• HTTP/1.0 增加了请求头和响应头，实现多类型数据传输
• HTTP/1.1 默认开启持久链接，在一个 TCP 链接上可以传输多个 HTTP 请求，采用管线化的方式（每个域名最多维护 6 个 TCP 持久链接）解决队头阻塞问题 （服务端需要按顺序依次处理请求）。完美支持数据分块传输（chunk transfer），并引入客户端 cookie 机制、安全机制等。
• HTTP/2.0 解决网络带宽使用率低 （TCP 慢启动，多个 TCP 竞争带宽，队头阻塞）采用多路复用机制（一个域名使用一个 TCP 长链接，通过二进制分帧层来实现）。头部压缩（HPACK）、及服务端推送
• HTTP/3.0 解决 TCP 队头阻塞问题， 采用QUIC协议。QUIC协议是基于UDP的 （目前：支持和部署是最大的问题）
• HTTP 明文传输,在传输过程中会经历路由器、运营商等环节，数据有可能被窃取或篡改 （安全问题）

对比 HTTP/1.1 和 HTTP/2 的差异

4.渲染流程

• 1.浏览器无法直接使用 HTML，需要将 HTML 转化成 DOM 树。（document）
• 2.浏览器无法解析纯文本的CSS样式，需要对CSS进行解析,解析成styleSheets。CSSOM（document.styleSeets）
• 3.计算出 DOM 树中每个节点的具体样式（Attachment）
• 4.创建渲染（布局）树，将 DOM 树中可见节点，添加到布局树中。并计算节点渲染到页面的坐标位置。（layout）
• 5.通过布局树，进行分层 （根据定位属性、透明属性、transform 属性、clip 属性等）生产图层树
• 6.将不同图层进行绘制，转交给合成线程处理。最终生产页面，并显示到浏览器上 (Painting,Display)

查看 layer 并对图层进行绘制的列表