如何使用 HTML5 预加载页面?

2023-12-25

我记得读过有关使浏览器预加载页面的元标记的文章。又是什么标签?


预取包含在W3C 规范名为“资源提示” http://www.w3.org/TR/resource-hints/#dfn-prefetch。它在 Firefox、Chrome、IE 11、Edge、Opera 12.1 之后实现,以及 Android 浏览器从 4.4.4 开始实现,请参见caniuse预取页面 http://caniuse.com/#feat=link-rel-prefetch了解更多最新详情。

另请参阅相关技术的 caniuse 和规范页面(随后支持的浏览器从 caniuse 检索,并且截至 2015 年 9 月是最新的):

  • 预渲染caniuse http://caniuse.com/#feat=link-rel-prerender / spec http://www.w3.org/TR/resource-hints/#dfn-prerender(IE 11、Edge、Chrome、Opera)
  • 预连接caniuse http://caniuse.com/#feat=link-rel-preconnect / spec http://www.w3.org/TR/resource-hints/#dfn-preconnect(火狐、Chrome 46、Opera 33)
  • DNS预取caniuse http://caniuse.com/#feat=link-rel-dns-prefetch / spec http://www.w3.org/TR/resource-hints/#dfn-dns-prefetch (IE9 (见下面的注释)、IE10、除 Opera Mini 之外的所有其他浏览器,或许还有 iOS Safari 和 Android 浏览器)

IE 9 只实现了 DNS 预取,但调用了它"prefetch"(警告!)。 Chrome 有一段时间(至少到 2013 年)只做了预渲染和 DNS 预取。 IE11实现lazyload http://caniuse.com/#feat=lazyload, 对于图像;微软曾试图将其纳入规范,但到目前为止还没有。出租车已说明 https://en.wikipedia.org/wiki/Link_prefetching#Browser_support是第一个实现预取的浏览器,尽管这种行为是自动的,不受标记控制。


历史背景

