`

HTML5中的prefetch预加载功能初探

阅读更多
  在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是:
利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了.
  目前,只有firefox和chrome支持这两个特性,chrome是在version 13后开始支持的,
safri和ie依然不支持.
  举个例子说明:比如要预先加载某个页面,可以这样:
<link rel="prefetch" href="http://www.example.com/"> <!-- Firefox -->
但如果是google的话,要用另外的一个名称,即:
<link rel="prerender" href="http://www.example.com/"> <!-- Chrome -->
  即使在不支持的浏览器,用了这个特性其实是不会出错的,只不过浏览器解析不到而已,
所以,如果你感觉能有办法预先预测到用户期望点的页面(比如用户看最新的受欢迎的热图,他
可能看了第一页后,会继续看下一页,这个时候就可以用预先加载这个特性了).比如
  <link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">
  而单独取一张图片也是可以的,比如:
   <link rel="prefetch" href="/images/test.jpg"/>

 
3
1
分享到:
评论

相关推荐

    详解HTML5中rel属性的prefetch预加载功能使用

    其中,`prefetch`是一个重要的预加载功能,它允许开发者指示浏览器在空闲时间提前下载将来可能需要的资源,以便于提高用户访问速度和网页加载效率。 预加载的工作原理是利用浏览器的闲置带宽和处理能力,预先下载并...

    HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)

    HTML5资源预加载,也称为Link Prefetch,是一种优化网页加载速度的技术,旨在提升用户体验,尤其是在用户导航到预测中的下一个页面时。通过Link Prefetch,开发者可以指导浏览器在用户访问当前页面的同时,预先加载...

    ASP.NET实现网页预加载效果

    1. HTML5 `&lt;link rel="prefetch"&gt;` 标签:这是HTML5引入的一个新特性,允许开发者声明将来可能会用到的资源,浏览器会在空闲时间预加载这些资源。在ASP.NET中,可以在页面头部添加此标签,指定需要预加载的URL。 2....

    swift-iOS预加载Web页面方案

    在iOS应用开发中,Swift语言提供了丰富的功能来创建高性能、用户友好的应用程序。"swift-iOS预加载Web页面方案"这个主题关注的是如何利用Swift优化用户体验,特别是在涉及到Web内容加载时。预加载Web页面是一种技术...

    ajax页面预加载

    2. **HTML5 Prefetch 和 Prerender**:`&lt;link rel="prefetch"&gt;` 提前获取资源,`&lt;link rel="prerender"&gt;` 预渲染整个页面。 3. **Service Worker**:离线存储和预加载,提供更好的缓存策略。 ### 五、Ajax预加载的...

    HTML5 预加载让页面得以快速呈现

    为了控制预加载,Firefox提供了`network.prefetch-next`配置选项,可以通过设置为`false`来禁用预加载功能。 总结来说,HTML5预加载是一个强大的工具,可以优化网站性能,但需要根据网站特性和用户行为进行明智的...

    JqueryMobile快速上手教程-实训任务书05-页面预加载和缓存-班级通知页.zip

    2. **预加载通知**:在主页面中,可以通过 `data-rel="prefetch"` 预加载用户可能需要查看的通知页面。 3. **动态加载**:如果通知数量较多,可以考虑使用 AJAX 动态加载,根据用户的滚动位置加载更多内容,同时利用...

    Prefetch的介绍

    在Windows XP及其后续版本中,Prefetch功能得到了广泛应用与优化。 #### 二、Prefetch的工作原理 Prefetch文件是由系统自动生成的一系列文件,这些文件通常位于`%SystemRoot%\Prefetch`目录下(默认为`C:\Windows\...

    js 利用image对象实现图片的预加载提高访问速度

    一些浏览器试图通过在本地缓存中保存这些图片来解决此问题。这样一来可以顺序调用这些图片——但对于首次使用这些图片的时候仍然会存在延时。预装载就是一种在需要图片之前就将图片下载到缓存的技术。采用这样的...

    网页js,css,图片预加载例子

    网页js,css,图片预加载例子,由于是从动态页面另存的,有部分js错误,但不影响主体运行。 源地址:http://phpied.com/files/object-prefetch/page1.php?id=1

    HTML5的<link rel="dns-prefetch"标签是干什么用的

    HTML5的&lt;link rel="dns-prefetch"标签是干什么用的

    jQuery预加载图片常用方法

    在实际开发中,还可以使用其他一些技术手段来预加载图片,例如使用CSS背景图片、在HTML的标签中预先设置src属性,以及借助现代浏览器支持的prefetch资源提示。 使用CSS背景图片预加载的原理是利用浏览器在渲染页面...

    WindowsPrefetch目录

    Prefetch的工作原理是这样的:当一个应用程序首次运行时,Windows会记录该程序加载时的硬盘访问模式,并将其存储在Prefetch文件中。下次再运行同一个程序时,系统会利用这些预读取信息,提前加载程序所需的数据,...

    next-router-prefetch

    "next-router-prefetch" 是 Next.js 生态系统中的一个特性,它涉及到前端路由和资源预加载的概念。在本文中,我们将深入探讨 Next.js 路由器的预加载功能及其在 TypeScript 项目中的应用。 首先,让我们理解什么是...

    html加载顺序.zip

    4. **预加载和预读取**:通过`&lt;link rel="preload"&gt;`或`&lt;link rel="prefetch"&gt;`提前加载重要资源。 5. **最小化DOM大小**:减少不必要的DOM节点,降低内存占用和渲染成本。 综上所述,理解HTML加载顺序对于提升网页...

    preload_cache.js:预加载缓存

    "preload_cache.js" 是一个专门用于实现这一功能的脚本,它通过HTML5的预加载(Preload)策略来优化资源加载,从而加快页面关键内容的展现速度。下面我们将详细探讨预加载缓存的工作原理、优势以及如何在实际项目中...

Global site tag (gtag.js) - Google Analytics