跳到内容
新问题

对这个项目有疑问吗?注册一个免费的GitHub帐户以打开一个问题,并联系其维护者和社区。

单击“注册GitHub”,表示您同意我们的服务条款隐私声明。我们偶尔会向您发送与帐户相关的电子邮件。

已经在GitHub上了?登录到您的帐户

推测规则-导航预取和预渲染 #620

正常开放
杰里米已打开此问题2022年3月16日·11条评论
正常开放

推测规则-导航预取和预渲染 #620

杰里米已打开此问题2022年3月16日·11条评论
受让人

评论

@杰里米罗曼
复制链接

杰里米 评论2022年3月16日

Mozilla对新兴Web规范的立场请求

其他信息

#613(评论):

Chrome在5月份发布了相同的原始预渲染。我们现在希望将其扩展到跨源的相同面预渲染,例如https://a.example.com/预渲染https://b.example.com/.这个包括凭据/存储访问,因为这些都是站点键控的,但它还需要通过新的HTTP响应头从目标站点进行opt-in,支持-加载-模式:凭据prefernder,以保护原产地安全边界。

我们在中更新了规范和解释程序WICG公司/导航投机@16570ff最相关的阅读材料可能是:

@科姆切尼
复制链接

你好。我们对推测规则语法进行了扩展,以允许显式设置推测请求的referrer策略。这方面的一个关键用例是允许具有宽松引用策略的站点通过使用专门用于预取的严格策略来采用跨站点预取。

解说员:https://github.com/WICG/nav-spection/blob/main/triggers.md#显式-推荐人政策
规格:https://wicg.github.io/nav-spection/speculation-rules.html

(请注意,在撰写本文时,该规范的最新版本尚未在该链接上发布,但应该很快就会发布。)

请看一看。

@杰里米罗曼
复制链接
作者

只需在此处添加一条注释,就可以提到Chrome计划很快使用此功能的扩展子集进行试验,特别是包括文档规则,一个HTTP响应标头作为使用内联的替代方法<脚本>,以及与提议的集成性能资源计时交付类型以使作者能够确定是否从预取缓存提供导航。

谢谢!

@bgrins公司
复制链接
成员

你好@杰里米罗曼,我有一个问题-我试图从Chrome和一些示例URL中收集使用情况,我确实在中看到了页面加载的百分比https://chromestatus.com/metrics/feature/timeline/publicaty/3932显示超过4%,但“在顶级站点上采用该功能”部分为空,并且当我在BigQuery中运行底部的示例查询时返回空结果:

#标准SQL选择yyyymmdd,客户端,pct_urls,sample_urlsFROM`httparchive.blink_features.usage`WHERE feature=“推测规则”按yyyymmdd DESC订购,客户

下午1点37分14分截图2022-12-16

你知道这些数据是怎么回事吗?

@R层
复制链接

您好!@bgrins公司,HTTP Archive依赖于一个需要一段时间才能更新的爬网,并且没有涵盖我们在Chrome中看到的所有情况。尤其是,我怀疑HTTPArchive是否包含搜索引擎的任何结果,这是推测规则的主要用例之一。也就是说,现在看起来确实列出了几个URL:

形象

但Google.com肯定也在使用此功能,这可能是您最感兴趣的案例。Jeremy可能错过了GitHub通知您的评论,但请随时联系我们(例如。rbyers@chromium.org/jbroman@chromium.org)如果我们能做些什么来帮助测试和评估。

@杰里米罗曼
复制链接
作者

对反应迟缓表示歉意并表示感谢@R层为了快速总结。我们试图从内部调查提供这些信息的存档数据到底涵盖了哪些内容,没有涵盖哪些内容,并且不确定谷歌移动SERP(正如Rick提到的那样,它是野外最大的用户之一)是否有意不编入索引,是否由于数据收集方法的某些怪癖(例如,User-Agent字符串)而被遗漏,或者其他什么。

在假期之前,我们没有找到一个很好的答案(后来我生病了),但里克的答案涵盖了整个结论。

@丰盛主义
复制链接

你好。我们有关于推测规则应该如何与内容安全策略交互的增量更新。

解说员:https://github.com/WICG/nav-spection/blob/main/triggers.md#content-证券政策

我们添加了内容安全策略部分,以阐明推测规则如何与现有内容安全策略交互,并解释新的源关键字“内联特定规则".

我们还添加了内容安全策略部分,以解释动机并显示内容安全策略的规范修补程序。
规范(差异):https://storage.googleapis.com/spec-previews/WICG/nav-spection/pull/245/diff/spection-rules.html

