从输入一个URL到浏览器页面展示都经历了些什么

前言

在日常的浏览器访问过程中,我们肯定会访问很多的页面,但是我们输入一个网址后是如何变成一个页面展示在我们面前、从一个URL到页面的展示过程中,我们的浏览器都经历了些什么?

一、输入网址(或点击一个网页链接)

每当浏览一个网页,我们都可以在浏览器中看到一个URL,俗称网址;

二、缓存解析

浏览器获取该网址,首先不会立刻去HTTP请求;浏览器首先会在缓存中查找相关资源,从浏览器缓存--系统缓存--路由缓存当中查看,如果有相关资源则从缓存当中显示页面,如果没有则进行第三步;

缓存就是把你之前访问的web资源,比如js文件,css文件,图片等资源保存在你本机的内存或者磁盘当中,例如用Chrome做个试验:

(1)在Chrome浏览器中输入网址:chrome://chrome-urls/ ;

该地址是一个可以看到所有的Chrome支持的伪URL,找到其中的chrome://appcache-internals/;可以看到Chrome的本地缓存地址:

(2)在Chrome中访问https://www.baidu.com/,打开开发者模式(按F12),不勾选Diable cache

圈出来的部分显示了资源的来源:from disk cache:将资源缓存到磁盘中,等待下次访问时直接在磁盘读取,无需下载资源;

from memory cache:将资源缓存到内存中,等待下次访问时直接在内存中读取,无需下载资源;

我们再看看Time列:从内存中读取的资源时间为0ms,其实这些资源是存在浏览器内存中,是可以直接加载的;而从disk中读取是需要消耗读取的时间的。

这两种方式是不需要发送HTTP请求的。

三、域名解析

在上图,我们还是可以发现有些资源不是从本地获取的,显示了一个大小;这些资源都是发送浏览器HTTP请求从服务器获得的。那么在发送HTTP请求时,浏览器都做了些什么?

在发送HTTP请求之前,需要进行DNS解析,即域名解析。域名只是为了方便人类进行辨别记忆,电脑连接实际上还是需要IP的。

DNS解析:域名到IP地址的转换过程。域名解析的工作与DNS服务器完成。解析后可获取域名相应的IP地址。这里有域名解析的详细介绍:https://blog.csdn.net/m0_37812513/article/details/78775629

四、TCP连接,俗称三次握手

在域名解析之后,浏览器向服务器发起了HTTP请求,TCP连接,三次握手建立TCP连接。TCP协议是面向连接的,所以在传输数据前必须建立连接

TCP连接的建立

设主机B运行一个服务器进程,它先发出一个被动打开命令,告诉它的TCP要准备接收客户进程的连续请求,然后服务进程就处于监听的状态。不断检测是否有客户进程发起连续请求,如有,作出响应。设客户进程运行在主机A中,他先向自己的TCP发出主动打开的命令,表明要向某个IP地址的某个端口建立运输连接,过程如下:

1)主机A的TCP向主机B的TCP发出连接请求报文段,其首部中的同步比特SYN应置1,同时选择一个序号x,表明在后面传送数据时的第一个数据字节的序号是x。

2)主机B的TCP收到连接请求报文段后,如同意,则发挥确认。在确认报文段中应将SYN置为1,确认号应为x+1,同时也为自己选择一个序号y

3)主机A的TCP收到此报文段后,还要向B给出确认,其确认号为y+1

4)主机A的TCP通知上层应用进程,连接已经建立,当主机B的TCP收到主机A的确认后,也通知上层应用进程,连接建立。

详细的TCP连接分析,请参考:https://www.cnblogs.com/newwy/p/3234536.html

五、服务器请求

服务器收到浏览器发送的请求信息,返回一个响应头和一个响应体。

六、页面渲染

浏览器收到服务器发送的响应头和响应体,响应体重包含了网页展示所需的资源,就是在第二步我们所看到的资源,然后进行客户端的渲染;解析html文件,生成Dom树,解析css文件,生成css树,加载图片相关资源,加载js脚本文件与用户进行交互。

至此,整个页面就千里迢迢的来到你的面前了

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180719A10NKU00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券

,,