URL到整个页面加载完毕显示在屏幕上的整个流程

  1. 输入地址
  2. 浏览器查找域名的IP地址
  3. 浏览器向web服务器发送一个http请求
  4. 服务器的永久重定向响应
  5. 浏览器跟踪重定向地址
  6. 服务器处理请求
  7. 服务器返回一个Http响应
  8. 浏览器显示HTML
  9. 浏览器发送请求获取嵌入在HTML中的资源(图片、音频、视频、css、js等)

1.输入地址

当我们输入网站地址的时候,浏览器就开始智能匹配的url,他会从我们的历史记录,书签等地方去查询我们可能会输入的url,然后显示出来

2.浏览器查找域名的IP地址

  1. 请求一旦发起,浏览器首先解析这个域名,一般先查看本地的hosts文件,如果有和查找域名相对应,就直接返回hosts文件里的ip地址
  2. 如果没有在hosts文件里面找到对应的ip地址,浏览器就发请求本地的DNS服务器(本地的DNS服务器一般是网络接入服务器供应商提供,比如中国电信和中国移动)
  3. DNS请求到达本地DNS服务器后,本地DNS服务器先递归查询自己的缓存,如果缓存里有该记录,则直接返回结果。如果没有,需要向DNS根服务器查询
  4. 根DNS服务器并没有记录具体的域名和IP地址对应关系,而是告诉本地DNS服务器去哪个域服务器查询,返回该域服务器的地址。这是一个迭代过程
  5. 本地DNS服务器继续向域服务器发送请求,域服务器收到请求后也不是返回域名和ip地址对应关系,而是返回域名的解析服务器的地址给本地DNS服务器
  6. 最后,本地DNS服务器向域名的解析服务器发出请求,这时就可以收到一个域名和IP地址对应关系,本地DNS不仅要把IP地址返回给电脑,还要将这个对应关系保存在缓存中,以便下次用户查询可以加快网络访问

3.浏览器向Web服务器发送一个HTTP请求

拿到域名对应的IP地址后,浏览器会向服务器发起TCP连接请求,建立TCP/IP连接,这个过程涉及到三次握手

4.服务器的永久重定向

服务器会给浏览器响应一个301永久重定向的响应,这样浏览器就会访问“http://www.baidu.com/” 而非“http://baidu.com/”。

涉及到引擎排名,一个页面有两个地址,搜索引擎会认为有两个网站,造成搜索链接减少从而降低排名,重定向可以把两个地址归到同一个网站排名下

拓展:

  1. 301,302都代表重定向,301代表旧地址已经被永久的移除了(旧地址上的资源不可再访问),30代表临时重定向(旧地址资源还是可以访问的)

  2. 重定向原因

    1. 网站结构调整
    2. 网页被移到新地址
    3. 网页拓展名改变
  3. 什么时候进行301或302跳转

    如果只是临时移动到一个新位置可以使用302,如果是永久性重定向就要使用301

    301跳转场景

    • 域名到期不想续费,想换个域名
    • 在搜索引擎的搜索结果中出现了不带www的域名,而带www的域名却没有收录,这个时候可以用301重定向来告诉搜索引擎我们目标的域名是哪一个。

5.浏览器跟踪重定向地址

浏览器对正确的地址发起http请求

6.服务器处理请求

后端从在固定的端口接收到TCP报文开始,它会对TCP连接进行处理,对HTTP协议进行解析,并按照报文格式进一步封装成HTTP Request对象,供上层使用。

当有多个服务器的时候可以使用Nginx,先请求到Nginx,Nginx再请求应用服务器,然后将结果返回给客户端,这里Nginx的作用是反向代理服务器。同时也带来了一个好处,其中一台服务器万一挂了,只要还有其他服务器正常运行,就不会影响用户使用。

7.返回一个HTTP响应

响应主要有三部分组成,响应行响应头响应正文

响应行返回,协议版本状态描述状态代码

具体一些状态码

8.浏览器显示HTML

浏览器在还没有完全接受全部HTML文档时,就开始渲染页面

webkit渲染过程

解析html构建dom树 —> 构建render树 —>布局render树 —> 绘制render树

浏览器首先会解析HTML文件和构建DOM树,然后解析CSS生成render树,渲染完后开始布局渲染树并绘制到屏幕上,涉及到重排重绘

性能优化:细说浏览器渲染的重排与重绘

9.浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSS、JS等等)

在显示HTML时,往往需要获取其他地址内容标签,这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名,发送请求,重定向等等…

参考文献

https://www.cnblogs.com/xianyulaodi/p/6547807.html#_label3