简而言之,我们澄清了CSP中如何处理推测规则,并提供了一个新的源关键字,以允许安全的内联推测规则,而不允许在严格的CSP环境下使用不安全的内嵌脚本。下面是一个使用示例。

<meta-http-equiv=“内容安全策略”Content=“script-src'内联推测规则'”><!-- 这很有效!!--><script type=“推测规则”>...</script><!-- 这会导致CSP违规--><脚本>console.log(“你好”);</script>

@利维尤蒂塔
复制链接

你好。我们对推测规则语法进行了扩展,以便在推测请求上显式设置No-Vary-Search提示。该提示很有用,因为如果在预取标头从服务器返回之前进行导航,则依赖No-Vary-Search标头与导航匹配的预取对用户没有好处。使用该提示,web浏览器将等待匹配的正在进行的预取,并将预期但验证No-Vary-Search提示是否与No-Vary_Search标头匹配。如果No-Vary-Search提示与收到的No-Vary_Search标头不匹配,则web浏览器将向服务器发送新请求。

解说员:https://github.com/WICG/nav-spection/blob/main/triggers.md#no-vary搜索-分
规格:https://wicg.github.io/nav-spection/speculation-rules.html
无Vary-Search标头位置请求:#717

(请注意,截至本文撰写之时,该规范的最新版本尚未在该链接上发布,但应该很快就会发布。)
请看一看。

@zcorpan公司 zcorpan公司更改了标题请求Mozilla对新兴Web规范的定位:推测规则(预取) 推测规则(预取) 2023年8月17日
@尼罗基
复制链接

嗨,我们正在扩展推测规则的语法,以允许开发人员指定目标提示字段。

该字段提供了一个提示,用于指示最终将激活预呈现页面的可导航目标。例如,当_空白指定为提示,则可以为打开的可导航页面激活预呈现页面window.open()窗口。该字段对预取没有影响。

<脚本 类型=投机规则>
{
  “预渲染”:[{
    “目标提示”:“_blank”,
    “URL”:[“page.html”]
  }]
}
</脚本>
< 目标="_空白"href公司="页面.html">点击我</>

请参阅解释者了解此扩展的动机。

解说员:https://github.com/WICG/nav-spection/blob/main/triggers.md#窗口-名称目标-分
规格:https://wicg.github.io/nav-spection/speculation-rules.html
Chrome平台状态:https://chromestatus.com/feature/5162540351094784

@zcorpan公司 zcorpan公司更改了标题推测规则(预取) 推测规则-导航预取和预渲染 2024年4月5日
@zcorpan公司
复制链接
成员

zcorpan公司 评论2024年4月5日

我们认为这个用例很好,当预呈现的页面被导航到时,用户体验看起来很吸引人。

我们在JSON语法和新查询语言的引入方面做了很多努力。我们有选择器,似乎可以向选择器添加URL模式。

此外反驳<链接>在解释器中可以在不跳到JSON语法的情况下解决。解释者甚至说新的rel值是可能的。由于“预取”被改为子资源预取,现在这个术语甚至与推测规则vs链接关系都混淆了。为什么不使用导航预渲染导航预取作为新的rel值?让他们继续努力<a>此外,要启用预呈现或预取特定链接,可以在其中应用所有现有属性(如目标,参考政策等)?列出多个URL可以是一个新的空格分隔或逗号分隔属性(如srcset)。

例子:

<链接 相对="导航预渲染"选择器=":link href('/*'):否(:link href('/logoout?*'),.no预取*)">
<链接 相对="导航预取"href集="next.html、next2.html"要求="匿名-客户-何时跨来源"参考政策="无继电器">...< href公司="其他.html"目标="_空白"相对="导航预渲染">其他</>

外部投机规则的动机是“那会很方便“,但这可能适用于任何HTML元数据?是否有必要支持外部规则?

