初始准备（服务器端）
- 服务器启动监听服务，准备迎接来自客户机的请求。（即准备好Http服务，例如 nginx等）
- 向操作系统申请一个 TCP 连接，绑定在指定端口号
- 开始监听。随时准备响应请求
根据地址栏的URL得到 IP 地址
- 把URL 分割成几个部分：协议，网络地址，资源路径
协议：从该计算机获取资源的方式，常见的有 HTTP、HTTPS、FTP等（协议不同，主要是通讯内容格式的不同）
网络地址：可以是域名也可以是IP地址。包括端口号（端口号不常见的原因，是因为大部分网站都是使用默认端口号，所以在URL隐藏了，HTTP 默认端口号 80，HTTPS 默认端口号 443
资源路径：主要功能就是指示从服务器上获取哪项协议（同时引发的常见问题就是跨域）
- DNS 解析域名（即根据域名查找IP)
本机浏览器缓存 --> 本机操作系统缓存 --> 本地域名系统 --> 根域名服务器 --> 返回顶级域名服务器 --> 返回权限域名服务器 --> 返回查询到的主机IP
获取IP地址后建立TCP连接
- 向确定的IP和端口号，构造一个 http 请求，例如 GET 和 POST
- 浏览器发起一条 tcp 连接
- 握手成功后，浏览器向服务器发起 http 请求
- 服务器接受并处理HTTP报文
- 服务器构造然后发送响应报文
浏览器开始解析并渲染页面
- 浏览器判断状态码
1xx: 指示信息，表示请求已经接收，继续处理
2xx: 成功，表示请求已经被成功接收，进入渲染流程
3xx: 重定向，要完成请求必须要进行更近一步的操作，即要去相应头里找location域，根据这个 location 的指引，进行跳转，这里跳转需要开启一个跳转计数器，是为了避两个或者多个页面之间形成的循环的跳转，当跳转次数过之后，浏览器会报错，同时停止。
4xx: 客户端错误，请求有语法错误或者请求无法实现
5xx: 服务器端错误，服务器未能实现合法的请求
- 当得到一个正确的 200 响应之后，进行语言的编码解析
- 解析 html 构建 DOM (文档对象模型，Document Object Model) 树
- 根据 CSS 生成 CSSOM (Css对象模型，CSS Object Model)
CSSOM 是一组允许用JavaScript操纵CSS的API。 它是继DOM和HTML API之后，又一个操纵CSS的接口，从而能够动态地读取和修改CSS样式。 - 构造 render 树
将 DOM 和 CSSOM 整合形成 RenderTree（渲染树）。结构和 DOM 树一样，是树形结构，但每个节点中的样式（位置、长、宽、高、颜色、背景图片布局等）被标识出来。render 树一旦构建完成，整个页面也就准备好了。 - 布局 render 树
- 绘制 render 树
如果有 JS 代码，会执行 JS 代码，然后阻塞渲染，因为JS有权利改变DOM结构并执行阻塞渲染。会引起重绘问题。
网友评论