浏览器的工作方式

输入域名，浏览器将做出简单的筛选判断. 默认值为http协议. 如果是https，则需要手动输入DNS查询. 首先，检查您自己的内存中的DNS缓存，然后检查本地硬盘中的主机文件. 查询DNS服务以建立TCP. / IP连接将HTTP请求发送到服务器，以处理浏览器的收据并解析显示.

当我们在浏览器中输入URL时浏览器加载图片原理，实际上是在向服务器询问所需的页面内容. 所有浏览器必须首先确认与域名对应的服务器在哪里. 将域名解析为相应的服务器IP地址是由DNS服务器完成的.

客户端收到您输入的域名地址后，首先会查找本地主机文件，并检查文件中是否存在相应的域名和IP对应关系. 如果是这样，它将向其IP地址发送一个请求. 否，转到DNS服务器. 用户很少编辑主机文件.

浏览器客户端将包含域名的DNS查询消息发送到本地DNS服务器. 本地DNS服务器将查询转发到根DNS服务器. 根DNS服务器会注意到com后缀，并将comDNS服务器的IP地址返回到本地DNS服务器. 本地DNS服务器再次将查询请求发送到comDNS服务器. comDNS服务器会注意到后缀，并以负责域名的权威DNS服务器的IP地址作为响应. 最后，本地DNS服务器将包含IP地址的响应数据包发送到客户端.

从客户端到本地服务器是递归查询，而DNS服务器之间的交互是迭代查询. 通常情况下，comDNS服务器的地址已经存在于本地DNS服务器的缓存中，因此不需要请求根域名服务器.

花了很长时间才终于获得服务器IP. 下一步自然是连接到服务器. 对于客户端和服务器之间的TCP连接，必须说的是“三向握手”.

客户端将带有SYN标志的数据包发送到服务器. 服务器接收到它后，将发送回带有SYN / ACK标志的数据包以指示确认. 最后，客户端发送回带有ACK标志的数据包，表示握手已结束并且连接成功.

上面的图片也可以这样理解:

客户: “您好，不在家，您有快递. ”

服务器: “是，只需发送. ”

客户: “好吧. ”

与服务器建立连接后，可以向服务器发起请求. 这里我们首先来看一下请求消息的结构（如下所示）:

在浏览器中查看邮件标题（以Google Chrome为例）:

请求行包括请求方法，URI和HTTP版本. 标头字段传达重要信息，包括请求标头字段，公共标头字段和实体标头字段. 我们可以在消息中看到请求的特定信息. 每个标头字段的作用在这里不再详细描述.

服务器收到请求后，将由Web服务器（准确地说，应该是http服务器）对它进行处理，例如Apache，Ngnix，IIS等. Web服务器解析用户请求，知道哪个需要对资源文件进行调度，然后通过相应的资源文件处理用户的请求和参数，调用信息，最后通过Web服务器将结果返回给浏览器客户端.

在HTTP中，即使有错误消息，在有请求时也会有响应. 在这里，我们还查看了响应消息的组成:

响应中将包含一个HTTP状态代码，例如200、301、404、500等. 通过此状态码，我们可以知道服务器端处理是否正常，并可以了解具体错误.

状态码由一个3位数字和一个原因短语组成. 根据第一位数字，状态码可分为五类:

为了避免服务器和客户端的资源占用和丢失，当双方都没有请求或响应时，任何一方都可以发起关闭请求. 与创建TCP连接的三向握手类似，关闭TCP连接需要四次握手.

上面的图片可以这样理解:

客户端: “兄弟，我没有任何要发送的数据，让我们关闭连接. ”

服务器: “收到，让我看看我身边是否有数据. ”

服务器: “兄弟，我没有任何数据要传递给您，我们可以关闭连接. ”

客户: “好吧. ”

确切地说，浏览器不仅需要加载和解析HTML，还需要加载和解析CSS和JS. 以及其他媒体资源，例如图片，视频等.

浏览器解析HTML以生成DOM树，解析CSS，生成CSS规则树，然后通过DOM树和CSS规则树生成渲染树. 呈现树与DOM树不同. 渲染树中没有不需要显示的节点，例如head浏览器加载图片原理，并且display is none.

应注意，浏览器的解析过程不是顺序执行的. 例如，在解析CSS时，您可以继续加载和解析HTML，但是在解析和执行JS脚本时，它将停止解析后续的HTML，这将出现阻塞问题. 关于JS阻止相关问题，我在这里不再赘述，稍后再单独解释.

根据渲染树布局，计算CSS样式，即几何信息，例如页面中每个节点的大小和位置. HTML默认是流布局. CSS和js会破坏此布局，并更改DOM的外观样式，大小和位置. 这时，需要提到两个重要的概念: 替换和回流.

替换: 在不影响整体布局的情况下重绘了部分屏幕. 例如，某些CSS的背景颜色已更改，但是元素的几何尺寸和位置保持不变.

回流: 这意味着组件的几何形状已更改. 我们需要重新验证并计算渲染树. 它是已更改的部分或全部渲染树. 这是重排或布局. 因此，我们应尽量减少回流和替换. 我认为这是现在很少使用表布局的原因之一.

最后，浏览器绘制每个节点并向用户显示页面.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-149708-1.html