在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"/>
分享到:
相关推荐
其中,`prefetch`是一个重要的预加载功能,它允许开发者指示浏览器在空闲时间提前下载将来可能需要的资源,以便于提高用户访问速度和网页加载效率。 预加载的工作原理是利用浏览器的闲置带宽和处理能力,预先下载并...
HTML5资源预加载,也称为Link Prefetch,是一种优化网页加载速度的技术,旨在提升用户体验,尤其是在用户导航到预测中的下一个页面时。通过Link Prefetch,开发者可以指导浏览器在用户访问当前页面的同时,预先加载...
1. HTML5 `<link rel="prefetch">` 标签:这是HTML5引入的一个新特性,允许开发者声明将来可能会用到的资源,浏览器会在空闲时间预加载这些资源。在ASP.NET中,可以在页面头部添加此标签,指定需要预加载的URL。 2....
在iOS应用开发中,Swift语言提供了丰富的功能来创建高性能、用户友好的应用程序。"swift-iOS预加载Web页面方案"这个主题关注的是如何利用Swift优化用户体验,特别是在涉及到Web内容加载时。预加载Web页面是一种技术...
2. **HTML5 Prefetch 和 Prerender**:`<link rel="prefetch">` 提前获取资源,`<link rel="prerender">` 预渲染整个页面。 3. **Service Worker**:离线存储和预加载,提供更好的缓存策略。 ### 五、Ajax预加载的...
为了控制预加载,Firefox提供了`network.prefetch-next`配置选项,可以通过设置为`false`来禁用预加载功能。 总结来说,HTML5预加载是一个强大的工具,可以优化网站性能,但需要根据网站特性和用户行为进行明智的...
2. **预加载通知**:在主页面中,可以通过 `data-rel="prefetch"` 预加载用户可能需要查看的通知页面。 3. **动态加载**:如果通知数量较多,可以考虑使用 AJAX 动态加载,根据用户的滚动位置加载更多内容,同时利用...
在Windows XP及其后续版本中,Prefetch功能得到了广泛应用与优化。 #### 二、Prefetch的工作原理 Prefetch文件是由系统自动生成的一系列文件,这些文件通常位于`%SystemRoot%\Prefetch`目录下(默认为`C:\Windows\...
一些浏览器试图通过在本地缓存中保存这些图片来解决此问题。这样一来可以顺序调用这些图片——但对于首次使用这些图片的时候仍然会存在延时。预装载就是一种在需要图片之前就将图片下载到缓存的技术。采用这样的...
网页js,css,图片预加载例子,由于是从动态页面另存的,有部分js错误,但不影响主体运行。 源地址:http://phpied.com/files/object-prefetch/page1.php?id=1
HTML5的<link rel="dns-prefetch"标签是干什么用的
帮助加载字体并通过预加载来激活它们。 nuxt-font-loader-strategy帮助加载字体并提供基于预加载的加载策略。 定义自己将首先解锁的字体。 这样可以在网站的初始视口中提供最佳体验。 特征: 使用预加载以防止...
在实际开发中,还可以使用其他一些技术手段来预加载图片,例如使用CSS背景图片、在HTML的标签中预先设置src属性,以及借助现代浏览器支持的prefetch资源提示。 使用CSS背景图片预加载的原理是利用浏览器在渲染页面...
Prefetch的工作原理是这样的:当一个应用程序首次运行时,Windows会记录该程序加载时的硬盘访问模式,并将其存储在Prefetch文件中。下次再运行同一个程序时,系统会利用这些预读取信息,提前加载程序所需的数据,...
"next-router-prefetch" 是 Next.js 生态系统中的一个特性,它涉及到前端路由和资源预加载的概念。在本文中,我们将深入探讨 Next.js 路由器的预加载功能及其在 TypeScript 项目中的应用。 首先,让我们理解什么是...
4. **预加载和预读取**:通过`<link rel="preload">`或`<link rel="prefetch">`提前加载重要资源。 5. **最小化DOM大小**:减少不必要的DOM节点,降低内存占用和渲染成本。 综上所述,理解HTML加载顺序对于提升网页...