整体流程
- DNS域名解析(ip地址)
- 建立TCP连接 (三次握手)
- 发送HTTP请求 (请求数据)
- 接收响应数据并加载解析 (生成DOM CSSOM)
- 生成渲染树 浏览器渲染到页面 (生成 redering Tree 自动重排页面)
- 断开连接(四次挥手)
DNS域名解析
第一步是找到域名对应的IP地址,首先浏览器会根据URL地址 首先查找本地 浏览器缓存->本地dns缓存->本地hosts文件映射
如果还没找到 则向本地配置的首选DNS服务器
发送域名解析请求 域名服务器进行迭代查询,按根域服务器 ->顶级域,.cn->第二层域,hb.cn ->子域 www.hb.cn 的顺序找到IP地址
解析图
建立TCP连接
获取到域名ip地址,通过ip地址请求建立TCP连接
三次握手过程
第一次握手: 客户端发送请求报文,设置同部位SYN = 1,并随机一个数字n作为起始序号
第二次握手: 服务器接收到请求,同意握手信息,为TCP连接分配一块缓存,并返回响应报文,设置响应报文的同步为SYN = 1,确认位ACK = 1,确认报文ack为 请求报文的起始序号n+1 ,并且随机生成一个 起始序号K
第三次握手: 客户端接收到响应信息,再次发送报文 同部位SYN = 0 ACK = 1,确认报文段ack为 服务端返回的序号k+1 序号为自己产生的随机序号 n+1 (可以附带数据)
HTTP请求 及 响应
请求响应细节略....
加载html并进行解析
自上而下加载并解析Html文档,解析的过程会将文档构建成一颗DOM树
加载过程
遇到图片、视频等资源,浏览器会发送异步请求进行资源下载
遇到JS文件 挂起html页面的加载和解析 知道js加载并执行完成(js和html加载解析在同一条线程上)
遇到css文件 css加载不会影响DOM的加载解析 同时CSS文件会解析成一颗 CSSOM规则树
生成渲染树
结合 DOM树 以及 CSSOM规则树 构建一颗Rendering Tree(渲染树)
渲染树的每一个节点是一个渲染对象
渲染对象:
包含了各种样式、大小、位置等属性的矩形 (注:DOM树中的不可见元素不会构建到渲染树 例:display:none)
在渲染树构建完成后,页面则会根据渲染对象的位置大小,进行布局以及页面的重新排列(重排/回流)
布局结束,遍历渲染树调用渲染对象的paint方法绘制所有的渲染节点到页面上(重绘)
这个时候页面的渲染基本结束
断开连接(四次挥手)
这里只是对url到页面渲染 简单做了一下总结
还有很多地方之后会慢慢写博客分析
1、三次握手的作用以及为什么必须进行三次握手
2、http请求的过程
3、DOM树、CSSOM规则树以及Rendering Tree渲染树
4、DOM以及CSSOM解析渲染以及加载JS文件时 浏览器做了哪些优化,有没有什么方式优化JS加载阻塞DOM渲染?
5、回流(重排)、重绘 及怎么样去优化
6、断开tcp连接 四次挥手