从URL到页面加载

发表于 | 分类于

从URL到页面加载

我们都知道输入一个网址之后可以进入相应的网站，那我们知道输入的这个东西到底是什么嘛，还有这东西为什么输入之后就可以到达我们想去的网站。看了这篇博文之后如果再不懂的话。。。。。。再看一遍就懂了，嘿嘿嘿

概述

总体上来说分为以下几个过程：

  1. DNS解析
  2. TCP连接
  3. 发送HTTP请求
  4. 服务器处理请求并返回返回HTTP报文
  5. 浏览器解析渲染页面
  6. 连接结束

具体过程

DNS解析

DNS解析的过程就是寻找哪台机器上有需要的资源的过程。我们在浏览器输入的的地址，并不是网站真正意义上的地址。我们都知道每一台电脑都有它对应的唯一一个IP地址，但是如果去寻找其他电脑时候每次都使用IP地址去访问，会给我们带来极大的不方便。所以就需要一个翻译者，而DNS就充当了这个角色，实现了从网址到IP address的转换。

DNS主要是通过UDP通信，报文结构主要分为头部Header、查询部分Question、应答部分Answer/Authority/Addition。

解析过程

简单来说解析过程是一个不断进入递归的过程。

  1. 先看浏览器缓存中是否存在对应域名的IP，未找到进入下一步
  2. 查看本机系统是否缓存有域名对应的IP，未找到进入下一步
  3. 向本地域名解析服务器(Local DNS)发起域名解析请求，未找到进入下一步
  4. 本地域名解析服务器向根域名解析服务器（Root DNS）发起域名解析请求，返回所查询的顶级作用域（gTLD）地址
  5. 本地域名解析服务器向*gTLD域名解析服务器 *发起请求，并根据需要解析的域名，找到对应的域名服务器。
  6. Name server服务器返回IP地址给本地服务器
  7. 本地域名服务器缓存解析结果
  8. 返回结果给主机

img

我们可以看出网址解析的过程是一个从右向左的过程：com -> google.com ->www.google.com。但是根域名解析的结果怎么没有体现呢，默认情况下所有网址的最后一位都是.，所以通常就会省略，在浏览器请求DNS的时候会自动加上，所有网址的真正解析过程是.->.com.->google.com.->www.google.com.

DNS缓存

DNS存在着多级缓存，按照离浏览器的距离排序的话，有以下几种：浏览器缓存、系统缓存，路由器缓存、IPS服务器缓存、根域名缓存、顶级域名服务器缓存、主域名服务器缓存。

这些缓存存在的意义，就是为了提高域名查询效率，在访问过某个网站之后，会将其域名和IP缓存下来，下次访问的时候就不需要在请求域名服务器获取IP

浏览器DNS缓存：浏览器缓存的时间和返回的有效时间（TTL）无关，浏览器获取网站域名的实际IP地址后会进行缓存，减少网络请求的损耗。

OS缓存：OS缓存会参考DNS服务器响应的TTL值，但是不完全等于TTL值。

Windows系统默认开启DNS缓存服务，叫做DNSClient，可以缓存一些常用的域名。

TCP连接

HTTP协议是使用TCP作为其传输层协议的，所以当TCP出现瓶颈时HTTP也会受到影响。

有关于TCP连接可以查看我的另一篇博文：TCP和UDP详解

HTTP请求

HTTP请求一般发生在客户端，这个东西我们前端人可能比较熟悉一些嘻嘻嘻。

发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口（HTTP协议：8080；HTTPS协议：443）。

http请求报文是由三部分组成：请求行、请求报头和请求正文。

//这是一个HTTP请求的例子

GET/sample.jspHTTP/1.1
Accept:image/gif.image/jpeg,*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
Accept-Encoding:gzip,deflate

username=jinqiao&password=1234
  • 请求的第一行是“ 方法URL协议/版本”，如GET/sample.jsp HTTP/1.1
    • GET表示请求方式，sample.jsp表示资源的URL，HTTP/1.1表示协议以及版本
  • 请求头中包含着许多有关的客户端环境和请求正文的有用信息，如浏览器的语言风格，以及请求正文的长度等等
  • 请求正文，在请求头和请求正文之间有一空行，这代表着请求头的结束以及请求正文的开始。
    • 请求正文中包含着客户端向服务端提交的查询字符串的信息

服务器处理请求

我们在和后端交互的时候总会收到后端小伙伴发来的数据，我们现在来看看这些数据到底是什么意思。

HTTP响应报文

HTTP报文就是我们俗称给我们返回的数据，它是由状态码，响应报头和响应报文组成的。

状态码：

  • 1XX：指示信息-表示请求已接收，继续处理
  • 2XX：成功-表示请求已被成功接收、理解、接受
  • 3XX：重定向-要完成请求必须进行更进一步的操作
  • 4XX：客户端错误-请求有语法错误或者是请求无法实现
  • 5XX：服务端错误-服务端未能实现合法的请求
  //我们平常较为常用的状态码：

//2XX：
200：请求已被正常处理 
204 No Content： 请求已经被成功处理，但是在返回的响应报文里不含有实体的主体部分
206 Partial Contenet：客户端进行了范围请求，而服务器成功执行了这部分的GET请求，响应报文中包含有Content-Range指定范围的实体内

//3XX:浏览器需要更多的操作来正确处理请求
301 Moved Permanently: 永久重定向
302 Found:临时重定向
303 See Oth：请求的资源存在另一个URL，应使用GET方式定向获取请求的资源

//4XX:
400 Bad Request:请求报文中有语法错误
401 Unauthorization:发送的请求需要通过HTTP认证，如果之前发过一次认证，则表示用户认证失败
403 Forbidden:对请求资源的访问被服务器拒绝了，原因可能是未获得文件系统的访问权限，或者是访问全选出现某些问题，或者是向未授权的发送源IP地址视图访问等。
404 Not Found:表示服务器上无法找到请求的资源

//5XX:
500 Internal Server Error：服务端在执行请求时发生了错误
503 Service Unavailable：该状态表示服务器正处在超负载或是正在停机维护

响应报头

常见的响应报头字段有：Server,Connection

常见的请求报头有: Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent等。

响应报文

服务器返回浏览器的文本信息，通常HTML，CSS，JS图片等文件就放在这里。

浏览器渲染页面

解析HTML，CSS，JS，浏览器是如何把页面呈现在屏幕上的？详情请看这篇博文

连接结束

TCP4次挥手，结束连接

好了就这些，这样说完了你能懂一丢丢吧，嘻嘻下班。