分开的清单

菜单
一个渔夫从码头抛下鱼线的插图

插图道格麦弗森

服务器到客户端

在浏览器中发生任何事情之前,它必须首先知道去哪里。有多种方法可以到达某个地方:在地址栏中输入URL,点击(或点击)页面或其他应用程序中的链接,或单击收藏。不管怎样,所有这些都会导致所谓的导航。导航是任何Web交互的第一步,当它启动一系列事件的连锁反应时,这些事件会在加载的网页中达到高潮。必威官网网址多少

启动请求

文章如下

一旦向浏览器提供了要加载的URL,一些事情发生在引擎盖下面。

检查HSTS

第一,浏览器需要确定URL是否指定HTTP(非安全)方案。如果是HTTP请求,浏览器需要检查域是否在HSTS列表(HTTP严格传输安全)。此列表包括预加载列表和选择使用HST的以前访问过的站点列表;两者都存储在浏览器中。如果请求的HTTP主机在HSTS列表中,请求的是URL的HTTPS版本,而不是HTTP。这就是为什么你会注意到即使你试图在现代浏览器中输入http://www.bing.com,它会将您发送到https://www.bing.com。

检查服务人员

下一步,浏览器需要确定服务工作者可用于处理请求,这在用户脱机且没有网络连接的情况下尤为重要。服务工作者是浏览器中相对较新的功能。它们允许截取网络请求(包括顶级请求),从而使具有脱机功能的网站能够从脚本控制的缓存.

访问页面时可以注册服务人员,记录服务工作者注册和URL映射到本地数据库。确定是否安装了服务工作者与在该数据库中查找导航的URL一样简单。如果该给定URL存在服务工作者,它将被允许处理对请求的响应。如果新的导航预加载功能在浏览器中可用,网站利用它,浏览器还将同时向网络咨询初始导航请求。这是有益的,因为它允许浏览器不阻止可能较慢的服务工作者启动。

在没有服务工作者来处理初始请求的情况下(或者如果使用导航预加载),浏览器继续向网络层咨询。

检查网络缓存

浏览器,通过网络层,将检查缓存中是否有新的响应。这通常由缓存控制响应中的标题,在哪里设置最大年龄可以定义缓存项被视为新项的时间,设置没有商店指示是否应缓存它。当然,如果浏览器在其网络缓存中找不到任何内容,然后需要网络请求。如果缓存中有新的响应,为了加载页面而返回。如果找到了资源但不新鲜,浏览器可以将请求转换为条件重新验证请求,其中包含如果修改自如果没有匹配告诉服务器浏览器缓存中已有的内容版本的标题。服务器可以通过返回HTTP 304(未修改)没有尸体,或者通过返回HTTP 200(OK)使用资源的新版本进行响应。

检查连接

如果请求的主机和端口以前建立了连接,连接将被重用,而不是建立新的连接。如果没有,浏览器咨询网络层以了解是否需要执行域名服务器(域名系统)查找。这需要查看本地DNS缓存(存储在设备上)。而且,根据缓存的新鲜度,也可以咨询远程名称服务器(它们可以由Internet服务提供商托管)。这最终会导致浏览器连接到正确的IP地址。

在某些情况下,浏览器可能能够预测将访问哪些域,并且到这些域的连接可以被启动。该页面可以提示浏览器使用资源提示rel=“预连接”在链接标签上。使用资源提示很有帮助的一种情况是,如果用户在Bing搜索结果页面上,而且,人们期望前几个搜索结果最有可能被访问。在这种情况下,启动到这些域的连接有助于避免以后单击这些链接时需要支付DNS查找和连接设置的费用。

建立连接

浏览器现在可以与服务器建立连接,这样服务器就知道它将同时发送到客户机和从客户机接收。如果我们使用热释光,我们需要执行一个TLS握手来验证服务器提供的证书。

将请求发送到服务器

将通过此连接的第一个请求是顶级页请求。通常情况下,这将是一个从服务器返回到客户机的HTML文件。

处理响应

当数据被传输到客户机时,分析响应数据。第一,浏览器检查响应的标题.HTTP报头是作为HTTP响应的一部分发送的名称-值对。如果响应头指示重定向(例如,通过位置标题)。浏览器重新启动导航过程,并返回到检查是否需要升级HSTS的第一步。

