zhangsanshi / issue-blog

It's a blog rather than issue
0 stars 0 forks source link

输入网页发生了什么 #47

Open zhangsanshi opened 7 years ago

zhangsanshi commented 7 years ago

输入一个 URL 后,返回一个内容的过程中发生了什么?

访问一个从未访问过的网站

  1. 首先要得到具体的 IP 和端口。网站可以通过 IP 访问,也通过域名访问。域名访问就需要域名解析成具体的 IP了。

    这里有几个问题:

    1. 为什么网站不通过 IP 直接访问,而是用域名代替 ? 一点是域名很好记忆,另一点, HTTP的默认端口是80,如果在一个 IP 上绑定了多个网站,那必然其他网站无法绑定在 80 端口上,就需要在 IP 后面带上端口号。 域名在这时候就发挥作用了,服务器会监听 80 端口,会读取请求头部的 host(值为域名),如果满足匹配规则,则会把请求转发到相应的服务上,服务不需要在 80 端口上工作。 同时,在域名解析的过程中,可以把域名指向多个 IP,访问的时候返回距离用户最近,响应最快的那个。利用这个可以实现CDN、负载均衡等等。

    2. 域名解析 IP 的过程?DNS

      1. 浏览器缓存
      2. 操作系统缓存
      3. 路由器缓存
      4. 服务提供商查询
      5. 递归查询 每一步都需要花费时间,所以页面中含有过多域名不是太好,同时页面可以设置 dns-prefetch 去处理这种情况
  2. 得到具体的 IP 和 端口,开始发送请求。 这里客户端开始向服务端建立 TCP 连接,发送请求。

    这里有几个问题:

    1. HTTP
      默认端口是 80,和 TCP 的连接会经历 3 次握手,四次挥手。
    2. HTTPS
      默认端口是 443,和 TCP 的连接会经历 4 次握手,多出来一步 ssl 过程。发送请求时会验证证书。证书是由一个组织颁发的,所谓的安全证书就是这个组织是受到大家信任的,或者是用户手动信任的。而且服务器证书如果被窃取,中间人就可以窃听通信内容。
    3. HTTP1.1
      HTTP1.1 默认长连接,HTTP1.0是短链接,即握手后发送数据完成后,客户端和服务器就断开了。但是握手和断开本身是消耗资源的,如果客户端和服务器端能保存这个连接,下次就可以节省一些时间。`Connection:keep-alive` 为开启长连接
    4. HTTP/2
      HTTP/2 的多路复用特性,使得可以在一个连接上同时打开多个流,双向传输数据。头压缩,Server Push
  3. 服务器端获得请求 服务器根据 host 找到具体的服务提供者,把请求交由给它进行处理,等待请求处理完成,返回资源。

  4. 客户端接收资源 如果服务端头部设置了 Transfer-Encoding: chunked,则内容是一部分一部分返回的。但是同样浏览器可以解析。 返回整个资源。然后轮到浏览器去解析该资源了!!!

  5. 浏览器解析 页面中会含有静态资源,浏览器遇到这些资源会进行下载,这些静态资源,同域名下最多可以建立的连接,不同的浏览器是有不同的限制的,就意味着同一时刻发出的请求是一定的,就会造成阻塞,所以就会有把不同的资源放到不同的域名下,同时对资源的加载顺序进行排序,最重要的会放在最前面。 这里需要注意一点,浏览器可以同时下载 N 个资源,但是按顺序执行,即使还在执行 A.js,但浏览器可能已经完成下载 Z.js 。

再次访问的网站

  1. 网页本身设置了缓存,这时候浏览器就会先去查看缓存的设置。如果是强缓存,便不会向服务器验证,如果是弱缓存,会向服务器发起验证,如果没有修改,则会返回304,有修改返回200和请求体
  2. 静态资源同1
  3. 发送的请求会带有 cookie

参考

http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/ http://blog.csdn.net/cywosp/article/details/38014581 http://blog.csdn.net/cywosp/article/details/38026809 http://blog.csdn.net/cywosp/article/details/38017027 https://www.zhihu.com/question/50646354/answer/122035678 https://imququ.com/post/optimize-tls-handshake.html https://zh.wikipedia.org/zh-hans/%E5%88%86%E5%9D%97%E4%BC%A0%E8%BE%93%E7%BC%96%E7%A0%81 https://www.zhihu.com/question/20474326