当前位置：文江博客话题详情

HTML preload

如何使用 HTML5 预加载页面？

发布于 2024-12-11 05:03:02 字数 38 浏览 0 评论 0 原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦初启 2024-12-18 05:03:02

预取包含在 W3C 规范中，名为“资源提示”。它在 Firefox、Chrome、IE 11、Edge、Opera 12.1 之后以及 Android 浏览器 4.4.4 中实现，请参阅 caniuse 预取页面了解更多最新详细信息。

另请参阅相关技术的 caniuse 和规范页面（随后从 caniuse 检索支持的浏览器，并截至 2015 年 9 月更新）：

预渲染 caniuse / 规范（IE 11、Edge、Chrome、Opera）
预连接 caniuse / 规范（Firefox、Chrome 46、Opera 33）
DNS 预取 caniuse / 规范（IE9（参见下面的注释)、IE10、除 Opera Mini 之外的所有其他浏览器，或许还有 iOS Safari 和 Android 浏览器)

IE 9 仅实现了 DNS 预取，但将其称为“预取”（注意！）。 Chrome 有一段时间（至少到 2013 年）只做了预渲染和 DNS 预取。 IE11 对图像实现 lazyload；微软曾试图将其纳入规范，但到目前为止还没有。 iCab 据称是第一个实现预取的浏览器，尽管此行为是自动的，不受标记控制。

历史背景

Mozilla 应用程序套件以及后来的 Firefox 实现了该规范（该规范实际上基于 Mozilla 早期的预取实现，这在某种程度上基于 Link: 标头“https://www.rfc-editor.org/rfc/rfc2068” rel="nofollow noreferrer">RFC 2068 现已被 RFC 2616 [不引用 Link: 标头]。请参阅这个旧版本的文档（

Prefetching is included in a W3C spec under the name Resource Hints. It is implemented in Firefox, Chrome, IE 11, Edge, Opera after 12.1, and the Android Browser from 4.4.4, see the caniuse prefetch page for more and up-to-date details.

Also see the caniuse and spec pages for related technologies (supported browsers afterwards are retrieved from caniuse and up-to-date as of September 2015):

Prerendering caniuse / spec (IE 11, Edge, Chrome, Opera)
Preconnecting caniuse / spec (Firefox, Chrome 46, Opera 33)
DNS Prefetching caniuse / spec (IE9 (see note below), IE10, every other browser except Opera Mini and perhaps iOS Safari and the Android Browser)

IE 9 implemented DNS prefetching only but called it "prefetch" (caution!). Chrome for a while (at least as far as 2013) only did prerendering and DNS prefetching. IE11 implements lazyload, for images; Microsoft has tried to get it in the spec but so far it isn't. iCab is stated to have been the first browser to implement prefetching, although this behaviour was automatic, not controlled by the markup.

Historical background