如果服务器响应被压缩或分块,浏览器将尝试解压缩并卸载它。

在读取响应时,浏览器还将开始将其并行写入网络缓存。

下一步,浏览器将尝试了解发送到浏览器的文件的mime类型,因此,它可以适当地解释如何加载文件。例如,图像文件将作为图像加载,而HTML将被解析和呈现。如果使用了HTML解析器,对响应的内容进行扫描,查找可能要下载的资源的URL,以便浏览器能够在页面开始呈现之前提前启动这些下载。本系列的下一篇文章将更详细地介绍这一点。

至此,请求的导航URL已输入浏览器历史记录,这使得它可以在浏览器的后退和前进功能中进行导航。

这是一个流程图,它向您概述了迄今为止所讨论的内容,再详细一点:

显示从服务器到客户端路径的流程图
单击以获取全尺寸图像

如你所知,页面将继续发出请求,因为页面上有许多对整体体验很重要的子资源,包括图像,javascript,和样式表。此外,这些子资源中引用的资源,例如背景图像(在CSS中引用)或由取()导入(),或阿贾克斯电话。没有这些,我们只有一个没有太多交互性的纯页面。正如您在前面的解释和流程图中看到的,请求的每个资源部分受浏览器缓存策略的影响。

高速缓存

如前所述,浏览器管理网络缓存,它允许以前下载的资源在许多情况下被重用。这对于基本不变的资源尤其有用,例如来自框架的徽标和JavaScript。尽可能利用这个缓存是很重要的,因为它可以通过重用本地可用的缓存资源来帮助减少传出网络请求的数量。反过来,这有助于最大限度地减少所需的费力且潜在的操作,提高页面加载时间。

当然,网络缓存具有一个配额,该配额既影响将存储的项目数,也影响存储的时间。这并不意味着网站在这件事上没有发言权。响应中的缓存控制头控制浏览器的缓存逻辑。在某些情况下,建议浏览器不要缓存任何项目(例如缓存控制:无存储)因为它总是不同的。在其他情况下,让浏览器通过缓存控制:不可变,因为给定URL的响应永远不会更改。在这种情况下,使用不同的URL指向同一资源的不同版本是有意义的,而不是更改同一URL的资源,因为始终使用缓存版本。

当然,网络缓存不是浏览器中唯一的缓存类型。有一些编程缓存可以通过JavaScript加以利用。明确地,在上面给出的服务人员的例子中,服务工作人员可以截获对顶级页面的初始资源请求,然后可以使用由站点通过其编程缓存之一定义的缓存项。这很有用,因为它使网站能够更好地控制缓存项的使用时间。这些缓存是源站绑定的,这意味着每个域都有自己的沙盒缓存集,它可以控制与另一个域的缓存隔离的缓存集。

原点模型

源站只是一个由方案/协议组成的元组,主机名,还有港口。例如,https://www.bing.com:443具有https协议,www.bing.com主机名,443作为港口。如果其中任何一个与另一个来源不同,它们被认为是不同的起源。例如,https://images.bing.com:443和http://www.bing.com:80是不同的起源。

原点是浏览器的一个重要概念,因为它定义了如何对数据进行沙盒化和安全保护。在大多数情况下,出于安全目的,浏览器强制同一原产地政策,这意味着一个源站不能访问另一个源站的数据,这两个源站都需要相同的源站。明确地,在前面介绍的缓存案例中,https://images.bing.com:443和http://www.bing.com:80都看不到另一个的编程缓存。

如果bing.com想要加载来自microsoft.com的javascript文件,它将发出一个跨源资源请求,在该请求上浏览器将强制执行相同的源策略。为了允许这种行为,微软需要通过指定CORS与必应网合作。(跨源资源共享)使bing.com能够从microsoft.com加载javascript文件的头文件。设置正确的CORS头文件是一个很好的实践,这样浏览器就可以适当地处理跨源代码的资源请求。

结论

现在,您知道了我们如何从服务器到客户机,以及如何在两者之间保持调优,以了解加载网页的下一步:如何从HTML标记到DOM。

关于作者

4读者意见

加载注释