当前位置: 首页 > Web前端 > HTML5

JavaScript的工作原理12-探索网络层以及如何提高其性能和安全性

时间:2023-04-05 16:24:19 HTML5

这里参考原文,稍有改动,本文根据知识共享署名4.0国际许可协议共享,BYTroland。本系列持续更新中,Github地址请查看这里。这是JavaScript工作原理的第12章。正如我们之前关于渲染引擎的文章所述,我们认为优秀和优秀的JavaScript开发人员之间的区别在于,后者不仅了解语言的具体细节,还了解其内部结构和运行环境。网络简史49年前,ARPAnet诞生了。它是早期的分组交换网络,也是第一个实现TCP/IP协议族的网络。该网络连接加州大厅和斯坦福研究所。20年后,蒂姆·伯纳斯-李(TimBerners-Lee)发布了后来被称为万维网“网状网络”的草案。49年来,Web取得了长足的进步,从只有两台交换数据包的计算机发展到至少7500万台服务器、38亿人使用Internet和13亿个网站。本文将尝试分析现代浏览器使用了哪些技术来自动提升应用程序性能(其中一些你甚至都不知道),然后重点关注浏览器网络层。最后,为浏览器提供一些提高Web应用程序性能的技巧。概述现代浏览器是专门为快速、高效和安全地传输Web应用程序/网站的数据而设计和开发的。有数百个组件在不同级别运行,从进程管理和安全沙盒到GPU管道、音频和视频等等,Web浏览器更像是一个操作系统,而不仅仅是一个软件。浏览器的整体性能由许多大型组件决定:解析、布局、样式计算、JavaScript和WebAssembly执行、渲染,当然还有网络堆栈。通常,工程师将网络堆栈视为性能瓶颈。这种情况经常发生,因为从网络获取所有资源会阻塞其余的渲染过程。为了使网络层高效,它需要的不仅仅是一个套接字管理器。在我们看来,获取资源是一种非常简单的机制,但实际上它集成了自己的优化标准,一套完整的接口和服务平台。Web开发人员无需担心单独的TCP或UDP数据包、请求格式、缓存以及正在发生的所有其他事情。浏览器会处理这些复杂性,以便您可以专注于开发自己的程序。但是,了解其内部原理可以帮助开发人员开发出更高效、更安全的程序。本质上,当用户开始与浏览器交互时会发生以下情况:用户在浏览器的地址栏中键入URL地址。为了在指定的URL上找到网络上的资源,浏览器开始检查本地和应用程序缓存,并尝试使用本地副本来响应对资源的请求。当缓存不可用时,浏览器使用URL中的域名,然后根据域名从DNS中获取服务器的IP地址。如果有名称缓存,则不需要DNS查找。浏览器创建一条HTTP消息,指示它从远程服务器请求网页。消息被传递到TCP层,TCP层将自己的信息添加到HTTP消息头中。此信息是维护创建的会话所必需的。然后在IP层对消息进行处理,IP层的主要职责是找出用户将消息发送到远程服务器的路径。在HTTP报文的头部添加路径信息。将消息传输到远程服务器。收到消息后,将以类似方式返回响应数据。W3CNavigationTiming规范提供浏览器界面以及浏览器中每个请求背后的可视化计时和性能数据。让我们来看看这些组件,因为每个组件在实现最佳用户体验方面都发挥着重要作用。整个网络请求过程相当复杂,层次很多,每一层都可能成为性能瓶颈。这就是为什么浏览器使用各种技术来提高它们的性能,以便将整个网络通信的性能损失降到最低。下面看一些socket管理的新技术:source——由三部分组成:应用协议、域名和端口号(如https、www.example.com、443)socketpool——属于同一个source的一组socket套接字(所有主要浏览器都将套接字池限制为最多6个套接字)JavaScript和WebAssembly禁止开发人员操纵单个网络套接字的生命周期,这是相当明智的。这不仅可以节省您的头发,还可以让浏览器自动优化很多性能,包括套接字重用、请求优化和后期绑定、协议协商、强制连接限制和其他优化。事实上,现代浏览器更进一步,将请求管理周期与套接字管理分开。套接字池用于组织套接字,源用于对套接字进行分组,每个套接字池对其连接数和安全约束实施限制。排队,优先等待请求,并绑定到套接字池中的单个套接字。除非服务器主动关闭这些连接,否则多个请求可以自动重用同一个套接字。由于创建新TCP连接的额外性能开销,重用连接本身会带来巨大的性能提升。默认情况下,浏览器在发出请求时使用所谓的“keepalive”机制来节省创建与服务器的新连接所需的时间。创建新TCP连接的平均时间为:本地请求-23ms洲际请求-120ms洲际请求-225ms这种架构衍生了一些其他的优化方法。请求可以根据优先级以不同的顺序执行。浏览器可以优化所有套接字的带宽分配,或者它可以创建套接字来等待预期的请求。如上所述,这些由浏览器控制,无需开发人员干预。但这并不意味着我们无事可做。选择正确的网络通信模式、数据传输类型和频率、正确的协议类型以及服务器堆栈的正确隧道/优化对于提高整个程序的性能起着至关重要的作用。有些浏览器走得更远。例如,当您使用Chrome时,它??会随着用户的使用而学习自己变得更快。它根据访问过的网页和典型的浏览器模式进行学习,以便它可以预测可能的用户行为并在用户采取任何行动之前采取行动。最简单的示例是当用户将鼠标悬停在链接上时预呈现页面。如果想了解更多关于Chrome优化技巧的文章,可以查看High-PerformanceBrowserNetworking一书的https://www.igvita.com/posa/h...章节。Web安全和沙盒允许浏览器在单独的套接字上运行还有另一个非常重要的目的:浏览器可以对不受信任的程序资源实施一组一致的安全和策略约束。例如,浏览器禁止通过API直接访问原始网络套接字,因为这样做会允许任何可疑程序随意连接到任何主机。浏览器还强制执行连接限制,以防止服务器因客户端访问而耗尽其资源。浏览器格式化所有传出请求以强制执行格式正确且一致的协议语义来保护服务器。同样,浏览器会自动解码响应以保护用户免受可疑服务器的侵害。TSL协商传输层安全性(TLS)是一种为计算机网络提供通信安全性的加密协议。它被广泛应用于大量的应用程序中,其中之一就是浏览网页。网站可以使用TLS来保护服务器和Web浏览器之间的所有通信。整个TLS握手过程包括以下步骤:客户端向服务器发送“Clienthello”消息,其中包含客户端的随机值和支持的密码组合。服务器向客户端返回“Serverhello”消息,并附有服务器的随机值。服务器向客户端返回一个认证证书,并可能要求客户端返回一个类似的证书。服务器返回“Serverhellodone”消息。如果服务器要求客户端发送证书,则客户端发送它。客户端随机生成一个Pre-Master密钥并用服务器证书中的公钥对其进行加密,并将加密后的Pre-Master密钥发送给服务器。服务器收到预主密钥。服务器和客户端分别根据预主密钥生成一个主密钥和一个会话密钥。客户端向服务器发送“更改密码规范”通知,表明客户端将开始使用新的会话密钥来散列和加密消息。客户端还发送“客户端完成”消息。服务器收到“Changecipherspec”的通知,然后使用会话密钥将其记录层安全状态切换到对称加密状态。服务器向客户端返回“服务器完成”消息。客户端和服务器现在可以通过已建立的安全通道交换程序数据。客户端和服务器之间发送的所有信息都使用会话密钥加密。每当发生任何验证失败时,都会提醒用户。例如,服务器使用自签名证书。同源策略当两个页面的协议、端口(如果指定)和主机名相同时,它们被称为同源。以下是一些可能包含跨域资源的示例:中的JavaScript代码。语法错误的错误消息仅适用于同源脚本。的CSS。由于CSS的语法规则松散,跨源CSS需要正确的Content-Type标头。每个浏览器都有不同的限制。图像