JavaScript 是如何工作的：深入网络层 + 如何优化性能和安全

摘要：是如何工作的深入网络层如何优化性能和安全这是专门探索及其所构建的组件的系列文章的第篇。为了使网络层高效，它需要扮演的角色不仅仅是一个简单的套接字管理器。套接字组织在按源分组的池中，每个池执行自己的连接限制和安全约束。

JavaScript 是如何工作的：深入网络层 + 如何优化性能和安全

这是专门探索 JavaScript 及其所构建的组件的系列文章的第 12 篇。

如果你错过了前面的章节，可以在这里找到它们：

JavaScript 是如何工作的：引擎，运行时和调用堆栈的概述！

JavaScript 是如何工作的：深入V8引擎&编写优化代码的5个技巧！

JavaScript 是如何工作的：内存管理+如何处理4个常见的内存泄漏 !

JavaScript 是如何工作的：事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式！

JavaScript 是如何工作的：深入探索 websocket 和HTTP/2与SSE +如何选择正确的路径！

JavaScript 是如何工作的：与 WebAssembly比较 及其使用场景 !

JavaScript 是如何工作的：Web Workers的构建块+ 5个使用他们的场景!

JavaScript 是如何工作的：Service Worker 的生命周期及使用场景!

JavaScript 是如何工作的：Web 推送通知的机制!

JavaScript是如何工作的:使用 MutationObserver 跟踪 DOM 的变化

JavaScript是如何工作的:渲染引擎和优化其性能的技巧

正如在上一篇关于 渲染引擎 的博客文章中提到的，我们认为优秀的 JavaScript 开发人员和杰出的 JavaScript 开发人员之间的区别在于，后者不仅理解语言的具体细节，而且理解其内部结构和周遭环境。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

49年前，一种叫做 ARPAnet 的网诞生了。它是一个早期的 分组交换网络，也是第一个 实现TCP/IP套件的网络。20年后，蒂姆·伯纳斯-李提出了一种“网状结构”的建议，这种结构后来被称为“万维网”。在这 49 年里，互联网走过了漫长的道路，从仅仅两台计算机交换数据包，到超过 7500 万台服务器、38 亿互联网用户和 13 亿个网站。

"阿帕"（ARPA），是美国高级研究计划署（Advanced Research ProjectAgency）的简称。他的核心机构之一是信息处理（IPTO Information Processing Techniques Office），一直在关注电脑图形、网络通讯、超级计算机等研究课题。
阿帕网为美国国防部高级研究计划署开发的世界上第一个运营的封包交换网络，它是全球互联网的始祖。

在这篇文章中，我们将尝试分析现代浏览器使用什么技术来自动提高性能(甚至在你不知道的情况下)，接着深入浏览器网络层。最后，我们将提供一些关于如何帮助浏览器提高 Web 应用程序性能的建议。

现代 Web 浏览器专为快速，高效，安全地提供网络应用/网站而设计。 数百个组件在不同的层上运行，从流程管理和安全沙箱到 GPU 管道，音频和视频等等，Web 浏览器看起来更像是一个操作系统，而不仅仅是一个软件应用程序。

浏览器的总体性能由许多大型组件决定:解析、布局、样式计算、JavaScript 和 WebAssembly 执行、渲染，当然还有网络堆栈。

工程师经常认为网络堆栈是一个瓶颈。这种情况经常发生，因为所有资源都需要从网上获取，然后才能解除其余步骤的阻塞。为了使网络层高效，它需要扮演的角色不仅仅是一个简单的套接字管理器。它提供给我们的是一种非常简单的资源获取机制，但实际上它是一个具有自己的优化标准、API 和服务的完整平台。

作为 Web 开发人员，我们不必担心多带带的 TCP 或 UDP 数据包、请求格式化、缓存和其他一切问题。整个复杂性由浏览器负责，因此我们可以将精力集中在我们正在开发的应用程序上。然而，了解底层的情况可以帮助我们创建更快、更安全的应用程序。

本质上，当用户开始与浏览器交互时会发生以下情况:

用户在浏览器地址栏中输入一个 URL

给定 Web 上资源的 URL，浏览器首先检查其本地缓存和应用程序缓存，并尝试使用本地副本来完成请求

如果缓存不能使用，浏览器从 URL 获取域名，并从 DNS 请求服务器的 IP 地址。如果域被缓存，则不需要 DNS 查询

浏览器创建一个 HTTP 包，表示它请求位于远程服务器上的 Web 页面

数据包被发送到 TCP 层，TCP 层在 HTTP 数据包上添加自己的信息，维护已启动的会话需要此信息

然后数据包被传递给 IP 层，IP 层的主要任务是找出一种将数据包从用户发送到远程服务器的方法，这些信息也存储在包的顶部

数据包被发送到远程服务器

一远程服务器一旦接收到数据包，就会以类似的方式发回响应。

W3C的浏览时序规范（Navigation Timing specification）提供了一个浏览器API，让我们可以看到浏览器中每项请求的生命周期背后的时序和性能数据。让我们看看这些组成部分，每一块都是影响最佳用户体验的关键点：

