阿里云最近在做活动，低至20折，有兴趣的可以看看：https://promotion.aliyun.com/...为保证可读性，本文采用意译而非直译。JavaScript的工作原理：深入研究网络层+如何优化性能和安全性这是探索JavaScript及其构建组件系列文章的第12篇。如果您错过了前面的章节，可以在这里找到它们：JavaScript的工作原理：引擎、运行时和调用堆栈概述！JavaScript的工作原理：深入了解V8引擎和编写优化代码的5个技巧！JavaScript的工作原理：内存管理+如何处理4种常见内存泄漏！JavaScript的工作原理：事件循环和异步编程的兴起+使用async/await更好地编码的5种方法！JavaScript的工作原理：深入了解websockets和HTTP/2与SSE+如何选择正确的路径！JavaScript的工作原理：与WebAssembly的比较及其使用场景！JavaScript的工作原理：WebWorkers的构建块+5个使用它们的场景！JavaScript的工作原理：ServiceWorker生命周期和使用场景！JavaScript是如何工作的：Web推送通知的机制！JavaScript的工作原理：使用MutationObserver跟踪DOM变化JavaScript的工作原理：渲染引擎??和优化其性能的技巧语言，但了解其内部结构和周围环境。想阅读更多优质文章，请戳GitHub博客，一年百篇优质文章等你来！有点历史49年前，一个名为ARPAnet的网络诞生了。它是早期的分组交换网络，也是第一个实现TCP/IP套件的网络。20年后，蒂姆·伯纳斯-李提出了一种后来被称为“万维网”的“网络结构”。在这49年里，互联网已经走过了漫长的道路，从只有两台交换数据包的计算机，发展到超过7500万台服务器、38亿互联网用户和13亿个网站。“ARPA”是高级研究计划署（AdvancedResearchProjectAgency）的缩写。他的核心组织之一是信息处理（IPTOInformationProcessingTechniquesOffice），一直专注于计算机图形学、网络通信和超级计算机等研究课题。Arpanet是世界上第一个为美国国防高级研究计划局开发的运营分组交换网络。它是全球互联网的始祖。在这篇文章中，我们将尝试分析现代浏览器使用哪些技术来自动提高性能（即使您不知道），然后深入浏览器网络层。最后，我们将提供一些关于如何帮助浏览器提高Web应用程序性能的建议。概述现代Web浏览器专为快速、高效和安全地交付Web应用程序/网站而设计。数百个组件在不同层上运行，从进程管理和安全沙箱到GPU管道、音频和视频等等，Web浏览器看起来更像是一个操作系统，而不仅仅是一个软件应用程序。浏览器的整体性能取决于许多大型组件：解析、布局、样式计算、JavaScript和WebAssembly执行、渲染，当然还有网络堆栈。工程师通常将网络堆栈视为瓶颈。这种情况经常发生，因为在其余步骤可以解除阻塞之前，需要从网络中获取所有资源。为了使网络层高效，它需要发挥超越简单套接字管理器的作用。它为我们提供的是一种非常简单的资源获取机制，但实际上它是一个完整的平台，有自己的优化标准、API和服务。作为Web开发人员，我们不必担心单独的TCP或UDP数据包、请求格式、缓存和其他一切。整个复杂性都由浏览器处理，因此我们可以专注于我们正在开发的应用程序。然而，了解引擎盖下发生的事情可以帮助我们创建更快、更安全的应用程序。本质上，当用户开始与浏览器交互时，用户会在浏览器地址栏中键入URL。给定Web上资源的URL，浏览器首先检查其本地和应用程序缓存，并尝试使用本地Copy来完成请求，如果缓存不可用，浏览器从URL中获取域名并请求服务器的来自DNS的IP地址。如果域被缓存，则不需要DNS查询浏览器创建一个HTTP数据包，表明它请求位于远程服务器上的网页数据包被发送到TCP层，TCP层在HTTP数据包上添加自己的信息，maintenanceisstartedsession需要这个信息，然后数据包被传递到IP层，IP层的主要任务是想办法把数据包从用户发送到远程服务器，这个信息也存储在数据包的顶部数据包被发送到远程服务器-一旦远程服务器收到数据包，它就会以类似的方式发回响应。W3C的NavigationTiming规范提供了一个浏览器API，可以让我们在浏览器中看到每个请求生命周期背后的时间和性能数据。我们来看看这些组件，每一个组件都是影响最佳用户体验的关键点：整个网络过程非常复杂，有很多不同的层，这可能成为瓶颈。这就是为什么浏览器努力通过使用各种技术来提高其性能，以便对整个网络通信的影响最小。套接字管理首先了解一些术语：起源（Origin）——由应用协议、域名和端口号组成（如https、www.example.com、443）套接字池（Socketpool）——属于同一起源组的套接字（所有主要浏览器将最大池大小限制为6个套接字）JavaScript和WebAssembly不允许我们管理单个Web套接字的生命周期，这是一件好事！它不仅为我们省去了更多的麻烦，还允许浏览器自动执行许多性能优化，包括套接字重用、请求优先级和后期绑定、协议协商、强制连接限制等等。事实上，现代浏览器已经做了更多的工作来将请求管理周期与套接字管理分开。套接字按来源分组在池中，每个池都强制执行自己的连接限制和安全约束。挂起的请求被排队、排序并绑定到池中的各个套接字。除非服务器有意关闭连接，否则同一个套接字可以在多个请求中自动重用！由于打开新的TCP连接的额外成本，连接重用本身带来了巨大的性能优势。默认情况下，浏览器使用所谓的“keepalive”机制，这可以节省在发出请求时打开与服务器的新连接的时间。打开一个新的TCP连接的平均时间为：本地请求——23ms洲际请求——120ms洲际请求——225ms这种架构使得一些其他的优化成为可能，请求可以根据它们的优先级以不同的顺序执行。浏览器可以优化所有套接字的带宽分配，也可以在预期请求时打开套接字。如前所述，这一切都由浏览器管理，不需要我们做任何工作，但这并不意味着我们不能做任何事情。选择正确的网络通信模式、传输类型和频率、协议选择以及服务器堆栈的调整/优化可以在提高应用程序的整体性能方面发挥重要作用。有些浏览器甚至更进一步。例如，Chrome可以学习用户的操作习惯，让自己变得更快。它根据访问的站点和典型的浏览模式进行学习，以便预测可能的用户行为并在用户采取任何行动之前采取行动。最简单的例子就是当用户悬停在链接上时，Chrome会预渲染页面，如果你有兴趣了解更多关于Chrome优化的信息，可以查看这篇文章https://www.igvita.com/posa/h。..web安全和沙盒允许浏览器管理单个套接字还有另一个非常重要的目的：通过这种方式，浏览器能够对不受信任的应用程序资源实施一致的安全和策略约束。例如，浏览器不允许API直接访问原始网络套接字，因为这将使任何恶意应用程序能够任意连接到任何主机。浏览器还强制执行连接限制，以保护服务器和客户端免于资源耗尽。浏览器格式化所有传出请求以强制执行一致且格式良好的协议语义以保护服务器。同样，响应解码是自动完成的，以保护用户免受恶意服务器的侵害。TLS协议传输层安全性(TLS)是一种加密协议，可通过计算机网络提供通信安全性。它被广泛用于许多应用程序中，其中之一就是网络浏览器。网站可以使用TLS来保护服务器和Web浏览器之间的所有通信。该协议由两层组成：TLS记录协议（TLSRecord）和TLS握手协议（TLSHandshake）。下层是TLS记录协议，它位于某些可靠的传输协议（如TCP）之上。整个TLS握手包括以下步骤：客户端向服务器发送“客户端问候”消息，以及客户端生成的随机值和支持的密码套件。服务器通过向客户端发送带有服务器生成的随机值的“服务器问候”消息来响应。服务器将其证书发送给客户端，并可以向客户端请求类似的证书。服务器发送“Serverhellodone”消息。如果服务器向客户端请求证书，则客户端发送证书。客户端随机生成一个Pre-MasterSecret，用服务器证书中的公钥对其进行加密，并将加密后的Pre-MasterSecret发送给服务器。服务器收到Pre-MasterSecret。服务器和客户端都基于预主密钥生成主密钥和会话密钥。客户端向服务器发送“更改密码规范”通知，指示客户端将开始使用新会话密钥对消息进行散列和加密。客户端还发送“服务器完成”消息。服务器收到“更改密码规范”并使用会话密钥将其记录层安全状态切换为对称加密。服务器向客户端发送“服务器完成”消息。客户端和服务器现在可以通过其已建立的安全通道交换应用程序数据。从客户端发送到服务器并返回的所有消息都使用会话密钥加密。如果任何验证失败，则警告用户-例如，服务器正在使用自签名证书。同源策略（same-originpolicy）同源是指文档的来源是相同的，主要包括三个方面protocolhostURL端口加载文档以下是一些可能嵌入的跨源资源的例子：和JavaScript。语法错误的错误消息仅适用于同源脚本中带有加载图像使用
