在浏览器地址栏输入URL到渲染页面完成的流程

1. 浏览器发送http请求

无缓存的情况!待优化…

  1. 对URL进行解析,确定目标Web服务器的域名和文件名,根据这些信息生成http请求
  2. (2、3、4、5步为DNS解析)请求目标服务器需要ip,因为域名为了方便记忆的,IP地址才是访问服务器在网络中的“门牌号”,除此之外域名长度长且不确定。调用Socket库的解析器生成查询消息(域名、Class、记录类型)
  3. 委托协议栈进行发送查询消息的操作,通过网卡发送给DNS服务器(寻找对应的DNS服务器)
  4. DNS服务器接收查询消息,返回域名对应的响应数据
  5. 响应数据经过协议栈传递给解析器,解析器取出ip地址写入浏览器指定的内存地址中
  6. 浏览器从内存中获得目标服务器的ip地址,这下终于真的要发http请求了!
  7. 委托操作系统的协议栈向目标服务器的ip地址发送http请求(digital data) ,向操作系统内部的协议栈发出委托时, 需要按照指定的顺序来调用 Socket 库中的程序组件。
    1. 创建套解字(协议栈创建内存空间、在内存中存入初始控制信息、将描述符告诉浏览器)
    2. 连接阶段(浏览器调用Socket库的connect、三次握手)
      1. 客户端需要计算出从客户端到服务器方向通信相关的序号初始值SYN,并将这个值发送给服务器。
      2. 服务器会通过这个初始值,计算出 ACK 号并返回给客户端; 同时, 服务器也需要计算出与从服务器到客户端方向通信相关的序号初始值SYN, 并将这个值发送给客户端。
      3. 客户端也需要根据服务器发来的初始值计算出 ACK 号并返回给服务器。
        为什么需要三次握手
    3. 收发阶段
      1. 发的时候会有两个判断要素(MSS\时间)、对较大数据进行拆分,发送序号和数据。
      2. 返回ACK确认网络包是否收到( TCP 具备确认对方是否成功收到网络包, 以及当对方没收到时进行重发的功能)。

2. 浏览器接收响应信息

浏览器获取响应消息(read)

3. 断开连接

close、四次挥手

  1. 浏览器向服务端发送FIN,表示不再发送数据了,但还能接收数据。
  2. 服务端收到,但可能还有未处理完的数据,于是它先发送给浏览器ACK表示“知道你不会再发了”。
  3. 服务端处理完所有数据,向浏览器发送数据和FIN。
  4. 浏览器接收到FIN会发送ACK报文进行中断的确认,服务端接收到后释放连接。

4. 浏览器渲染页面

  1. 浏览器渲染引擎解析HTML文档,构建DOM Tree
  2. 解析CSS,构建CSSOM Tree(css规则树)
  3. 将DOM Tree和CSSOM Tree合并,构建Render Tree(渲染树)
  4. 根据Render Tree进行节点信息计算(布局Layout),遇到<script>会暂停渲染,优先执行js,也就是阻塞文档的解析,将控制权交给JS引擎;回流发生的阶段
  5. 根据计算好的信息绘制整个页面(Painting),重绘发生的阶段

首屏优化:把script标签放在body标签底部或者添加defer/async属性

详解见另一篇笔记

猜你喜欢

转载自blog.csdn.net/kwroi/article/details/127977933
今日推荐