(已存档WICG/nav-投机#307用于上述内容。)

就CPU时间和网络带宽而言,错误预测预呈现(即获取、解析和不使用渲染)的成本似乎很高。如果该功能在未来被广泛采用,是否有一个故事可以最小化浪费的预渲染?

@bgrins公司
复制链接
成员

除了浪费的预呈现对性能的负面影响外,预呈现的另一个缺点是,它通过添加一种特殊模式(DelayWhilePrerendering)增加了整个平台的复杂性,这种模式可能会影响实现者和作者的其他所有API的行为。这对于让预渲染实际加载页面的设计至关重要。

使用子资源预取完全避免了这种复杂性,因此从这个角度来看,这是一个非常有吸引力的选项。我想了解更多有关此评论的信息,以及您在NoState预取方面的经验https://github.com/WICG/nav推测/bob/main/prerendering same site.md#预取-带子资源:

根据一些初步的性能测试,Chromium发现使用子资源预取对我们的用户来说是一个糟糕的中间地带:与主文档预取相比,这将导致明显更多的资源消耗,但加载速度仅略快。

与(a)正常预取和(b)完全没有推测相比,资源消耗增加了多少,加载速度提高了多少?新的预渲染功能有哪些相同的数字?具体是什么导致了NoState和预呈现之间的性能差异?它主要是执行页面加载本身,新文档中没有推测的后续请求,还是其他什么?

@圆顶的
复制链接
贡献者

谢谢@zcorpan公司@bgrins公司感谢你插嘴!这里似乎有一些问题。

首先,我们想再次强调,这里至少有三项单独的努力,你们发出的明确信号对所有这些努力都很有价值:

  • 导航预取。这可能由浏览器触发(例如,在URL栏中键入,将鼠标悬停在书签上等)。或者它可能是由web开发人员使用诸如推测规则或您的新技术触发的<链接>建议。

    听起来这项技术本身并没有什么大问题?(抛开特定的触发机制。)如果是这样的话,这对我们来说很有价值,因为在Mozilla的支持下,这意味着我们可以开始上游https://wicg.github.io/nav-spection/prefetch.html转换为HTML。请注意,即使触发器是浏览器UI,我们仍然需要明确的规范来说明它是如何工作的,例如通过预取发送哪些特殊的HTTP头,或者它如何影响导航计时API。

  • 导航预渲染。同样,这可以通过多种方式触发。

    在对用户体验的影响方面,这里似乎有一些支持,但也存在效率和实现复杂性方面的担忧。我们将在下面讨论更多内容。

    同样,如果Mozilla除了支持特定的触发机制之外,还支持将其上传到HTML中,那就太好了。

  • 推测规则JSON语法。听起来你对此有明确的担忧。让我们在讨论考虑扩展<链接>和选择器WICG/nav-投机#307.


就CPU时间和网络带宽而言,错误预测预呈现(即获取、解析和不使用渲染)的成本似乎很高。如果该功能在未来被广泛采用,是否有一个故事可以最小化浪费的预渲染?

关于预渲染的性能影响,重要的是要记住,一个典型的网页加载了许多其他从未与之交互的网页:例如,iframe中的广告。由于预渲染如何延迟预渲染页面中跨源iframe的加载,以及布局和绘制(如果浏览器愿意)如何延迟到激活,我们发现预渲染页面对用户的CPU和带宽的典型成本与单个iframe大致相同。因此,尽管我们当然希望保持谨慎,但最好记住问题的规模。

HTTP缓存的预取和预呈现使用也有助于减少浪费。通常,对于相同的原始预渲染,会重用许多资产(站点范围的CSS、JS、徽标等),因此额外的成本是由文档本身造成的(通常是非常小)、和媒体(通常惰性加载). 即使不使用推测,它仍然可以帮助缓存为将来的使用做好准备,因此通常不会完全浪费(例如,如果预渲染了产品a,但随后导航到产品B)。

我们对预呈现作为一流技术感到兴奋的一个原因是,它处于用户代理的控制之下。如果没有在浏览器中进行预渲染,那么如果页面作者想要获得即时体验,他们需要通过将应用程序转换为单页应用程序来进行“预渲染”,然后手动在屏幕外渲染下一页的内容并进行DOM交换。这非常复杂,所以您只能在高资源SPA上看到它。但它对用户代理来说也是不透明的。

通过基于MPA的导航预加载,浏览器可以完全控制预渲染资格。例如,当用户在内存压力下处于“节电”模式、“数据保存”模式或仅选择通过其设置页面禁用预加载时,Chromium会阻止预渲染。也有自动限制可以进行多少预渲染。用户代理还可以很好地实现更复杂的触发试探法,从而提高精度(将浪费的资源降至最低),同时仍然具有使预加载可行和有用的召回/提前期。最后,可以在调度算法中有意降低预渲染过程的优先级。当页面自己进行“预呈现”时,他们通常对用户的资源不太认真。

顺便说一句,类似的推理也适用于导航预取:与手动使用获取()<link rel=“预取”>要启动HTTP缓存,导航预取可以更显式地可选,因为我们知道web开发人员的意图。

这也是我们迄今为止坚持到底的原因反对暴露正在进行的预渲染的状态。我们希望使页面相对难以依赖预渲染:用户代理应该始终可以拒绝预渲染请求,或收回预渲染的可导航页面。(也就是说,我们反复收到web开发人员的请求,要求公开这种状态;参见例如。WICG/nav-投机#306WICG/nav-推测#162。我们希望这种请求的大部分动机将通过自动从预提交返回到预取来解决。)

所以,是的,我们认为有一个很好的故事来最小化浪费的预渲染:)。


除了浪费的预呈现对性能的负面影响外,预呈现的另一个缺点是,它通过添加一种特殊模式(DelayWhilePrerendering)增加了整个平台的复杂性,这种模式可能会影响实现者和作者的其他所有API的行为。这对于让预渲染实际加载页面的设计至关重要。

是的,预渲染的实现复杂性很大。我们发现开发人员的兴奋和它生成的度量的移动是值得的,但我们理解这种不情愿。如果有帮助的话,我们很乐意就我们所面临的挑战进行更多的讨论。但与此同时,我们希望,作为第一个实现者,通过编写详尽的规范和测试集,我们可以减轻第二个实现的负担。

与(a)正常预取和(b)完全没有推测相比,资源消耗增加了多少,加载速度提高了多少?新的预渲染功能有哪些相同的数字?

弄清楚我能准确分享哪些数据是很困难的。但让我引用一些我们的公开数据,以及我能够找到的关于NSP-vs-prefetch现场实验的一些新信息。

  • 比较从谷歌搜索结果页面到搜索结果的行程的NSP和预取,我们发现NSP的字节成本增加了两倍,LCP的影响相对提高了+14%。因此,他们选择对前两个结果执行预取,而不是对前一个结果执行NSP,这样可以获得更好的命中率。这就是我们停止使用子资源进行预取的原因,因为它没有像预呈现那样提供即时页面加载,但我们至少从一个大型数据集中获得了证据,表明简单的预取是一种更好的折衷。

  • 对于使用预渲染的其他客户,如Google Search本身(例如。谷歌网站->搜索结果页面),与预取相比,预呈现的资源使用量可以忽略不计。正如上面所讨论的,将预呈现与iframe进行比较:一旦您已经支付了生成主响应体的服务器端成本,那么在空闲时间运行JS并获取可缓存的子资源就不是什么大问题。

  • 看着我们TPAC 2023演示,您将看到,对于在Android上使用推测规则的页面,预取页面的LCP为0.9x,而预渲染页面的LCP为0.72x。自那时以来,投机规则的使用增加了约10倍,因此这些数字可能仍然不准确,但希望它们能有所帮助。

  • 对于此后发生的一个大型外部合作伙伴部署,预取页面的LCP为0.7x,预呈现页面的LCP=0.3倍(在桌面上降到216毫秒,在Android上降到265毫秒,P50)。

(如果你有更具体的问题可以用数据来回答,我可以试着看看我们是否还有更多可以挖掘的东西,并获得分享的批准。然而,这个过程有点繁重,所以如果我们把它留到真正能改变Mozilla优先级的情况下,我将不胜感激。)

然而,请注意,除了对资源使用的任何担忧之外,我们还看到合作伙伴请求使用子资源恢复预取:WICG/nav-投机#305。基本的总结是导航预取还不够令人兴奋——核心功能是更受用户尊重的<link rel=预取>,即使在不支持HTTP的页面上也可以使用。然而,在存在许多第三方资源的情况下,预渲染有时很难采用,例如尚未预渲染的分析脚本。因此,我们可能会在下一个季度探索预取与子资源。

具体是什么导致了NoState和预呈现之间的性能差异?它主要是执行页面加载本身,新文档中没有推测的后续请求,还是其他什么?

这取决于场地。对于简单的静态站点,区别主要在于设置新流程、创建所有全局JavaScript对象以及初始布局和绘制。对于复杂的SPA,需要大量的JavaScript处理和子资源获取,特别是需要额外的服务器往返才能获得主要内容。您可以通过对任何给定站点进行跟踪并删除所有静态可发现的资源获取时间来回答这个问题。或者,至少对于一些具有良好缓存标头的站点,您可以注意到NSP预取加载与正常的热HTTP-cache加载基本相同,这通常与预渲染的即时(<200 ms)体验不同。

免费注册 在GitHub上加入此对话.已经有帐户了吗?登录以发表评论
标签
还没有
项目
状态:需要拟议职位
开发

没有分支或拉请求

9名参与者