地址栏输入url回车后发生了啥?

274 阅读2分钟

简单分析

输入url到回车后发生了以下行为:

  • url 解析
  • DNS 查询
  • TCP 连接
  • HTTP 请求
  • 响应请求
  • 页面渲染

详细分析

url 解析

首先判断url是一个合法的URL还是一个待搜索的关键词,并且根据你输入的内容进行对应的操作,进行DNS查询 最终获取到对应的目标服务器IP地址

TCP连接

在确定目标ip之后,则会经历三次握手建立TCP连接

发送HTTP请求

当建立TCP连接后,就在这基础上进行通信,浏览器发送HTTP请求到目标服务器 请求的内容包括:

  • 请求行
  • 请求头
  • 请求体

响应请求

当服务器收到浏览器的请求之后,就会做出相应的反应,返回一个HTTP响应消息,包括: - 状态行 - 响应头 - 响应正文 在服务器响应之后,由于现在的http默认开始长链接keep-alive,当页面关闭后,TCP连接就会经过四次挥手完成断开连接。

页面渲染

当浏览器收到服务器的响应资源以后,首先对资源进行解析

  • 查看响应头的信息,根据不同的指示做出对应的处理,比如:重定向,存储cookie,解压zip,缓存资源等等

  • 查看响应头的Content-type的值,根据不同的资源类型采用不同的解析方式

页面渲染主要有以下几个过程

  • 解析HTML,构建DOM树

  • 解析CSS,生成CSS规则树

  • 合并DOM树和CSS规则树,生成Render树

  • 布局render树(layout/reflow),负责各元素尺寸、位置的计算

  • 绘制render树,绘制页面像素信息

  • 浏览器会将各层信息发给GPU,GPU会将各层合成,显示在屏幕上