浏览器输入URL到网页完全呈现的过程

Posted 2023-05-15

参考技术A

从打开浏览器输入网址到最终的网页呈现在浏览器中，到底经历了哪些过程？下面为大家一一讲解。
总体分为以下几个过程：

什么是URL
在讲解DNS解析前，先简单介绍下URL。所谓的URL（Uniform Resource Locator），中文名统一资源定位符，用于定位互联网上的资源。简单来说，就是人们常说的网址。
一个标准的URL格式遵循一定的语法规则：
scheme://host.domain.port/path/filename
对应部分解释如下：

好啦，当我们在浏览器中输入一个网址的时候，浏览器就会对该网址进行DNS解析还获取其对应的ip地址，而这个ip地址，才是资源实际存在的地址。

什么是ip地址
ip地址，指的是互联网协议地址。每一个互联网上的主机都会分配有一个ip地址来作为其身份的标识。ip地址是一个32位的二进制数，比如本机的ip地址为127.0.0.1。而域名相当于是对ip地址的一个伪装。因为相对于纯数字的ip地址来说，具有一定语义的域名更容易被人所理解和记住。而计算机更喜欢纯数字的ip地址，所以为了同时满足以上两者的需求，DNS服务应运而生。

什么是域名解析
DNS协议童工通过域名查找ip地址或是逆向地从ip地址查找域名的服务。 DNS是一个网络服务器，简单来说上面存放了各个域名和其ip地址之间的关系数据。
比如：baidu.com 220.114.23.56

域名解析过程

TCP，一种传输控制协议，是一种面向连接的、可靠的、基于字节流的传输层通信协议。

网络七层模型
应用层（ftp，http，smtp，pop3）——表示层——会话层——传输层（TCP）——网络层（IP）——数据链路层——物理层

TCP三次握手

注：tcp在握手过程中并不携带任何数据，而是在三次握手完成之后，才会进行数据的传递。

为什么需要三次握手？
《计算机网络》中讲“三次握手”的目的是 “为了防止已经失效的连接请求报文突然又传送到了服务端，因而产生了错误” 。
可以这样理解，客户端发起了一个连接请求，但是因为一些原因请求并未及时传递到服务器。而客户端因为长时间收不到服务器的就认为本地连接请求失败，然后就去做别的事了。而过了一段时间，之前的请求到达了服务器，服务器收到请求进行一系列操作后返回给客户端并等待客户端的响应。而此时客户端已经去做别的事情了，根本不会对本次响应做出回答，而服务器那边就一直等啊等，等啊等.......这样就造成了服务器端的资源浪费，所以我们需要三次而不是两次。这样服务器如果在一定时间内没收到客户端的回答，那么就放弃等待，自己也去干别的事了。

那为什么不是四次而是三次呢？
因为服务器的ACK和SYN包可以一起发送啊，并不会产生什么不好的影响，何乐而不为呢？

在TCP三次握手结束后，客户端就可以向服务端发送http请求报文了。
请求报文包含三部分：请求行，请求头，请求主体。

服务器收到请求后处理请求，并返回响应报文数据。
响应报文包含三部分：响应行，响应头，响应主题。

浏览器在接收到服务器返回的html文件后，会对其进行HTML解析。

HTML解析是浏览器的HTML解析器把HTML解析成DOM TREE。在解析否过程中，浏览器会根据HTML文件的结构从上到下解析HTML，HTML元素以深度优先的方式进行解析，而script、link、style等标签会是解析过程产生阻塞，阻塞的情况有：

回流： 当某个元素的尺寸大小或是位置信息发生改变的时候，会触发回流，对元素的大小和位置进行重新计算。
重绘： 当某个元素的背景颜色，文字颜色或是其他不影响周围或内部布局的属性发生改变时会触发重绘。

注： 回流一定会包含着重绘，而重绘不一定会包含回流。

（插楼）
在实际情况中，DOM操作的代价是非常高的，而页面渲染的瓶颈也都集成中DOM操作上。其中，回流和重绘在DOM操作过程中是对性能影响最大的。所以，我们应该尽可能的避免不必要的回流和重绘操作。
会触发回流和重绘的DOM操作：

所以针对DOM的优化，可以遵循以下几条实践方法：

（2）设置DOM元素的display样式为none来隐藏元素
这种方式通过隐藏页面的DOM元素，达到在页面中移除元素的效果，经过大量的DOM操作后恢复原来的display样式。只有在一开始隐藏和最后显示的时候会触发重排和重绘。

（3）克隆DOM元素到内存中
这种方式把页面中的DOM元素克隆一份到内存中，然后在内存中对该对象进行操作，完成后再替换页面中的元素。这一也只有在最后一步才会影响页面。

在数据传输完毕后，需要断开tcp连接，此时会发起tcp四次挥手。

从浏览器地址栏输入URL到浏览器呈现数据全过程解析

一、输入设备（或粘贴）输入 URL，按下 Enter键 或其他按钮开始请求。

二、浏览器开始解析 URL

关于 URL 到相关知识点：什么是URI，URL以及URN，你真的理解了吗。

1、URL 是否合法

2、URL 中的字符转换

3、HSTS列表 协议升级。相关文章 HSTS详解。在现代浏览器中，这一步有可能导致请求中止。

三、检查本地缓存，根据缓存情况决定下一步的动作

1、 强缓存（Cache-Control 和 Expires）   直接从本地缓存读取资源（若是这步，便没有下面的步骤）

2、弱缓存（Etag、If-None-Match 和 Last-Modified、If-Modified-Since）  需要与服务器通信进行一次确认缓存是否可用

3、无缓存  与服务器通信请求数据

关于强弱缓存的文章： HTTP强缓存和协商缓存

 四、浏览器开始进行 DNS 解析

解析的过程依次为：浏览器缓存、本机缓存、hosts文件、路由器缓存、ISP DNS缓存、DNS递归查询。

五、与目标IP的服务器进行TCP链接（三次握手）

参考文章： TCP三次握手详解及释放连接过程

六、发送 HTTP或HTTPS 请求

参考文章：Http和Https的区别

七、服务器对请求进行响应

1、304响应 对应对是弱缓存响应

2、200响应 对应对是无缓存响应

在服务器进行响应之前，内部还有其他的内容。

比如代理服务器，数据库查询等等。

八、浏览器接收响应，并视情况关闭TCP连接

九、根据响应对内容，浏览器进行不同对处理

下面仅仅对 html 网页文档进行讨论。

 

十、下文待续。

 

 

参考文章： https://www.jianshu.com/p/558455228c43