如何在页面加载开始时启动多个 http 请求？答案

【问题标题】：How can I start multiple http requests at the beginning of page load?如何在页面加载开始时启动多个 http 请求？
【发布时间】：2018-01-31 11:20:51
【问题描述】：

这是我最近的网页测试图片：

有什么方法可以尽早启动尽可能多的http 请求？例如，谷歌字体文件请求开始得很晚。同样，我想将 jQuery 请求移至域上托管的 script.min.js 请求。基本上，我正在寻找任何方法来提高这些请求的效率。

【问题讨论】：

假设 script.min.js 实际上引用了 jQuery，你只需要简单地交换那些 2 的脚本标签的顺序。除此之外，你可以看看你 不需要立即加载并阅读有关异步和延迟的信息...growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
@Archer 网页中脚本的顺序为jquery、barba、script.min.js。所以我假设jquery 也将按该顺序加载。由于script.min.js 在其他所有内容之前加载，我认为可能它们都可以更早加载。
大多数浏览器都会限制并发请求的数量。但是大多数现代浏览器现在都支持 HTTP2 和 SPDY，所以如果你有 SERVER 端的控制，你可以添加这个支持，这允许更好的并发请求。
感谢各位推荐。有没有办法将字体文件请求推送到左侧？

【解决方案1】：

首先，确保请求尽可能直接从 HTML 完成，而不是通过 JavaScript 动态完成。如果可能，将您的 JS 和 CSS 请求放入<head>。这样，浏览器的预加载扫描器会尽快请求这些文件。

注意 CSS 的放置位置 - 请参阅 https://csswizardry.com/2018/11/css-and-network-performance/ 了解更多信息。

如果您不能将所有内容都放入 HTML 的 <head>，那么您正在寻找专门为此目的创建的 <link rel="preload">；它告诉浏览器下载一些资源，但还没有执行它们。

一些文献：

请注意，尽管截至 2018 年底，它已在 Firefox 中被禁用，没有预计何时发货。

另外，在使用 preload 时要小心，因为预加载的请求具有最高优先级，这有时可能意味着其他关键但未预加载的资源会被错误地降低优先级。

在某些情况下（取决于浏览器、HTML 中的条目顺序等），preload 可能导致双重提取（尤其是对于 webfonts）。请务必检查。

【讨论】：