输入url后回车发生了什么(持续更新)

在大多数情况下,浏览器被认为是单线程的。也就是说,他们从头到尾执行一项任务,然后再开始另一项任务。为了实现流畅的交互,开发人员的目标是确保高性能的站点交互,从平滑滚动到触摸响应。渲染时间是关键,确保主线程可以完成我们交给它的所有工作,并且仍然始终可以处理用户交互。通过了解浏览器的单线程性质并在可能和适当的情况下最大程度地减少主线程的职责,以确保渲染顺利并且对交互的响应立即响应,可以提高 Web 性能。

导航:DNS解析

导航是加载网页的第一步。每当用户通过在地址栏中输入 URL、单击链接、提交表单以及其他操作来请求页面时,就会发生这种情况。

Web 性能的目标之一是最大限度地减少完成导航所需的时间。在理想条件下,这通常不会花费太长时间,但延迟和带宽是可能导致延迟的敌人。

DNS查询

导航到网页的第一步是查找该页面的资源所在的位置。如果您导航到https://example.com,HTML 页面位于 IP 地址为 的服务器上93.184.216.34。如果您从未访问过此站点,则必须进行 DNS 查找。

您的浏览器请求 DNS 查找,该查找最终由名称服务器进行处理,而名称服务器又以 IP 地址进行响应。在此初始请求之后,IP 可能会被缓存一段时间,这通过从缓存中检索 IP 地址而不是再次联系名称服务器来加速后续请求。

对于页面加载,通常只需为每个主机名执行一次 DNS 查找。但是,必须对请求页面引用的每个唯一主机名进行 DNS 查找。如果您的字体、图像、脚本、广告和指标都具有不同的主机名,则必须对每一个进行 DNS 查找。

这可能会影响性能,尤其是在移动网络上。当用户使用移动网络时,每次 DNS 查找都必须从手机到手机信号塔才能到达权威 DNS 服务器。电话、手机信号塔和名称服务器之间的距离会显着增加延迟。

握手:TCP连接

一旦知道 IP 地址,浏览器就会通过TCP 三向握手建立与服务器的连接。这种机制的设计使得尝试通信的两个实体(在本例中为浏览器和 Web 服务器)可以在传输数据之前协商网络 TCP 套接字连接的参数(通常通过HTTPS)。

TCP 的三向握手技术通常称为“SYN-SYN-ACK”,或更准确地说是 SYN、SYN-ACK、ACK,因为 TCP 传输三个消息来协商并启动两台计算机之间的 TCP 会话。是的,这意味着每个服务器之间还要来回三个消息,并且请求尚未发出。

TLS 协商

对于通过 HTTPS 建立的安全连接,需要再次“握手”。此握手(或者更确切地说TLS协商)确定将使用哪个密码来加密通信、验证服务器并在开始实际数据传输之前建立安全连接。在实际发送内容请求之前,这还需要与服务器进行五次以上的往返。

虽然确保连接安全会增加页面加载时间,但安全连接值得付出延迟代价,因为浏览器和 Web 服务器之间传输的数据无法被第三方解密。

经过八次与服务器的往返之后,浏览器终于​​能够发出请求。

发送:HTTP请求

一旦我们与 Web 服务器建立了连接,浏览器就会代表用户发送初始HTTP GET请求,对于网站来说,该请求通常是 HTML 文件。

回复:HTTP相应

服务器收到请求后,会回复相关的响应头和 HTML 内容。

该初始请求的响应包含接收到的数据的第一个字节。第一个字节的时间(TTFB) 是用户发出请求(例如通过单击链接)到收到第一个 HTML 数据包之间的时间。第一个内容块通常是 14KB 的数据。

在我们上面的例子中,请求肯定小于14KB,但是直到浏览器在解析过程中遇到链接时才会请求链接的资源,如下所述。

拥塞控制/TCP慢启动

TCP 数据包在传输过程中被分成段。由于 TCP 保证数据包的顺序,因此服务器在发送一定数量的数据段后必须收到客户端以 ACK 数据包形式的确认。

如果服务器在每个数据段后等待 ACK,那么即使在低负载网络的情况下,也会导致来自客户端的频繁 ACK 并可能增加传输时间。

另一方面,一次发送太多报文段可能会导致这样的问题:在繁忙的网络中,客户端将无法接收报文段,并且会在很长一段时间内保持以 ACK 进行响应,而服务器则必须保持重新发送片段。

为了平衡传输的报文段数量,采用TCP慢启动算法逐渐增加传输的数据量,直到可以确定最大网络带宽,并在网络负载较高的情况下减少传输的数据量。

传输的报文段数由拥塞窗口(CWND)的值控制,可以初始化为1、2、4或10个MSS(以太网协议上的MSS为1500字节)。该值是要发送的字节数,客户端收到该字节后必须发送 ACK。

如果收到 ACK,则 CWND 值将加倍,因此服务器下次将能够发送更多数据段。如果没有收到 ACK,则 CWND 值将减半。因此,该机制在发送太多分段和发送太少分段之间实现了平衡。

解析:HTML渲染

一旦浏览器接收到第一块数据,它就可以开始解析接收到的信息。解析是浏览器将通过网络接收到的数据转换为DOM和CSSOM 的步骤,渲染器使用它们将页面绘制到屏幕上。

DOM 是浏览器标记的内部表示。DOM 也是公开的,可以通过 JavaScript 中的各种 API 进行操作。

即使请求页面的 HTML 大于初始 14KB 数据包,浏览器也会开始解析并尝试根据其拥有的数据呈现体验。这就是为什么在前 14KB 中包含浏览器开始渲染页面所需的所有内容,或者至少包含页面模板(首次渲染所需的 CSS 和 HTML)对于 Web 性能优化非常重要的原因。但在将任何内容呈现到屏幕上之前,必须解析 HTML、CSS 和 JavaScript。

构建 DOM 树

我们描述了关键渲染路径中的五个步骤。

第一步是处理 HTML 标记并构建 DOM 树。HTML 解析涉及标记化和树构建。HTML 标记包括开始和结束标记,以及属性名称和值。如果文档格式良好,则解析它会直接且更快。解析器将标记化输入解析到文档中,构建文档树。

DOM 树描述了文档的内容。该元素是文档树的第一个元素和根节点。树反映了不同元素之间的关系和层次结构。嵌套在其他元素中的元素是子节点。DOM 节点的数量越多,构建 DOM 树所需的时间就越长。

当解析器找到非阻塞资源(例如图像)时,浏览器将请求这些资源并继续解析。当遇到 CSS 文件时,解析可以继续,但

你可能感兴趣的:(#,前端基础,前端,javascript)