基本是跟该文章的内容一样
- DNS域名解析
- 建立TCP连接（三次握手）
- http请求，服务器处理请求，返回响应
- 关闭TCP连接（4次挥手）
- 浏览器渲染
DNS域名解析
DNS（Domain Name Server，域名服务器）是进行域名(domain name)和与之相对应的IP地址 (IP address)转换的服务器。通过域名，获取该域名对应的主机Ip的过程就叫域名解析
DNS有三级，根DNS服务器、顶级域DNS服务器，权威DNS服务器
- 根DNS服务器：返回顶级域 DNS 服务器的 IP 地址
- 顶级域 DNS 服务器： 返回权威DNS服务器IP地址
- 权威DNS服务器： 返回响应的主机IP
但是从网络上有分两种：本地DNS服务器和线上DNS服务器。本地DNS服务器优先。输入URL之后，顺序如下
客户端-->浏览器缓存-->本地hosts文件-->本地DNS解析器缓存-->本地DNS服务器
如果本地没有查找到，那么通过本地DNS转发器进行递归查询。
DNS转发器就相当于代理ip一样是种递归查询。就是本地dns不能解析了,请求外部的去解析,而第一个也不能解析(便成了转发器),再请求其他dns解析,其他dns把结果发个转发器,转发器在发给本地dns
TCP连接
基本就是三次握手。具体内容，我就不介绍了。可以查看顶部的原文地址
http请求，服务器返回响应
http的报文结构，请求头、请求提、响应头、响应体。这里涉及到http缓存CORS。具体可以这查看http缓存和CORS
关闭TCP连接
基本就是4次挥手。具体内容，我就不介绍了。可以查看顶部的原文地址
浏览器的渲染
- 构建DOM Tree
- 样式计算 CSSOM Tree
- RenderObject Tree也成Render Tree（DOM Tree+CSSOM Tree）
- LayOut（布局）
- RenderLayer tree（生成图层树）
- Rendering（渲染方式）
- 绘制
- 合成
构建DOM Tree
- 转码（Bytes -> Characters）—— 读取接收到的 HTML 二进制数据，按指定编码格式将字节转换为
HTML 字符串 - Tokens 化（Characters -> Tokens）浏览器将字符串转换成W3C HTML5 标准规定的各种 token，例如、，以及其他尖括号内的字符串。每个 token 都具有一定特殊含义和规则。
生成标签 - 构建 Nodes（Tokens -> Nodes）—— 每个 Node 都添加特定的属性（或属性访问器），通过指针能够确定 Node 的父、子、兄弟关系和所属 treeScope（例如：iframe 的 treeScope 与外层页面的 treeScope 不同）。
生成节点 - 构建 DOM 树（Nodes -> DOM Tree）—— 最重要的工作是建立起每个结点的父子兄弟关系
生成DOM Tree
样式计算 CSSOM Tree
渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式
RenderObject Tree也成Render Tree（DOM Tree+CSSOM Tree）
布局过程，即排除 script、meta 等功能化、非视觉节点，排除 display: none 的节点，计算元素的位置信息，确定元素的位置，构建一棵只包含可见元素布局树
LayOut（布局）
布局计算是一个递归的过程，这是因为一个节点的大小通常需要先计算它的孩子节点的位置、大小等信息。为了计算节点在页面中的确切大小和位置，浏览器会从 RenderObject tree 的根节点开始进行遍历。
RenderLayer tree（图层树）
渲染引擎不会直接食用Render Tree进行绘制，为了处理position、clipping、transform等，浏览器会对特定的render Tree生成对应的RenderLayer Tree。以下条件会产生RenderLayer Tree
- 根节点
- 非static的postion，transform
- 透明节点
- 有 overflow，alpha 和 reflection 的样式
- 有 filter样式
- canvas 元素
- video 元素
Rendering（渲染方式）
渲染有绘制和合成两个阶段