Mozilla 应用程序套件以及后来的 Firefox 都实现了该规范(该规范实际上基于 Mozilla 早期的预取实现,这在某种程度上基于Link:标头指定于RFC 2068 https://www.rfc-editor.org/rfc/rfc2068现在已被取代RFC 2616 https://www.rfc-editor.org/rfc/rfc2616[其中没有引用Link:标题]。看这个旧版本的文档 https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ%24revision/53544 (???? https://web.archive.org/web/20150912105244/https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ%24revision/53544)了解更多详细信息。)根据MDN 上的文档 https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ (???? https://web.archive.org/web/20150621235746/https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ):

链接预取是一种浏览器机制,它利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。

浏览器会查找 HTML<link>或 HTTPLink:关系类型为以下任一的标头next or prefetch.

所以语法是:

<link rel="prefetch" href="/path/to/prefetch" />

您还可以使用Link:HTTP 标头:

Link: </page/to/prefetch>; rel=prefetch

Or a <meta>模拟相同的 HTTP 标头:

<meta http-equiv="Link" content="&lt;/page/to/prefetch&gt;; rel=prefetch">

请注意,next也可以使用relation,但它的主要功能是指示导航中的“下一页”,因此您不应该将其用于资源或不相关的信息。预取也在 HTTPS 连接上执行。

iCab

iCab seems to http://lists.webjunction.org/wjlists/web4lib/2001-February/005076.html (???? https://web.archive.org/web/20110928002946/http://lists.webjunction.org/wjlists/web4lib/2001-February/005076.html)在 2001 年左右实施了早期预取。iCab 显然预取了内容页面(而不是资源)的所有链接,没有遵循开发人员在标记中留下的任何提示。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 HTML5 预加载页面? 的相关文章

  • 如何将 div 与其父级的顶部对齐,但保持其内联块行为?

    See http jsfiddle net b2BpB 1 http jsfiddle net b2BpB 1 问 如何让box1和box3对齐到父div的顶部boxContainer boxContainerContainer backg
  • HTML5 支持命名空间吗?

    我们是否可以使用新标签来扩展 HTML5 例如
  • 弹出窗口的动态高度取决于内容,可能吗?

    是否有可能获得一个宽度始终为 400px 的弹出窗口 但根据弹出窗口中的内容动态高度 我已经看到了这个 但不知道如何将其应用到弹出窗口 调整 iframe 的宽度高度以适应其中的内容 https stackoverflow com ques
  • AngularJS 在指令运行之前通过 AJAX 检索数据

    我正在使用 AngularUIuiMap http angular ui github com directives map实例化谷歌地图的指令 uiMap 指令非常适合处理硬编码数据 mapOptions and myMarkers 但是
  • 如何设置 CSS 网格的最大高度

    我有以下 CSS 网格 grid 3x4 display grid grid template columns 1fr 1fr 1fr grid template rows 1fr 1fr 1fr 1fr grid template are
  • Javascript 播放声音性能重吗?

    我正在用 Javascript 制作一个简单的游戏 当一个物体与墙壁碰撞时 它会发出 砰 的声音 声音的响度取决于物体的速度 速度越高 gt 声音越大 播放功能 playSound function id vol ID of the sou
  • 输入类型=图像 - onclick(),将触发其事件,但在 jquery 中的函数上表现不佳

    我认为这可能是两篇文章 2个问题 所以如果你对此发表评论 我会将它们分开 主要问题实际上是 我怎样才能为按钮设置图像背景 简单且正确 我想现在我可以确定这些事实了 因为我在将图像设置为按钮背景时遇到了 小 问题 我想 好吧 如果很难设置的话
  • 设置浏览器窗口最小化的最小尺寸限制?

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用
  • 如何倾斜 div 并保持背景图像不倾斜

    我已经花了几个小时了 所以希望有人能提供帮助 我有一个网站 其中大部分 div 都是倾斜的 大多数 div 都包含背景图像 现在我已经让 div 倾斜了 内容完美地位于其中 唯一的问题是背景图像 它与父级一起倾斜 我用谷歌搜索了很多 但找不
  • 如何将udp发送到udp node.js服务器?

    我对此很陌生 所以我真的不知道我在做什么 但我已经设置了一个 node js udp 服务器 我想从客户端 来自网站 向它发送一个数据包 但我不知道如何在 javascript 中做到这一点 或者是否可能 我不是在研究如何从 Node js
  • 来自 JSON 的 Angular 8 动态表单

    我正在尝试从 JSON 模式递归生成动态表单 但我正在努力解决找不到表单控件的问题 这是代码示例 我收到这个错误 错误错误 找不到名称为 createdAt 的控件 我尝试了不同的方法 但仍然存在问题 我知道我错过了一些东西 所以请帮忙 任
  • VBA / HTML / jQuery 选择自动完成 - 在列表中选择

    我正在尝试使用 Excel 中的 VBA 在网站的列表中选择一个值 这不是一个 正常列表 该网站使用 jQuery 选择自动完成 如下所示 example http davidwalsh name demo jquery chosen ph
  • Modernizr - 加载 polyfills / 使用自定义检测的正确方法

    我想在网页上使用一些新的 HTML5 表单属性和输入类型 有些浏览器已经支持它们 有些浏览器不支持 也永远不会支持 这就是我想使用 Modernizr 的原因 这就是我的麻烦开始的原因 据我了解 Modernizr 本身并不是一个 poly
  • 在网页上的文本框中键入内容时删除所有空格

    我如何在用户打字时即时删除输入到文本框中的空格 function var txt myTextbox var func function txt val txt val replace s g txt keyup func blur fun
  • 如何通过php获取网页的Open Graph协议?

    PHP 有一个简单的命令来获取网页的元标记 get meta tags 但这仅适用于具有名称属性的元标记 然而 开放图谱协议如今变得越来越流行 从网页获取 opg 值的最简单方法是什么 例如 我看到的基本方法是通过 cURL 获取页面并使用
  • iOS7 中“-webkit-overflow-scrolling: touch” 最初的屏幕外元素被破坏

    既然转基因种子已经发布了 我们现在可以谈谈了 看起来 iOS7 中的 webkit overflow scrolling touch 已损坏 最初不在屏幕上的元素的触摸事件不会触发 或者在某些情况下只是不可靠 这是一个例子
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r
  • 我可以停止 :hover 应用于元素吗?

    假设我有一些 CSS button hover font weight bold 我怎样才能防止 hover随意应用样式 我的目标用例是当元素被禁用时 例如 使用这个 HTML
  • JSTL 在循环中每 5 个字段集创建一个新行

    您好 我目前正在迭代并在表中显示字段集列表 为了让布局变得更得体一些 我想在每次循环到达第五个字段集时创建一个新行 谢谢 JSP div class det table class det tr td td tr table div

随机推荐

  • 如何将 HTML 元素传递给 React 中的高阶函数 (HOC)?

    我经常使用HOCs https reactjs org docs higher order components html为现有的 React 组件提供附加功能 这非常简单 import Component from path to Com
  • Firebase Crashlytics 不报告崩溃

    I have 成功集成 Firebase进入我的项目 身份验证和存储效果很好 但是在简单集成 Crashlytics 并故意崩溃我的应用程序之后 而不是故意 没有崩溃报告出现在崩溃仪表板中 我确实在 Logcat 中看到 D Firebas
  • Shopify CDN 的资产 URL 是如何生成的?

    假设我上传了一张名为 logo png 的图像到 Shopify 上的商店 在 Liquid 模板中 我可以为其生成一个 URL 如下所示 logo png asset url 这会生成一个 URL 例如 http static shopi
  • 使用 sql 连接查询还是使用 pandas 合并查询,哪一种更高效?

    我想在一个表中使用多个表中的数据pandas dataframe 我有两种从服务器下载数据的想法 一种方法是使用SQL连接和检索数据 一种方法是单独下载数据帧并使用 pandas merge 合并它们 SQL Join 当我想将数据下载到p
  • 脚本运行时执行时间限制

    我的 Google Apps 脚本正在迭代用户的 Google 云端硬盘文件 并将文件复制 有时将其移动到其他文件夹 该脚本总是在几分钟后停止 并且日志中没有错误消息 编者注 时间限制随着时间的推移而变化 并且 消费者 免费 和 工作空间
  • MVC .NET 上的 ajax post 未正确传递数组

    我有一个简单的模式 它使用 select2 从服务器获取产品列表 用户可以选择多个产品 然后点击 确定 来优化搜索 我的以下设置从模式中获取数据 并使用强类型视图模型对控制器操作执行 ajax 调用 该视图模型与 JS 尝试通过 ajax
  • C++反向整数序列实现

    谁知道如何实现C std make index sequence反向版本 要得到 make index sequence reverse
  • 使用嵌套类创建类的 Javascript JSON

    我想在 JavaScript 中创建一个具有嵌套对象的 JSON 对象 以下是课程 public class CellChanged private CellLocation Location null private double Cel
  • 引起原因:org.hibernate.HibernateException:找到对集合的共享引用

    我正在运行这个异常 Caused by org hibernate HibernateException Found shared references to a collection path Object listObjects 这是我
  • 如果两项服务位于同一区域,AWS 是否会产生跨账户数据传输费用?

    我想将数据从一个账户中的 EC2 机器传输到另一个账户中的 S3 存储桶 在这里 两个服务都位于同一区域 由于两者都在不同的帐户上 因此数据传输是否通过互联网进行 是的 如果 ec2 和 s3 位于不同区域 无论同一帐户或不同帐户 数据传输
  • JavaScript 数组克隆

    我有这种方法来制作数组 var playerList exports player function socket name this id socket id this name name this x 20 this y 40 retu
  • 单击时功能区按钮不会触发 onAction 设置的事件

    我设计了一个 Outlook 2010 加载项 在其中尝试触发 或者更确切地说 捕获 单击按钮时触发的事件 如图所示在本文中 http social msdn microsoft com Forums en US vsto thread a
  • 回退到 TURN 的连接的预期百分比是多少?

    假设我搭建了WebRTC视频聊天网站 握手后有些连接 ICE Candidates 会直接p2p 有些会使用STUN服务器 有些会使用 最后手段 TURN服务器来建立连接 与直接连接和 STUN 连接 免费 相比 基于 TURN 服务器的连
  • 使用 NIB 文件会导致性能损失吗?

    我很想知道是否有人有经验比较 iPhone 应用程序与 NIB 中布局的视图与完全以编程方式布局的视图 即实例化 UITextView 将其添加到视图 实例化 UIButton 将其添加到视图 的加载时间性能 如果我想要加载一个简单的应用程
  • numpy 有没有办法测试矩阵是否为酉矩阵

    我想知道 numpy 中是否有任何函数可以确定矩阵是否为酉矩阵 这是我写的函数 但它不起作用 如果你们能发现我的函数中的错误和 或告诉我另一种方法来确定给定矩阵是否是单一的 我将不胜感激 def is unitary matrix np n
  • 如何在 C++17 中读取 UTF-16 文本文件

    我对 C 很陌生 我想在 Visual Studio 2019 中读取 C 17 中的 UTF 16 文本文件 我在互联网上尝试了几种方法 包括StackOverflow 但没有一个起作用 并且其中一些无法编译 我认为它们只支持较旧的编译器
  • 如何在 numpy 或 pytorch 中向量化自定义算法?

    假设我有两个矩阵 A size k x m B size m x n 使用自定义操作 我的输出将是k x n 此自定义操作不是行之间的点积A和列B Suppose该自定义操作定义为 对于第 I 行A和第 J 列B the i j输出的元素是
  • 指令解码器如何区分前缀和主操作码?

    我正在尝试了解 x86 指令编码格式 我读过的所有资料仍然让这个主题令人困惑 我开始有点了解它 但我无法理解的一件事是 CPU 指令解码器如何区分操作码前缀和操作码 我知道指令的整个格式基本上取决于操作码 当然还有操作码中定义的额外位字段
  • 在 Folium HeatMapWithTime 中显示日期、id 列和其他列

    我有一个这样的出租车频率数据集 ID Date Latitude Longitude Sample Mean 01 2019 10 09 40 431753 3 711294 0 1 03 2019 10 21 40 431753 3 71
  • 如何使用 HTML5 预加载页面?

    我记得读过有关使浏览器预加载页面的元标记的文章 又是什么标签 预取包含在W3C 规范名为 资源提示 http www w3 org TR resource hints dfn prefetch 它在 Firefox Chrome IE 11