从一个HTTP(S)到页面渲染的过程

一、DNS解析过程

1、首先在浏览器的DNS缓存记录中寻找，如果存在记录则返回IP地址。浏览器
2、在本地host文件中间中寻找是否有对应的记录。本地文件
3、在本地DNS服务器中寻找是否存在记录。路由器（局域网）
4、在网络运营商的本地域名服务器寻找是否存在记录。广域网
5、先在国内的根域名服务器镜像找，然后去真实的根域名服务器中寻找。好像一共只有13台根域名服务器，离国内最近的好像是在日本。因特网

二、TCP握手

TCP是因特网中的传输层协议，使用三次握手协议建立连接。当主动方发出SYN连接请求后，等待对方回答SYN+ACK，并最终对对方的 SYN 执行 ACK 确认。这种建立连接的方法可以防止产生错误的连接。

TCP三次握手的过程如下：

• 客户端发送SYN（SEQ=x）报文给服务器端，进入SYN_SEND状态。
• 服务器端收到SYN报文，回应一个SYN （SEQ=y）ACK（ACK=x+1）报文，进入SYN_RECV状态。
• 客户端收到服务器端的SYN报文，回应一个ACK（ACK=y+1）报文，进入Established状态。

我觉着描述TCP握手很好的一篇文章

三、TLS握手

我也不是很懂，直接看大佬的文章吧

四、构建DOM树

1、通过标签解析器将HTML的内容，将开始标签压入标签栈。
2、遇到结束标签后，判断结束标签跟标签栈顶的标签是否相同，如果相同将标签内容弹栈，放入到DOM树中。
3、遇到HTML结束标签并放入DOM树中，结束构建。

当时遇到了没有deferh和async标记的js文件会阻塞渲染并停止HTML的解析。
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后。

更详细的看大佬文章

五、构建CSSOM树

浏览器将CSS规则转换为可以理解和使用的样式映射。浏览器遍历CSS中的每个规则集，根据CSS选择器创建具有父、子和兄弟关系的节点树。过程类似四。

六、生成Render Tree

七、回流

计算每个元素的大小及位置。
修改元素的大小及位置的时候会引起页面回流。

八、重绘

为每个元素赋予背景颜色、透明度等样式。

具体细节后续想起来再补充……