The Mozilla Application Suite, and later, Firefox, implement the spec (the spec is actually based on Mozilla's early implementation of prefetching, which was somewhat based on the Link: header specified in RFC 2068 which has now been superseeded by RFC 2616 [which does not reference the Link: header]. See this old version of the docs (????) for more detail.) As per the documentation on MDN (????):

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future.

The browser looks for either an HTML <link> or an HTTP Link: header with a relation type of either next or prefetch.

So the syntax is:

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

You can also use the Link: HTTP header:

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

Or a <meta> to simulate that same HTTP header:

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

Note that the next relation can also be used, but its main function is to indicate the "next" page in the navigation, so you should not use it for resources or unrelated information. Prefetching is also performed on HTTPS connections.

iCab

iCab seems to (????) have implemented an early prefetching around 2001. iCab apparently prefetched all links to content pages (not resources), not following any hint the developer would have left in the markup.

回复收藏 0 原文

万水千山粽是情ミ 2024-12-18 05:03:02

有几种方法可以预加载页面：

DNS 预取告诉浏览器某些需要来自另一个域的资源，因此它可以尽快解析该域。为此，您必须在中添加该文件。如果您需要使用第三方元素，这可能会有所帮助。
Preconnect 更进一步，不仅可以解析域名，还可以进行 TCP 握手。如果您预连接到 HTTPS，它将进行 TLS 协商。在标题中，您必须添加
Prefetch 下载资源并将其存储在浏览器缓存中以供以后使用。您可以执行。请注意，这由浏览器决定下载资源是否有意义（它可能会忽略您）
预渲染是最强大的选项。它告诉浏览器请求 URL 并下载所有资源。。您应该非常确定该人会打开该页面，否则您只会浪费他的带宽。

回复收藏 0 原文

青瓷清茶倾城歌 2024-12-18 05:03:02

某些用户代理可能会选择在存在此情况时进行预加载，但您不能对此下注。

<link rel="next" href="http://www.example.com/link-reference">

Some user agents may choose to preload when this is present, but you can't bet on it.

<link rel="next" href="http://www.example.com/link-reference">

回复收藏 0 原文

任性一次 2024-12-18 05:03:02

这可能不是问题的一个很好的答案，但只是为了了解 InstantClick.js 可以在实际操作之前预加载您的链接单击它。

它是如何工作的

访问者点击链接之前，会将鼠标悬停在该链接上。这两个事件之间通常会经过 200 毫秒到 300 毫秒。 InstantClick 利用这段时间来预加载页面，以便当您单击时页面已经存在。

回复收藏 0 原文

画离情绘悲伤 2024-12-18 05:03:02

预加载资源是 FLASH 或 HTML5 项目中最困难也是最简单的任务之一，因为我们已经完成了 FLASH 到 HTML5 的转换项目。

最简单的预加载器是静态预加载器，用于加载它们所在的电影。对于这些预加载器，您所需要做的就是在预加载器屏幕（通常是电影的第一帧）上停止影片，并将其保留在那里，直到您能够确定影片已完全加载到 Flash 播放器中。

当更改网页上未缓存的图像时，预加载器还会停止任何闪烁或延迟，因为每次需要显示相同的图像时都必须从服务器下载。

我们在我们的网络应用程序（HTML5）中使用了 jQuery HMTL5 Loader，您可以看到Github 存储库此处。

该插件需要一个 JSON 文件来获取它必须预加载的文件，它可以预加载图像、html5 视频和音频源、脚本和文本文件。除此之外，它还有不同类型的装载机（圆形、线形、大计数器等）和附加功能等。

它是这样实现的。

<script>
    var loaderAnimation = $("#html5Loader").LoaderAnimation();
    $.html5Loader({getFilesToLoadJSON:'json file',
        onUpdate: loaderAnimation.update,
        debugMode:false
    });
</script>

它在不同的浏览器（包括 Chrome、FireFox、Safari、Opera 等）以及移动浏览器中完美运行。

注意：我们已将其用于 HTML5 Web 应用程序，该应用程序在不同平台（包括 Android 和 iOS）上运行。

Prealoding the assets, is one of the hardest as well as simplest tasks in a FLASH or HTML5 project because we have done FLASH to HTML5 conversion projects.

The easiest kinds of preloaders are static preloaders used to load the movie in which they exist. For these preloaders, all you need to do is stop the movie on a preloader screen, usually the first frame of the movie, and keep it there until you are able to determine that the movie has been completely loaded into the Flash player.

The Preloader also stops any flickering or delay when changing uncached images on a web page since the same image has to be downloaded from the server every time it is needed to be displayed.

We have used jQuery HMTL5 Loader in our web apps(HTML5), you can see the Github Repo here.

This plugin needs a JSON file to get the files that it has to preload, and it can preload images, html5 video and audio sources, script and text files. In addition to this, it has a different type of loaders (circular,line, big counter,etc) and additional features so on.

It is implemented like this.

<script>
    var loaderAnimation = $("#html5Loader").LoaderAnimation();
    $.html5Loader({getFilesToLoadJSON:'json file',
        onUpdate: loaderAnimation.update,
        debugMode:false
    });
</script>

Its working perfectly in different browsers including Chrome, FireFox, Safari, Opera, etc and in mobile browsers.

Note: We have used this for our HTML5 web applications which runs in different platforms including android and iOS.

回复收藏 0 原文

~没有更多了~