如何让 safari 预加载 js / css 资产？答案

【问题标题】：How can I get safari to pre-load js / css assets?如何让 safari 预加载 js / css 资产？
【发布时间】：2022-09-27 16:13:23
【问题描述】：

我一直在尝试让 Safari 在页面加载时开始预加载资产，但似乎没有任何效果。 Chrome 和 Firefox 似乎做得很好。

设置很简单。脚本呈现以下 html，中间有 2 秒的停顿。响应的第一部分已被刷新并流式传输到浏览器。 Firefox 和 Chrome 能够提前开始获取 js 的能力证实了这一点。

<!DOCTYPE html>
<html lang=\"en\">

<head>
    <link rel=\"preload\" href=\"http://localhost:8888/js.js\" as=\"script\" />
    <script href=\"http://localhost:8888/js.js\"/>

</head>
<!-- here the script rendering the HTML would actually pause 
    for 2s before rendering the rest of the document -->
<!-- the first part of the response has been 
    flushed and sent to the browser already -->
<body>
</body>
</html>

获取 JS 文件也增加了 2 秒的延迟。这使得事情很容易在浏览器时间轴中可视化。

请注意，即使没有<link preload>，Chrome 和 Firefox 也会提前开始加载 JS。他们似乎刚开始解析 HTML 并下载他们一路上遇到的任何 js。

在 Firefox 上，我得到以下瀑布：

在 Chrome 上我得到了差不多的结果：

然而，在 Safari 上，我能得到的只是：

这清楚地表明 Safari 没有尝试异步加载脚本，而是等待接收完整的 html 响应。

我错过了什么？野生动物园根本不做任何资产预加载吗？

标签： javascript html safari

【解决方案1】：

目前，Safari 不支持<link rel=preload>，这解释了您所看到的瀑布。好消息是，他们的网络布道者之一 Jen Simmons 拥有asked on Twitter，如果它存在的话，开发人员会使用它来做什么。

【讨论】：