浏览器的底层是如何完成一次网络请求的？( 二 ) _浏览器

文章插图

递归查询：当 DNS 服务器收到请求时，就会检查 DNS 缓存，如果没有就会询问其他服务器，并将返回的查询结果返回客户端。

文章插图

我们前端会在性能优化的使用用到 DNS 的相关知识，我们在这稍微提一下，如何进行 DNS 优化呢？
DNS 查询经历很多步骤，查询很慢。浏览器获取到 IP 地址后，一般都会加到浏览器的缓存中，本地的 DNS 缓存服务器，也可以去记录。
另外使用 DNS 负载均衡，通常我们的网站应用各种云服务，DNS 系统根据每台机器的负载量，地理位置的限制等等，去提供高效快速的 DNS 解析服务。
3、TCP 连接我们通过 DNS 查询到 IP 地址之后，我们就开始打算与服务器建立连接，为接下来的数据传输做准备，这部分在之前的文章中写的非常详细，一定要去看哦。
网络分层模型
动画：用动画给面试官解释 TCP 三次握手过程
4、HTTP 请求我们客户端与服务端通过 TCP 的三次握手建立连接之后，客户端开始向服务器主动发起请求。

PS：对于 HTTP 协议，我们会在后边单独拿出一篇文章来详细介绍它的发展史，这里我们只涉及到 HTTP 的请求相关的内容。

服务端接收到客户端发送的信息，就返回响应信息和文件。客户端如何判断服务端是否成功返回了呢？就需要下列的一些状态码来识别，同样前端做的工作也是通过状态码来判断当前响应状态。

1XX（信息性状态码） : 服务器正在处理请求中。
2XX （成功状态码）: 请求处理完毕。
3XX （重定向状态码）: 需要附加操作以完成请求。301：永久性重定向。该状态码表示请求的资源已被分配了新的 URI，以后使用该资源，使用现在所指 URI 。302：临时性重定向。表示该状态码被分配了新的 URI，希望用户本次能够使用新的 URI 访问。304：服务器资源未改变，可直接使用客户端未过期的缓存。
4XX （客户端错误状态码）: 服务器无法处理请求。400：该请求报文中有语法错误。403：没有资源的访问权限。404：找不到资源。
5XX （服务端错误状态码）: 服务器处理请求出错。500：服务器发生错误503：服务器超荷载或正在维护。

远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
5、浏览器的渲染原理5.1 构建 DOM
服务器将 html、CSS、JS文件转化为 0,1字节数据在网络中传输给浏览器，浏览器通过判断状态码开始接收、解析文件，这开始运用到浏览器的渲染原理。
首先浏览器要做的就是获取 HTTP 的 Request 的 body 中字符串（字符流）的 HTML 文本，进行解析并构建 DOM 树。
将字符流转化为字符串之后，浏览器开始进行词法分析，虽然这个名词我们不熟悉，但是我们要知道，一个 HTML 字符串我们要拆分开才能构建 DOM 树，词法分析就是将字符串拆分成的过程。将字符串转化为的 token（标记） —— token 作为代码的最小单位，也就是拆分后的结果，这个过程我们称为标记化。

文章插图

我们将字符串拆解之后，然后将这些标记转化为 Node 结点，浏览器根据不同的结点开始构建一棵 DOM 树。这就是整个 DOM 树构建的过程，其中还涉及到很多的细节，比如词法分析是如何一个过程（状态机），有兴趣的小伙伴可以详细查看英文文档，在文章底部。

文章插图

5.2 构建 CSSOM 树
浏览器已经把 HTML 文件转化为了 DOM 树，下面就对 CSS 样式文件进行解析，构建成 CSSOM 树。这个过程和上述构建 DOM 树的过程有点相似，但是其中 CSSOM 树的构建更加的耗时。下面我们来看看如何耗时的？
浏览器通过递归的方式 DOM 树为结点设置样式。通过先找到具体的标签，然后递归找到设置的上级标签，最后确定选择器选择的所选标签的样式。
比如下边的例子，浏览器是如何确定结点的样式的呢？
1 <div> 2 <span> 3 <p>小鹿动画学编程，一天一篇动画喂饱你！</p> 4 </span> 5 <p>你好，小鹿！</p> 6 </div> 7 8 9 div span p{10 color: red;11 font-size: 12px;12 }13 div {14 background:red; 15 }