整个网络过程非常复杂，有许多不同的层，这可能成为瓶颈。这就是为什么浏览器努力通过使用各种技术来提高自己的性能，从而使整个网络通信的影响最小。

先了解一些术语:

源(Origin) - 由应用程序协议，域名和端口号组成（例如https，www.example.com，443）

套接字池(Socket pool) - 属于同一源的一组套接字（所有主要浏览器将最大池大小限制为6个套接字）

JavaScript 和 WebAssembly 不允许我们管理单个网络套接字的生命周期，这是一件好事!这不仅使我们的省去较多麻烦，而且还可以让浏览器自动进行许多性能优化，其中包括套接字重用、请求优先级和后期绑定、协议协商、强制连接限制等。

实际上，现代浏览器在将请求管理周期与套接字管理分离方面做了更多的工作。套接字组织在按源分组的池中，每个池执行自己的连接限制和安全约束。挂起的请求被排队、排序，然后绑定到池中的各个套接字。除非服务器有意关闭连接，否则同一个套接字可以跨多个请求自动重用!

由于打开新的 TCP 连接需要额外的成本，因此连接的重用本身就带来了巨大的性能优势。默认情况下，浏览器使用所谓的 “keepalive” 机制，它可以在发出请求时节省打开到服务器的新连接的时间。打开新 TCP 连接的平均时间为:

当地的请求  — 23ms

横贯大陆的请求 —— 120ms

洲际请求 ——  225ms

这种架构为其他一些优化提供了可能， 请求可以根据其优先级以不同的顺序执行。 浏览器可以优化所有套接字的带宽分配，也可以在预期请求时打开套接字。

正如之前提到的，这一切都由浏览器管理，不需要我们做任何工作，但这并不意味着我们什么都做不了。 选择正确的网络通信模式，类型和传输频率，协议选择以及服务器堆栈的调优/优化可以在提高应用程序的整体性能方面发挥重要作用。

有些浏览器甚至更进了一步。 例如，Chrome 可以学习用户的操作习惯来使自己变得更快。 它根据访问的站点和典型的浏览模式进行学习，以便预测可能的用户行为并在用户执行任何操作之前采取措施。 最简单的例子是当用户在链接上悬停时，Chrome 会预先渲染页面， 如果有兴趣了解有关 Chrome 优化的更多信息，可以查看这篇文章 https://www.igvita.com/posa/h...

允许浏览器管理单个套接字还有另一个非常重要的目的:通过这种方式，浏览器能够对不受信任的应用程序资源执行一致的安全和策略约束。例如，浏览器不允许 API 直接访问原始网络套接字，因为这将使任何恶意应用程序能够任意连接到任何主机。浏览器还强制执行连接限制，以保护服务器和客户端免于资源耗尽。

浏览器格式化所有传出请求，以强制执行一致且格式良好的协议语义，以保护服务器。类似地，响应解码是自动完成的，以保护用户免受恶意服务器的攻击。

传输层安全性协议 (Transport Layer Security, TLS)是一种通过计算机网络提供通信安全性的加密协议。它在许多应用程序中得到了广泛的应用，其中之一就是 Web 浏览器。网站可以使用 TLS 保护服务器和Web 浏览器之间的所有通信。该协议由两层组成： TLS 记录协议（TLS Record）和 TLS 握手协议（TLS Handshake）。较低的层为 TLS 记录协议，位于某个可靠的传输协议（例如 TCP）上面。

整个TLS握手包括以下步骤:

客户端向服务器发送 “Client hello” 消息，与之一同发送的还有客户端产生的随机值和支持的密码套件。

服务器通过向客户端发送 “Server hello” 消息及服务器产生的随机值进行响应。

服务器将其证书发送给客户端，并可以从客户端请求类似的证书。 服务器发送 “Server hello done” 消息。

如果服务器向客户机请求了证书，客户机将发送证书。

客户端创建一个随机的 Pre-Master Secret，并使用服务器证书中的公钥对其进行加密，将加密的 Pre-Master Secret 发送到服务器。

服务器接收 Pre-Master Secret。 服务器和客户端均基于预主密钥生成主密钥和会话密钥。

客户端向服务器发送 “Change cipher spec” 通知，以指示客户端将开始使用新的会话密钥进行散列和加密消息。 客户端还发送 “Server finished” 消息。

服务器接收 “Change cipher spec”，并使用会话密钥将其记录层安全状态切换为对称加密。 服务器向客户端发送 “Server finished” 消息。

客户端和服务器现在可以通过他们已建立的安全通道交换应用程序数据。 从客户端发送到服务器并返回的所有消息都使用会话密钥加密。

如果任何验证失败，则警告用户 - 例如，服务器正在使用自签名证书。

同源是指文档的来源相同，主要包括三个方面

协议

主机

载入文档的 URL 端口

以下是一些可能嵌入跨源资源的一些例子：

带有