从输入url到页面显示的全过程


URL解析:浏览器解析输入的URL,提取出协议、主机、端口、路径等信息。

DNS解析:浏览器使用主机名查询DNS服务器,获取对应的IP地址。

建立TCP连接:浏览器使用获取到的IP地址和端口号,与服务器建立TCP连接。这涉及到三次握手的过程。

发送HTTP请求:一旦TCP连接建立,浏览器向服务器发送HTTP请求。请求的内容包括请求方法、请求头和请求体。

服务器处理请求:服务器接收到浏览器发送的HTTP请求后,根据请求的路径和参数,处理请求并准备响应。

服务器返回响应:服务器根据请求的处理结果,生成相应的HTTP响应。响应的内容包括响应状态码、响应头和响应体。

接收响应:浏览器接收到服务器返回的HTTP响应。

渲染页面:浏览器开始解析接收到的响应内容,构建DOM树、CSSOM树和渲染树。然后进行布局和绘制,最终将页面呈现在屏幕上。

页面展示:页面渲染完成后,浏览器将页面展示给用户,用户可以看到页面内容并与页面进行交互。



1、首先,在输入的过程中,浏览器的UI线程会实时捕捉输入的内容,如果输入的不是网址或者协议不合法的话,那么搜索引擎会合成新的带搜索关键字的URL,准备进行搜索
同时也还会检查有没有出现非法字符,如果有的话就对非法字符进行转义
如果一切都没有问题,在回车之前,还会执行一次当前页面的 beforeunload 事件,该事件可以让开发者在页面退出之前执行一些数据清理工作,又或者在表单没有提交的情况下询问用于是否确认离开


2、输入url后,需要找到这个 url 域名的服务器端 ip 地址,为了寻找这个 ip ,浏览器会首先寻找本地缓存
---如果有缓存的话,并且没有过期,就不发送请求,直接拿来解码再开始渲染进程
检查缓存的过程是这样的:

  • 如果是https的话,有可能先找service worker,比如设置了请求拦截,离线缓存
  • 如果没有,再找浏览器的内存缓存
  • 如果还没有,再找硬盘缓存
  • 如果还没有,再找路由器缓存

---如果没有缓存或者缓存过期,就开始解析URL,URL包括 协议 域名 端口 路径


3、把解析 URL 出来的域名进行 DNS 解析,找到要请求的服务器的IP地址
DNS 解析 IP 的过程大概是:
先在客户端进行查询有没有解析的记录,也就是 DNS 缓存
如果 DNS 缓存中没有解析的记录,则查询 DNS 服务器得到 ip 地址


4、拿到ip地址后,就开始正式发起请求,先建立 TCP 连接

4.1、http三次握手

建立TCP连接需要进行三次握手,在http的三次握手的过程是这样的:

1)第一次握手:客户端向服务器发送一个SYN同步报文和一个客户端初始化随机序列号seq

2)第二次握手:服务器收到请求后,再向客户端发送自己的SYN同步报文和ACK确认报文,还有一个服务端的初始化随机序列号seq,以及一个确认号ack,来表示自己收到了

3)第三次握手:客户端收到服务器的确认应答后,再向服务器发送一个ACK确认报文,一个确认号ack,一个序列号,告诉服务器收到了


4.2、https

https也会同http一样进行三次握手,但是它还会进行一个加密协议的握手过程,这个加密协议的过程如下

1)服务器向客服端颁发数字证书,在证书里面包含有公钥(用于加密),服务器自己保留私钥(私钥用于解密)

2)当客户端收到这个证书后,就会解析这个证书,看里面的公钥是否有效,如果没有什么问题的话就会生成一个随机值

3)然后客户端会对这个随机值用公钥进行加密,然后发给服务器。这样做的目的就是为了让服务器得到这个随机值,以后客服端和服务端都可以用这个随机值进行加密解密

4)服务器收到这个随机值后,就用它自己的私钥对这个随机值进行解密。然后服务器再把要传输的信息和这个随机值通过算法混合在一起,然后发给客户端。这样的话,除非知道这个随机值,不然是无法知道服务器传输的信息的。

5)客户端收到以后,再用之前生成的随机值,进行解密,然后就可以得到服务器传过来的信息

5、成功建立TCP连接之后,浏览器会构建请求行、cookie等数据附加到请求头中,然后发送给服务器,服务器接收请求并解析
解析后,服务器会把响应数据通过之前建立的TCP连接,返回给浏览器的网络进程
浏览器接收到响应数据以后,如果是http1.1以下,就直接关闭连接,不过现在浏览器默认都会保持连接(keep-alive)


6 、如果要关闭TCP连接的话,需要进行四次挥手,过程如下:
1)第一次挥手:客户端认为没有数据要发送的话,就会向服务器发送一个释放报文,申请断开客户端和服务器之间的连接
2)第二次挥手:服务器收到请求以后,会向客户端发送一个确认报文,表示已经收到了客户端释放连接的请求,以后不会再接收客户端发过来的数据。此时处于半关闭状态,即此时客户端没有数据要发送了,但是服务器若想要发送数据,客户端还是要接受的
3)第三次挥手:服务器发送完所有请求后,会向客户端发送一个申请释放连接的报文
4)第四次挥手:客户端接收到申请释放连接的报文后,再向服务器发送一个确认报文,等待服务器收到确认报文,服务器收到确认报文,就会进入关闭状态。此时客户端进行一个等待的状态,这个状态会持续一段时间。如果在这段时间以内,都没有收到服务器的重发请求,那么客户端就会进入关闭状态。这样可以看出服务端结束TCP连接的时间要比客户端结束TCP连接的时间要早些。


7、在第5点中讲到,服务器会把响应数据返回给浏览器的网络进程中
如果返回的响应报文的状态为3xx,就需要重定向到其他URL,然后从头开始,然后网络线程会通过safeBrowsing来检查站点是不是恶意站点,如果是,就展示警告页面
如果返回的状态码为2xx,接着判断资源能不能缓存,如果可以就先缓存起来,然后对响应解码
如果不能缓存,网络线程就会通知UI线程,然后UI线程就会创建一个渲染器来准备渲染页面


8、开始渲染
由于渲染机制很复杂,需要执行的任务很多,所以渲染过程被分成了很多子阶段,然后开始一边解析一边渲染,过程是这样的:
1)首先要构建DOM树,将html转为浏览器认识的结构。在dom树构建的过程中如果遇到js脚本或者外部js连接,则会停止构建dom树来执行和下载相应的代码,这样会造成阻塞,这就是为什么推荐js代码应该放在html后面
2)然后根据外部样式、内联样式等来构建一个CSS对象模型树,也就是CSSOM树。
3)结合DOM树和CSSOM树,生成一个渲染树(render tree),这个过程被称为attachment
4)生成布局(flow),浏览器在屏幕上“画出”渲染树中所有的节点
5)将布局绘制(paint)在屏幕上,显示出整个页面

本文章选自两篇文章,其他两篇文章原文链接:

从URL输入到页面展示过程_前端每日三省的博客-CSDN博客

详细介绍从输入URL到页面显示的过程_输入url到页面展示_万人之英的博客-CSDN博客

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值