页面从输入URL到渲染都发生了什么

404 阅读2分钟

URL是什么?

scheme://host.domain:prot/path/filename?

  • scheme:协议,常见有http、https、ftp、file
  • domain:域名,通过域名操作服务器IP
  • prot:端口号
  • path:路径
  • ?:后接查询参数等 总体分为以下几个过程:
  1. DNS解析(URL对应的IP)
  2. TCP链接(三次握手)
  3. 发送HTTP请求
  4. 服务器处理请求并返回HTTP报文
  5. 浏览器渲染页面(构建DOM树)
  6. 链接结束(关闭TCP链接,四次握手)
1.DNS域名解析

DNS(域名)解析,浏览器不能直接通过域名找到对应的服务器,而是要通过IP地址。从域名找到IP的过程就是DNS解析。

  • 浏览器首发搜索自身的DNS缓存

1.浏览器会将DNS解析的IP与域名缓存起来,减少网络请求的损耗 2.每个浏览器的缓存时间不一样,Chrome为60s、IE为30min、fireFox为60s

  • 若浏览器没有,则搜索操作系统中的DNS缓存
  • 若没有,则搜索操作系统中的hosts文件
  • 路由缓存:路由器也有DNS缓存
  • ISP的DNS服务器:ISP是互联网服务提供商(Internet Service Provider)的简称,ISP有专门的DNS服务器对应DNS查询请求
  • 根服务器:ISP的DNS服务器找不到的话,它就会向跟服务器发出请求,进行递归查询(DNS服务器先问根域名服务器.com域名服务器的IP地址,然后再问.baidu域名服务器,一次类推)
2.TCP连接(三次握手)
  • 第一次握手:客户端发送一个带SYN(同步)标志的数据包给服务端
  • 第二次握手:服务端发送带SYN/ACK(确认)标志的数据包给客户端,传达确认信息
  • 第三次握手:客户端发送带ACK标志的数据包给客户端,握手结束,连接成功
3.开始发送HTTP请求报文
  • 第一部分:请求行(请求资源地址)

请求方法、http协议/版本

  • 第二部分:请求头(Request headers)

Accept:text/plain;text/html

请求头把汗请求的附加信息,由关键字/值对组成,每行一对,关键字和值用英文冒号分割

  • 第三部分:请求体(Entity body)
4.服务器处理请求并返回HTTP报文

相应行、相应头、相应体

5.浏览器解析渲染页面
  • 根据HTML解析DOM数
  • 根据CSS解析生成CSS规则树
  • 结合DOM树和CSS规则树,生成渲染树
  • 根据渲染树计算每一个节点的信息(布局)
  • 根据计算好的信息绘制页面
6.断开连接(四次挥手)