使用（Chrome）]加载的资源的加载顺序行为不一致。

Question

我正在尝试根据用户连接<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。

我也在使用preload加载其他资源，但是它们不如字体重要，因此会在字体文件之后注入。

<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>

我面临的问题是，如果link元素是使用JavaScript创建的，则Chrome不会保留通过链接预加载功能加载的资源的原始顺序（如果链接元素在head标签中以HTML内联的形式显示，则一切正常如预期的那样。

Example

Repo
截屏：

Chrome（不遵守原始顺序）
Firefox（不支持链接预加载）

我试图了解为什么原始顺序在Chrome中中断，并且可以解决吗？

我正在尝试动态添加

标签，以根据用户连接navigator.connection.effectiveType加载字体文件，例如如果有效类型为'4g'，则注入＆...

Answer 1

Chrome工程师在这里。据我所知，这里有一些不一致之处：

使用（Chrome）]加载的资源的加载顺序行为不一致。

问题描述投票：2回答：1

1个回答

最新问题

使用 （Chrome）]加载的资源的加载顺序行为不一致。

问题描述 投票：2回答：1

1个回答

最新问题

使用（Chrome）]加载的资源的加载顺序行为不一致。

问题描述投票：2回答：1