加载的资源的加载顺序行为不一致<link rel="preload"> （铬合金）

Question

I'm experimenting with dynamically adding <link rel="preload"> tag for loading font files based on the user connection navigator.connection.effectiveType , eg if effective type is '4g' inject <link as="font" type="font/woff2" rel="preload" crossorigin="anonymous" href="inter-var.woff2"> in the head tag before any other resources, if connection is 'slow-2g' / '2g' / '3g' don't inject link .我正在尝试动态添加<link rel="preload">标签以根据用户连接navigator.connection.effectiveType加载字体文件，例如，如果有效类型为“4g”，则注入<link as="font" type="font/woff2" rel="preload" crossorigin="anonymous" href="inter-var.woff2">在任何其他资源之前的head标签中，如果连接是 'slow-2g' / '2g' / '3g' 不要'注入link 。

I'm also loading other resources using preload , but they are not as critical as fonts thus they are injected after the font files.我还使用preload加载其他资源，但它们不如 fonts 重要，因此它们是在字体文件之后注入的。

<head>
  // some other code
  <script id="connection-type-checker">
    (() => {
      const inter = document.createElement('link')
      const interItalic = document.createElement('link')
      const firaCode = document.createElement('link')

      inter.as = 'font'
      inter.type = 'font/woff2'
      inter.rel = 'preload'
      inter.crossOrigin = 'anonymous'
      inter.href = 'inter-var.woff2'

      interItalic.as = 'font'
      interItalic.type = 'font/woff2'
      interItalic.rel = 'preload'
      interItalic.crossOrigin = 'anonymous'
      interItalic.href = 'inter-var-italic.woff2'

      firaCode.as = 'font'
      firaCode.type = 'font/woff2'
      firaCode.rel = 'preload'
      firaCode.crossOrigin = 'anonymous'
      firaCode.href = 'fira-code.woff2'

      const insertAfter = (newNode, referenceNode) => referenceNode
        .parentNode.insertBefore(newNode, referenceNode.nextSibling)

      const target = document.getElementById('connection-type-checker')

      insertAfter(inter, target)
      insertAfter(interItalic, target)
      insertAfter(firaCode, target)
    })()
  </script>

  // **This is where <link>s get injected**

  // some other code...

  <link as="script" rel="preload" href="script.js" crossorigin="anonymous">
</head>

The problem I'm facing is that Chrome doesn't keep the original order for resources loaded with link preload if the link element was created with JavaScript (if link elements are inlined as HTML in the head tag everything works as expected).我面临的问题是，如果link元素是使用 JavaScript 创建的（如果链接元素在head标记中内联为 HTML，一切都按预期工作），Chrome 不会保留使用链接预加载加载的资源的原始顺序。

Example例子
Repo回购

Screenshot:截屏：

Safari (respects the original order) Safari（尊重原订单）
Chrome (doesn't respect the original order) Chrome（不尊重原始顺序）
Firefox (doesn't support link preload) Firefox（不支持链接预加载）

I'm trying to understand why the original order is breaking in Chrome and if it can be fixed?我想了解为什么原始订单在 Chrome 中中断，是否可以修复？

Answer 1

Chrome engineer here. Chrome 工程师在这里。 There are a few inconsistencies here, from what I can tell:据我所知，这里有一些不一致之处：

First, you can see Firefox is actually fetching the image.jpeg before the preloads as well, given your picture首先，您可以看到 Firefox 实际上也在预加载之前获取image.jpeg ，给定您的图片
Second, I can actually occasionally get Safari to produce an odd ordering too:其次，我实际上偶尔也可以得到 Safari 来产生一个奇怪的顺序：

What you're seeing here is Chrome's (and some other browsers') background HTML parser at work, which is just another lightweight parser that quickly rips through the page looking for resources to speculatively (early) fetch.您在这里看到的是 Chrome（和其他一些浏览器）的背景 HTML 解析器在工作，它只是另一个轻量级解析器，可以快速浏览页面以寻找资源以推测（早期）获取。 From debugging Chrome a bit on the example page you've created, the order of events happening is roughly:通过在您创建的示例页面上稍微调试 Chrome，事件发生的顺序大致如下：

Speculative parser kicks off a request for script.js推测解析器启动对script.js的请求
Speculative parser kicks off a request for image.jpeg推测解析器启动对image.jpeg的请求
Normal parser executes the document's pending parsing-blocking script普通解析器执行文档的挂起解析阻止脚本
The three preloads are fetched, in the order they were added按照添加的顺序获取三个预加载

So in this case you're seeing the speculative/background parser jump ahead a bit, and start fetching things before the main parser is able to via your script tag.所以在这种情况下，您会看到推测/后台解析器向前跳了一点，并在主解析器能够通过您的script标记之前开始获取内容。 Most browsers have this kind of parser here's an article about it , and unfortunately it is not specified by any standard, since it is not supposed to have any observable (to application code) effects.大多数浏览器都有这种解析器，这里有一篇关于它的文章，不幸的是它没有被任何标准指定，因为它不应该有任何可观察到的（对应用程序代码）影响。

However, if you're seeing a performance problem due to this, your best bet is to file a Chromium bug on https://crbug.com and maybe let me know and I can get it in front of the right people.但是，如果您因此而遇到性能问题，最好的办法是在https://crbug.com上提交 Chromium 错误，也许让我知道，我可以在合适的人面前找到它。

PS I noticed you filed https://github.com/w3c/preload/issues/146 , which I'll probably close in favor of you filing a Chrome bug if that's OK. PS 我注意到您提交了 https://github.com/w3c/preload/issues/146 ，如果可以的话，我可能会关闭以支持您提交 Chrome 错误。

加载的资源的加载顺序行为不一致<link rel="preload"> （铬合金）

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-04-25 03:02:12

加载的资源的加载顺序行为不一致<link rel="preload"> （铬合金）

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-04-25 03:02:12

解决方案1
1 已采纳 2020-04-25 03:02:12