谈谈从URL到页面呈现,客户端都做了些什么(简谈)

170 阅读3分钟

整体流程

  1. DNS域名解析(ip地址)
  2. 建立TCP连接 (三次握手)
  3. 发送HTTP请求 (请求数据)
  4. 接收响应数据并加载解析 (生成DOM CSSOM)
  5. 生成渲染树 浏览器渲染到页面 (生成 redering Tree 自动重排页面)
  6. 断开连接(四次挥手)

DNS域名解析

第一步是找到域名对应的IP地址,首先浏览器会根据URL地址 首先查找本地 浏览器缓存->本地dns缓存->本地hosts文件映射
如果还没找到 则向本地配置的首选DNS服务器发送域名解析请求 域名服务器进行迭代查询,按根域服务器 ->顶级域,.cn->第二层域,hb.cn ->子域 www.hb.cn 的顺序找到IP地址

解析图

image.png

建立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连接 四次挥手