描述流程的过程中会穿插着写一些之前没有注意的点,例如:HTTPS,SSL/TLS握手,GET,POST区别等
首先大体可以分为6个步骤:

  1. DNS解析服务器
  2. 三次握手建立TCP连接
  3. 客户端发送HTTP请求
  4. 服务器接受并返回HTTP响应报文
  5. 浏览器渲染生成页面
  6. 连接结束

DNS

在地址栏输入网址后,首先会现在本地DNS服务器中查看是否有相关域名和ip地址的映射,若没有则向根域名服务器询问,还没有则继续向顶级域名服务器(com,org,net这些)询问,以此类推,直至找到对应服务器ip地址。会把这个映射存入缓存。DNS缓存由近及远可以分别分为,浏览器缓存,系统缓存,路由器缓存,ips服务器缓存,根域名服务器,顶级域名服务器,主域名服务器缓存

建立三次握手连接

这个在之前的文章中已经详细写过,不再啰嗦

发送HTTP请求

HTTP属于应用层的协议,需要借助TCP连接来进行传输。在生成HTTP报文后,会被分成合适的大小并标好序号。在已经建立好的TCP连接中传输。但是HTTP属于明文,在传输过程中有可能泄露,有风险。这时就引入了HTTPS,他本质是在HTTP和TCP之间加了一层SSL。HTTP请求报文分为请求行(格式为:请求方式 请求连接 http版本),请求报头(里面包含了像user-agent:产生请求的浏览器的类型,accpet:表示浏览器可以接受的类型信息,accept-encoding,accept-language,cookie,host:客户端地址等)和请求主体(post请求的正文会以key-value的形式存储在请求体中)

HTTPS

在HTTPS传输数据前,客户端会先于服务器进行SSL/TLS握手。

SSL握手步骤

  1. 客户端会先向服务器发送自己的SSL版本号及所支持的加密算法,同时发送一串随机序列
  2. 服务器接收后,确认双方使用的加密算法,也生成一串随机序列号,并将自己的数字证书发送给客户端,
  3. 客户端接收到后,(利用证书中心给出的公钥对数字证书解密)确认数字证书为真后,从中取得服务器提供的公钥,再次随机生成一个序列号后,经服务器提供的公钥加密后发给服务器
  4. 服务器接收后,利用自身的私钥解密后,得到该随机数
  5. 双方根据前三次产生的随机数,利用先前约定好的加密算法,生成对话密钥,这之后的数据传输都是采用基于该密钥的对称加密算法。

HTTP请求中GET和POST的区别

最直观的区别:

  1. 日常开发使用时,get请求参数一般跟在地址后面和标签的href中,post一般通过表单提交。
  2. get请求的url参数会被存在浏览器历史记录中,post不会。
  3. get浏览器会主动cache,post不会
  4. get通常只需要发送一次请求,post会发送两次(第一次服务器响应100continue,第二次响应200 ok)。不是绝对的,firefox就只发一次
  5. get参数在url后,post方在请求主体(reuest body)中
  6. get不安全(容易被看到)
  7. get会有长度限制(地址栏会有限制),post不会
  8. get只支持ASCII编码,post无限制

服务器接受并处理HTTP请求并返回响应的HTTP相应报文。

服务器端从固定的端口中接受TCP报文,这一部分对应于编程语言中的socket。正确接收到客户端发来的TCP数据块后,按照序号拼接好后还原成的HTTP,再按照HTTP请求报文的格式进一步封装成HTTPRequest对象。 经过后端程序的处理后生成HTTPResponse对象解析成HTTP的响应报文后返回给客户端。后续传输过程与来时一样

HTTP响应报文

由状态码,响应报头(Connection,server等),响应主体(html,css,js,图片等)

  • 状态行包含的内容:
    1xx :信息,服务器收到请求,需要请求者继续执行操作
    2xx :成功,操作被成功接收并处理
    3xx :重定向,需要进一步的操作以完成请求
    4xx :客户端错误,请求包含语法错误或无法完成请求
    5xx :服务器错误,服务器在处理请求的过程中发生了错误
    常用的状态码:
    100:客户端应该继续传送代码,服务器已收到一部分等待下一部分
    200:表示正常状态,指服务器成功处理了请求
    301 永久重定向,请求的资源已被永久的移动到新URL,返回信息会包括新的URL,浏览器会自动定向到新URL。今后任何新的请求都应使用新的URI代替。
    302 临时重定向,但资源只是临时被移动。表示请求的资源被分配了新的URL,希望本次访问使用新的URL。
    400 错误的请求
    401 未授权
    403 请求被禁止
    404 请求的网页不存在
    500 服务器内部错误无法响应
    502 作为网关或代理服务器,未能从远程服务器收到有效响应
    504 作为网关或代理服务器,又能及时从上游服务器收到有效请求
    505 服务器不支持请求中所用的HTTP版本

由浏览器渲染生成网页

在客户端接收到这些HTML,CSS,JS数据后,浏览器会解析HTML生成一颗DOM树,解析CSS生成一可渲染树。这里有两个概念,reflow(回流)和repaint(重绘),DOM树上的结构都是盒型模型,浏览器会先确定他在页面上的位置大小等属性,这称为回流,然后这些属性都确认好后,浏览器就进行绘制,称之为重绘。第一次加载时都会经过reflow和repaint这两个流程,但同时这两个步骤也是十分耗费性能的,要尽量减少。
对于JS,浏览器通过JS引擎进行解析,JS的执行机制可以分为主线程和任务对列。分别存放同步和异步的任务。当主线程加载过程中遇到需要任务队列中的事件,便会到任务队列中取

Q.E.D.