作者：杰里米·瓦格纳
原始链接：不要
翻译：Yodonicc
了解什么是浏览器预加载的扫描仪，如何帮助提高性能以及如何受到影响。
对优化页面速度的忽视之一是对浏览器的内部结构有一定的了解。浏览器已被优化以提高性能，但我们不能作为开发人员做到这一点 - 但前提是我们不能意外地阻碍阻碍阻碍这些优化。
需要理解的浏览器的内部优化是浏览器的预加载扫描仪。在本文中，我们将讨论预加载的扫描仪如何工作，更重要的是，如何避免阻碍它。
每个浏览器都有一个主要的HTML解析器，该解析器标记了原始标记并将其作为对象模型进行处理。所有这些都会愉快地执行，直到找到资源时将解析器暂停，例如装有元素的样式表，或装有元素，但没有属性。
图1：如何阻止浏览器的主HTML解析器。在这种情况下，解析器遇到了外部CSS文件的元素，这阻止了浏览器对文档其余部分的分析，甚至渲染了任何文档，直到CSS为下载并解析。
对于CSS文件，可以防止解析和渲染以防止无法言喻的内容（FOUC）的闪光，也就是说，在将样式应用于页面之前，您可以简要看到未经许可的版本。
图2：fouc.on的模拟示例。不会立即发生任何样式的状态。
当浏览器遇到NO或属性的元素时，它也将防止页面解析和渲染。
默认情况下，从具有属性的元素加载的脚本将延迟。
这样做的原因是，当主HTML解析器仍在执行工作时，浏览器无法确定任何特定脚本是否会修改DOM。这就是为什么在文档末尾加载JavaScript的JavaScript是一种常见的方法，是一种常见的方法，使分析和渲染的影响变得微不足道。
这些是浏览器防止解析和渲染的充分原因，但是这两个重要步骤都是可取的，因为它们会延迟发现其他重要资源并延迟显示屏。级别的HTML解析器称为预加载的扫描仪。
图3：描述预载扫描仪如何与主HTML解析器平行工作以推测资源的图。在这里，由于元素中的图像标签，主要的HTML解析器被阻止，但是可以在原始标记中看到预加载的扫描仪，找到图像资源，然后将主HTML解析器提起。在阻塞之前加载。
推测预加载的扫描仪的作用，也就是说，它检查了原始标记，以找到机会在主HTML Parser发现资源之前获得这些资源。
预加载扫描仪的存在是由于渲染和分辨率引起的。如果这两个性能问题不存在，则预加载的扫描仪不会很有用。找出网页是否从预加载的扫描仪中受益，关键取决于这些阻止现象。为了做到这一点，我们可以引入人工延迟，以查找预加载扫描仪的工作位置。
让我们看一下带有样式表的基本文本和图片。由于CSS文件还可以防止渲染和分析，因此我们可以通过代理服务作为样式表介绍两秒钟的人工延迟。此延迟使其更容易。让我们在网络瀑布图中查看预载扫描仪的工作。
图4：在移动设备上，在移动设备上模拟了WebPagetest网络瀑布，以模拟在Chrome上运行的网页。尽管样式表在加载之前被人工延迟人为地延迟了，但标记的有效负载背后的图像是预加载扫描仪。
正如您在瀑布图中看到的那样，即使渲染和文档分辨率被阻止，预加载的扫描仪也可以找到元素。没有此优化，浏览器在阻止期间无法及时获取内容，并且会有更多资源请求是连续而不是并发。
以这个玩具的例子，让我们看一下在现实世界中可能被击败预加载的扫描仪的模式，以及如何解决这些问题。
这些模型不是详细的列表，而是一些常见模型。
假设您的HTML包含一些内部关节JavaScript，因此。
注入的脚本默认情况下是异步的，因此，当注入此脚本时，其行为就像被应用。这意味着它将尽快运行而不会阻止渲染。工会是外部CSS文件元素的结果，我们将获得卓越的结果。
图5：在移动设备上，在移动设备上模拟了WebPagetest网络瀑布，以模拟在Chrome上运行的网页。此页面包含一个样式表和一个异步脚本注入。可以找到脚本，因为它在客户端注入。
让我们分析这里发生了什么。
这是不令人满意的，因为脚本的请求仅在下载样式表之后才发生。该脚本会尽快从运行中延迟。这可能会影响页面的交互时间（TTI，交互式的时间）。相反，因为可以在服务器提供的标签中找到该元素，因此可以由扫描仪预装。
那么，如果我们使用具有属性的普通标签而不是将脚本注入DOM，会发生什么？
这是结果。
图6：在移动设备上，在移动设备上模拟了WebPagetest网络瀑布，以模拟在Chrome上运行的网页。此页面包含一个样式表和异步脚本元素。预装的扫描仪在渲染过程中找到了脚本与CSS同时加载并加载。
有些人可能会认为可以通过使用解决这些问题。这当然是可行的，但是它可能会带来一些副作用。全部，为什么它用来解决可以通过不注入DOM中的元素来避免的问题？
图7：WebPagetest网络瀑布映射，移动设备上的Chrome浏览器通过模拟3G连接运行。此页面包含一个样式表和注入异步脚本，但已预加载异步脚本以确保其更早发现。
预先加载“解决”这里的问题，但它引入了一个新问题：前两个演示中的异步脚本 - 尽管它已加载到中间 - “低”优先级加载“最高”优先级。安装了异步脚本演示，样式表仍在“最高”优先级中加载，但是脚本的优先级已增加到“高”。
资源优先级可以在现代浏览器的网络标签中找到。特别是对于Chrome DevTools，您可以正确单击标题以确保可见优先级列。请确保在多个浏览器中测试，因为资源优先级与浏览器和其他其他浏览器不同因素。
当提出资源的优先级时，浏览器将把更多的带宽分配给它。这意味着即使样式表具有最高优先级，脚本的优先级可能会导致带宽的争论。这可能是慢速连接的因素，或者如果资源很大。
此处的答案很简单：如果您在启动过程中需要脚本，请不要通过将其注入DOM来破坏预加载的扫描仪。测试元素的位置，以及诸如和其他属性之类的属性。
Ilya Grigorik撰写了一篇文章，其中包含丰富的内容，以详细介绍注射的异步脚本。如果您想了解此主题，请阅读。
懒负载是保存数据的好方法。这种方法通常在图片中使用。但是，有时懒负荷被错误地应用于“上方折叠”图片，可以说。
这将潜在的资源引入了预载扫描仪中的发现问题，并且不必延迟参考，下载，解码和显示图片所需的时间。LET以此图像为示例。
前缀是由JavaScript驱动的懒惰装载机的常见模式。当图片滚动到视口时，懒惰装载机将删除前缀，也就是说，在上一个示例中，它变成了此更新提示浏览器以获取资源。
此模式在启动时将其应用于视口中的图像之前。更糟糕的是，图像被延迟，直到懒惰装载机的JavaScript下载，编译和执行懒货人加载程序为止。
图8：在移动设备上，在移动设备上模拟了WebPagetest网络瀑布，以模拟在Chrome上运行的网页。尽管启动图像资源时，在视口上可见图像资源，但不必要地将其懒洋洋地加载。这会破坏预加载的扫描仪，并导致不必要的延迟。
根据图像的大小，它可能取决于视口的大小 - 它可能是最大内容绘画（LCP，Larget content Funpers Paint）的候选元素。当预加载的扫描仪无法预先获得图像资源时，当页面的样式表停止渲染时，可能会影响LCP。
重要的
有关优化LCP的更多信息，它超出了本文的范围，请阅读最大内容的绘画。
解决方案是更改图像标记。
这是启动期间视口中图像的最佳模式，因为预载的扫描仪会更快地找到并获得图像资源。
图9：在移动设备上，在移动设备上模拟了WebPageTept网络瀑布，以模拟在Chrome上运行的网页。预载的扫描仪在启动CSS和JavaScript之前发现了图像资源，这为浏览器提供了加载时的第一个机会图片。
在这个简化的示例中，LCP在缓慢的连接下增加了100毫秒。这似乎不是一个巨大的改进，但是当您认为该解决方案是快速标记的维修时，大多数网页比这套网页更为复杂例如，这是一个巨大的进步。这意味着LCP候选人可能必须更广泛地使用许多其他资源，因此这样的优化变得越来越重要。
重要性
图片不是唯一可能受懒惰懒惰加载模式影响的资源类型。元素也会受到影响。由于元素可以加载许多子资源，因此对性能的影响可能会恶化。
请记住，浏览器的预加载扫描仪将扫描标签。它不会扫描其他资源类型，例如CSS，这可能涉及引用的图像的检索。
像HTML一样，浏览器将CSS处理到其自己的对象模型中，称为CSSOM。如果在构造CSSOM时发现了外部资源，则在找到这些资源时请求这些资源，而不是预载的扫描仪。
假设您的页面的LCP候选者是具有CSS属性的元素。以下是加载资源时发生的情况。
图10：在移动设备上，网页在连接到移动设备上连接到Chrome浏览器的网页上运行。此页面上的LCP候选器是带有CSS属性的元素（第3行）。它要求的图像不会在CSS解析器找到它之前开始获取它。
在这种情况下，预加载的扫描仪没有被击败，但没有参加。
防范措施
如果您的LCP候选者来自一个来自一个CSS属性，但是图像根据视口的大小而变化，则需要在元素上指定属性。
该提示很小，但是可以帮助浏览器比其他方式更早地查找图像。
图11：移动设备上的模拟3G连接到Chrome的WebPagetest网络瀑布地图。页面上的LCP候选者是具有CSS属性的元素（第3行）。浏览器可以找到大约250毫秒的图像比不提示更快。
通过此提示，LCP候选者将更快地发现，从而减少LCP时间。尽管提示有助于解决此问题，但更好的选择可能是评估您的图像LCP候选者是否必须从CS.中加载。控制适合视口的加载图像，同时允许预加载的扫描仪找到它。
毫无疑问：JavaScript肯定会影响页面的速度。我们不仅依靠它来提供互动，而且我们还倾向于依靠它来提供内容本身。这将在某些方面带来更好的开发者体验；但是，开发人员的利益并不总是转换为用户的兴趣。
可以无效预载扫描仪的一种模式是使用客户端JavaScript呈现标记：
图12：移动设备上的移动设备上运行的客户端显示了网页的WebPagetest网络瀑布地图。由于内容包含在JavaScript中，并取决于框架，客户端显示的标签中的图像资源是隐藏的对于预加载的扫描仪。等效服务器渲染体验如图9所示。
当标记的有效负载包含在浏览器中并完全由JavaScript渲染时，标签中的任何资源都不可见到预加载的扫描仪中。这延迟发现重要资源，这当然会影响LCP.In这些示例与没有JavaScript的服务器渲染体验相比，对LCP图片的请求大大延迟了。
这与本文的重点有些偏离，但是客户渲染标记的影响远远超过了对预加载的扫描仪的损害。首先，引入JavaScript来推动不必要的体验，这将引入不必要的处理。时间，会影响“下一个绘画”下一个油漆（INP）的相互作用效果。
此外，与服务器相同的标记数量相比，它更有可能在客户端上生成更长的任务。此外，此外，请注意JavaScript中涉及的其他处理 - 是服务器流传输标记中的浏览器避免长期任务渲染。另一方面，客户端提出的标签被视为一个整体任务，这可能会影响页面的响应指标，例如总阻塞时间（TBT），除了INP或INP外第一输入延迟（FID）。
这种情况的补救措施取决于此问题的答案：是否有任何理由解释为什么服务器无法提供您的页面标记而不是客户端？SSR）或静态生成的标签应尽可能多地考虑，因为这将有助于预加载扫描仪，并有机会获得重要的资源。
如果您的页面确实需要JavaScript将功能附加到标记的页面的某些部分，则仍然可以使用SSR，或使用Vanilla JavaScript或水合来获得两者在美国的效果。
预加载的扫描仪是一种非常有效的浏览器优化，可以在启动时更快地加载页面加载。通过避免避免事先发现重要资源的能力，您不仅可以使开发更加轻松，而且还可以创建更好用户体验。这将为许多指标带来更好的结果，包括Web Pagesessence的一些关键指标
回顾过去，以下内容是您想从本文中获得的。
如果由于某种原因，您无法避免对预加载扫描仪加速性能的能力产生负面影响的方式，则可以考虑资源提示。如果您确实使用它，请在实验室工具中进行测试以确保其带来您期望结果。在本文中，不要预先安装太多资源，因为当您优先考虑一切时，就不会。
图像来源：摘自Unsplash，作者Mohammad Rahmani。
注意：特别感谢技术指导Dazhao（Zhao da）回顾了本文的翻译。
原始：https：//juejin.cn/post/7098374807275700232