如何让 safari 预加载 js / css 资产？
[英]How can I get safari to pre-load js / css assets?
问题描述
I've been trying to get Safari to start pre-loading assets while a page is loading but nothing seems to work.
我一直在尝试让 Safari 在页面加载时开始预加载资产，但似乎没有任何效果。 Chrome and Firefox seem to do it just fine though. Chrome 和 Firefox 似乎做得很好。
The setup is simple enough.设置很简单。 A script renders the following html with a 2s pause in the middle.脚本呈现以下 html，中间有 2 秒的停顿。 The first part of the response has been flushed out and streamed to the browser.响应的第一部分已被刷新并流式传输到浏览器。 This is confirmed by Firefox and Chrome's ability to start fetching the js early. 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>
Fetching the JS file also has a 2s delay added to it.获取 JS 文件也增加了 2 秒的延迟。 This makes things easy to visualize in browser timelines.这使得事情很容易在浏览器时间轴中可视化。
Note that Chrome & Firefox will start loading the JS early even if no <link preload> is present.请注意，即使不存在<link preload> ，Chrome 和 Firefox 也会提前开始加载 JS。 They seem to just start parsing the HTML as soon as they get a bit of it and download any js they encounter along the way.他们似乎只是开始解析 HTML 并下载他们一路上遇到的任何 js。
On Firefox I get the following waterfall:在 Firefox 上，我得到以下瀑布：
On Chrome I get about the same:在 Chrome 上我得到了差不多的结果：
On Safari however all I ever can get is:在 Safari 但是我能得到的只是：
Which clearly shows Safari not trying to asynchronously load the script and instead waiting for the full html response to be received.这清楚地表明 Safari 没有尝试异步加载脚本，而是等待收到完整的 html 响应。
What am I missing?我错过了什么？ Does safari just not do any asset pre-loading at all? safari 是否根本不进行任何资产预加载？
1 个解决方案
解决方案1
0 2022-09-27 08:13:23
At the moment, Safari doesn't support <link rel=preload> , which explains the waterfall you're seeing.目前， Safari 不支持<link rel=preload> ，这解释了您所看到的瀑布。 The good news is that Jen Simmons, one of their Web Evangelists, has asked on Twitter what developers would use it for if it existed.好消息是，他们的 Web 布道者之一 Jen Simmons在 Twitter 上询问了如果它存在，开发人员会使用它做什么。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.