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

合集下载

HTML5资源预加载（Linkprefetch）详细介绍（给你的网页加速）

HTML5资源预加载（Linkprefetch）详细介绍（给你的⽹页加速）我曾经介绍过本站上使⽤的⼀些速度优化技术。

⽽在HTML5⾥，出现了⼀个新的⽤来优化⽹站速度的新功能：页⾯资源预加载/预读取(Link prefetch)。

页⾯资源预加载/预读取(Link prefetch)是什么？来⾃MDN的解释:页⾯资源预加载(Link prefetch)是浏览器提供的⼀个技巧，⽬的是让浏览器在空闲时间下载或预读取⼀些⽂档资源，⽤户在将来将会访问这些资源。

⼀个Web页⾯可以对浏览器设置⼀系列的预加载指⽰，当浏览器加载完当前页⾯后，它会在后台静悄悄的加载指定的⽂档，并把它们存储在缓存⾥。

当⽤户访问到这些预加载的⽂档后，浏览器能快速的从缓存⾥提取给⽤户。

简单说来就是：让浏览器预先加载⽤户访问当前页后极有可能访问的其他资源(页⾯，图⽚，视频等)。

⽽且⽅法超级的简单！HTML5页⾯资源预加载(Link prefetch)写法复制代码代码如下:<link rel="prefetch" href="/misc/3d-album/" /></p> <p><link rel="prefetch" href=" <ahref="/wordpress/">/wordpress/</a>wp-content/uploads/2014/04/b-334x193.jpg " />HTML5页⾯资源预加载/预读取(Link prefetch)功能是通过Link标记实现的，将rel属性指定为“prefetch”，在href属性⾥指定要加载资源的地址。

⽕狐浏览器⾥还提供了⼀种额外的属性⽀持：复制代码代码如下:<link rel="prefetch alternate stylesheet"title="Designed for Mozilla" href="mozspecific.css" _fcksavedurl=""mozspecific.css"" /><link rel="next" href="2.html" />HTTPS协议资源下也可以使⽤prefetch。

html link rel用法

html link rel用法
HTML中的`<link>`元素通常用于引入外部资源，最常见的用法是引入样式表（CSS文件），但也可用于引入其他类型的文件，如图标文件或网站图标。

`<link>`元素的`rel`属性用于指定所引入资源的关系类型。

常见的`rel`属性取值包括：
1. stylesheet，用于引入样式表，指定被引入文件是一个样式表文件。

2. icon，用于指定被引入文件是一个图标文件，通常用于网站图标。

3. prefetch，用于指定被引入文件是当前页面可能会使用到的资源，浏览器可以在空闲时提前加载这些资源。

4. dns-prefetch，用于指定被引入文件是当前页面可能会使用到的域名的DNS解析信息，同样可以在空闲时提前解析DNS。

5. preconnect，用于指定被引入文件是当前页面可能会建立连接的域名，浏览器可以在空闲时提前建立连接。

除了上述常见的`rel`属性取值外，还有许多其他可能的取值，每个取值都代表着不同的资源关系类型。

在使用`<link>`元素时，需要根据所引入资源的类型和用途来选择合适的`rel`属性取值，以确保浏览器正确理解所引入资源的作用。

同时，`<link>`元素还有`href`属性用于指定被引入资源的URL，以及`type`属性用于指定被引入资源的MIME类型（在某些情况下可以省略）。

这些属性共同构成了`<link>`元素引入外部资源的完整描述，能够帮助浏览器正确加载和解析所引入的外部资源。

H5基础标签浅谈（一）

H5基础标签浅谈（⼀）嗯，这是本⼈的第⼀篇博客……⽐较稚嫩，望各位⼤神见谅。

以下是本⼈对H5前端基本标签学习的⼀些学习笔记，与诸君分享。

⽂档声明格式：<!DOCTYPE html>注意：⽂档声明必有，⽽且必须在⽂档页⾯的第⼀⾏！HTML5已经简化了，H4以前较为繁琐，本着便(tou)捷(lan)的⼼思，就不重复描述以前繁琐的格式。

meta标签：描述⽂档的类型和编码；描述搜索关键字的描述（charset; content; http-equiv; name ;）meta标签中的属性：1，charset:设置⽂档的字符集编码格式HTML5中设置字符集编码：<meta charset="UTF-8">>>>常见的字符集编码格式：a.GB2312：国标码，简体中⽂； b.GBK,扩展的国标码； c.UTF-8,万国码Unicode2，http-equiv:将我们的信息写给浏览器看，按照⾥⾯的要求去执⾏，需要配合content属性使⽤。

（http-equiv属性只是表明需要设置哪⼀部分，具体的设置内容放到content属性中）可选属性值：content-type(⽂档类型) ;refresh（⽹页定时刷新） ;set-cookie（设置浏览器cookie缓存）3，name属性：使⽤⽅法同http-equiv。

常⽤且需要掌握的属性值：author（作者） keyword（⽹页关键字） description（⽹页描述）。

keyword（⽹页关键字） description（⽹页描述）这两个属性设置，⽹页必不可少<meta name="author" content=""/><meta name="keywords" content="HTML5,⽹页,web前端开发,Day1"/><meta name="description" content="这是准备⼯作的第⼀天的学习内容，来⾃杰瑞教育"/>详细属性如下图（上⾯介绍的是主要常⽤属性）：使⽤link标签，链接⽹页图标（title前的⼩logo）rel属性：声明链接⽂件的类型，此处选icontype属性：可以省略href属性：表⽰图⽚的路径地址代码：<link rel="icon" type="imag/x-icon" href="img/day1标题图标.png" />标签的分类块级标签：显⽰为块，前后隔⾏（⾃动换⾏）；⾏级标签：从左往右按⾏逐⼀显⽰；常见的块级标签<h1>-<h6>：标题标签，⾃动加粗，h1最⼤，h6最⼩。

前端开发中的预加载技术解析

前端开发中的预加载技术解析前端开发在当今互联网时代扮演着至关重要的角色。

随着网页的复杂性和需求的增加，提升用户体验成为开发者的首要任务之一。

其中，预加载技术被广泛应用于提升网站性能和加速页面加载速度。

本文将对前端开发中的预加载技术进行解析，以便帮助读者更好地理解和应用。

预加载技术是指在用户需要之前提前加载资源，以减少页面加载时间，并实现更快的响应速度。

在开发中，可以使用多种方式进行预加载，下面将分别进行介绍。

一、图片预加载图片预加载是前端开发中最常用的一种预加载技术。

当页面中存在大量图片时，如果在页面加载完成后再加载图片，将导致用户看到空白或加载中的页面并等待较长时间。

因此，可以通过在页面加载过程中提前加载图片来优化用户体验。

在实现上，可以使用JavaScript来预加载图片。

通过创建一个Image对象，并设置图片的src属性为要预加载的图片路径，即可实现图片的预加载。

在图片加载完成后，将其显示在页面上，即可达到预加载的效果。

二、字体预加载字体预加载是在前端开发中不可忽视的一个环节。

随着网页设计的多样化，特殊字体的应用越来越普遍。

然而，由于特殊字体的体积较大，下载速度较慢，如果在需要使用字体时才去下载，将会导致用户等待。

因此，可以通过字体预加载来提前下载字体，从而加快页面中字体的渲染速度。

在实现上，可以使用CSS的@font-face规则来定义字体，并通过设置这个规则的src属性为字体文件的路径，即可实现字体的预加载。

在页面加载时，浏览器会提前下载字体文件，从而在需要使用字体时能够立即渲染。

三、脚本和样式文件预加载除了图片和字体外，前端开发中的脚本和样式文件也是需要预加载的重要资源。

这是因为脚本和样式文件的加载是在HTML文档解析和渲染完成之后进行的，如果脚本和样式文件过大或过多，将导致页面加载速度变慢，影响用户体验。

在实现上，可以使用HTML的link和script标签来预加载脚本和样式文件。

简单介绍HTML5中的文件导入

这篇文章主要介绍了简单介绍HTML中的文件导入,包括加载jQuery、导入后的执行顺序等知识点,需要的朋友可以参考下Template、Shadow DOM及Custom Elements 让你创建UI组件比以前更容易了。

但是像HTML、CSS、JavaScript这样的资源仍然需要一个个地去加载，这是很没效率的。

删除重复依赖也并不简单。

例如，现在加载jQuery UI或Bootstrap就需要为JavaScript、CSS及Web Fonts添加单独的标签。

如果你的Web 组件应用了多重的依赖，那事情就变得更为复杂。

HTML 导入让你以一个合并的HTML文件来加载这些资源。

使用HTML导入为加载一个HTML文件，你需要增加一个link标签，其rel属性为import，herf属性是HTML文件的路径。

例如，如果你想把component.html加载到index.html：index.htmlXML/HTML Code<link rel="import" href="component.html" >    你可以往HTML导入文件（译者注：本文将“the imported HTML”译为“HTML导入文件”，将“the original HTML”译为“HTML主文件”。

例如，index.html是HTML主文件，component.html是HTML导入文件。

）添加任何的资源，包括脚本、样式表及字体，就跟往普通的HTML添加资源一样。

component.htmlXML/HTML Code<link rel="stylesheet" href="css/style.css">  <script src="js/script.js"></script>  doctype、html、head、body这些标签是不需要的。

html中rel的用法

<rel> 属性是一个 HTML 属性，用于指定链接的类型。

它可以用于指定链接是到另一个文档、图像还是其他资源。

<rel> 属性可以与 <a> 元素一起使用，用于指定链接的类型。

例如，以下代码创建了一个到另一个文档的链接：html<a href="example.html" rel="alternate">Example</a><rel> 属性也可以与 <link> 元素一起使用，用于指定链接的类型。

例如，以下代码创建了一个到样式表的链接：html<link href="style.css" rel="stylesheet"><rel> 属性可以使用的值包括：alternate：指定链接是到另一个文档。

author：指定链接是到作者的主页。

bookmark：指定链接是到书签。

canonical：指定链接是到该文档的规范 URL。

dns-prefetch：指定链接是到 DNS 预取。

external：指定链接是到外部网站。

help：指定链接是到帮助页面。

icon：指定链接是到图标。

license：指定链接是到许可证。

manifest：指定链接是到清单文件。

next：指定链接是到下一篇文章。

nofollow：指定链接不被搜索引擎抓取。

noopener：指定链接在新窗口中打开，并且不携带引荐标头。

noreferrer：指定链接在新窗口中打开，并且不携带引荐标头。

pingback：指定链接是到 pingback URL。

preconnect：指定链接是到预连接。

prefetch：指定链接是到预取。

prev：指定链接是到上一篇文章。

search：指定链接是到搜索。

stylesheet：指定链接是到样式表。

tag：指定链接是到标签。

事半功倍：你应该知道的HTML5五大特性

摘要：HTML5技术中有这样5个特性，它们能够让你实现事半功倍的开发效果，它们分别是：DNS Prefetching 、Link Prefetching 、Download 属性、Regular Expressions 以及Datalist 元素。

HTML5的诞生为Web App 以及移动App 开发带来了许多新鲜有趣的JavaScript 与HTML API 。

本文将介绍5个能够让你事半功倍的HTML5特性。

1. DNS PrefetchingDNS 主机名解析有时会出现拖慢网站速度的问题。

现代浏览器当遇到DNS 解析时已经十分聪明——用户在跟随某个链接之前，浏览器先尝试解析域名再将其进行缓存。

DNS Prefetching 特性允许开发者手动控制，告诉浏览器需要解析哪个域名。

代码如下：1 2 3 4 <link rel="dns-prefetch" href="//"><link rel="dns-prefetch" href="//"><link rel="dns-prefetch" href="//"><link rel="dns-prefetch" href="//">2. Link PrefetchingLink Prefetching 特性允许开发者在页面加载的时候预先加载他们希望指定的页面或元素。

代码如下：1 2 <link rel="prefetch" href="http://daker.me/2013/05/hello-world.html " /><link rel="prefetch" href="http://daker.me/assets/images/avatar.png " />你也能够使用prerendering 特性令你的网站速度更快，浏览器能够在后台获取并渲染整个页面，用户点击相应链接时再为用户展示该页面。

enableprefetcher数值

enableprefetcher数值启用预读取是一种优化计算机系统性能的方法，它可以在启动程序时预加载相关的数据和代码，以加快程序的启动速度和响应速度。

预读取技术可以通过硬件和软件两种方式实现，其中，启用prefetcher数值是一种软件设置方法，它可以配置预读取算法的运行参数。

预读取技术的基本原理是根据应用程序的运行特点和使用习惯，提前将可能用到的数据和代码加载到计算机的缓存中。

当应用程序需要这些数据时，可以直接从缓存中读取，而不需要再从硬盘或网络上加载，从而大大提高了数据访问速度和系统响应速度。

启用prefetcher数值是Windows操作系统中一项重要的预读取技术设置。

在Windows 7及更高版本的系统中，这个数值可以通过修改注册表来进行调整。

它决定了预读取算法的运行模式，包括什么时候进行预读取、预读取的数据大小和预读取的方式等。

Windows操作系统提供了三种可选的prefetcher数值，分别是0、1和2。

每个数值对应一种不同的预读取方式，具体的含义和作用如下：1.数值为0：表示禁用预读取功能。

这种方式下，不会进行任何预读取操作，即使系统的硬件条件允许，也不会对程序进行预加载，这可能导致启动速度和系统响应速度较慢。

因此，建议将prefetcher数值设置为1或2。

2.数值为1：表示只预读取应用程序的执行代码。

这种方式只会预加载可执行文件的代码段，而不预读取数据。

这对于较大的程序来说，可能并不能提高启动速度和响应速度，但对于执行时间较长的程序来说，可以加快程序的运行速度。

3.数值为2：表示预读取应用程序的执行代码和数据。

这种方式会预加载可执行文件的代码段和数据段，其中数据包括了常用的文件、资源和库等。

这样，在启动程序时，就可以直接从计算机的缓存中读取这些数据，而不需要从硬盘或网络上加载，从而大大加快了程序的启动速度和响应速度。

根据不同的系统和应用程序的需求，可以根据实际情况来选择合适的prefetcher数值。

HTML5预加载的方法

代码如下: 从上面的 HTML 代码可以看出预加载使用标签并指定 rel=“prefetch” 属性而 href 属性就是需要预加载的文件路径而 Mozilla 还实现了一些类似的 link rel 属性: 代码如下: 备注 https 协议也同样支持何时需要预加载网站是否采用预加载取决于你的需求下面是一些建议如果一系列的页面幻灯片一样展示那幺可以预加载前后各至个页面加载网站内部通用的图片在搜索结果页预加载下一页阻止预加载 Firefox 允许禁止预加载模式rkprefetchnext”false); 注意事项关于链接预加载有如下注意事项预加载可以跨域进行当然请求时 cookie 等信息也会被发送预加载可能破坏网站统计数据而用户并没有实际访问 Mozilla Firefox 是目前唯一支持预加载模式的浏览器() 你怎幺认为呢?使用空闲时间下载额外的文件属于一种激进的优化以上就是我们给大家介绍的 HTML5 预加载了。希望大家学业有成，工作顺利
HTML5 预加载的方法
HTML5 预加载是一种浏览器机制使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源当用户访问某个预加载的链接时如果从缓存命中页面就得以快速呈现浏览器厂商和开发者之间共同努力的一个方向就是让网站更快现在已有很多广为人知的加速解决方案 CSS sprites(CSS 精灵拼图)以及图像优化分布式配置文件(htaccess)JS/文本文件压缩 CDN 加速等我在另一篇博文中介绍了如何让网站更快 FireFox 推介一种新的网站加速策略链接预加载什幺是链接预加载?MDN 描述如下: 预加载是一种浏览器机制使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源页面提供给浏览器需要预加载的集合浏览器载入当前页面完成后将会在后台下载需要预加载的页面并添加到缓存中当用户访问某个预加载的链接时如果从缓存命中页面就得以快速呈现简单概述网站根据用户分析让浏览器后台下载指定页面/文档/图片实现起来超 easy HTML 预加载标签

html5标签和属性使用

HTML5中常用的标签(及标签的属性和作用)1、标签:<!DOCTYPE>作用:声明是文档中的第一成分，位于<html>标签之前。

2、标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档。

属性:manifest:值(url)为脱机使用定义缓存信息。

3、标签:<head>作用:标签用于定义文档的头部，它是所有头部元素的容器。

属性:profile:值(URL)一个有空格分隔的URL列表，这些URL包含着有关页面的元数据信息。

4、标签:<title>作用:元素可定义文档的标题。

属性:dir:值(rtl,ltr)规定元素中内容的文本方向。

lang:值(language_code)规定元素中内容的语言代码。

xml:lang:值(language_code)规定XHTML文档中元素内容的语言代码。

5、标签:<body>作用:元素定义文档的主体。

属性:alink:值(rgb(x,x,x),#xxxxxx,colorname)不赞成使用，请使用样式取代它。

规定文档中活动链接(active link)的颜色。

background:值(URL)不赞成使用。

请使用样式取代它。

规定文档的背景图像。

bgcolor:值(reb(x,x,x),#xxxxxx,colorname)不赞成使用。

请使用样式取代它。

规定文档中的背景颜色。

link:值(reb(x,x,x),#xxxxxx,colorname)不赞成使用。

请使用样式取代它。

规定文档中未访问链接的默认颜色。

text:值(reb(x,x,x),#xxxxxx,colorname)不赞成使用。

请使用样式取代它。

规定文档中所以文本的颜色。

vlink:值(reb(x,x,x),#xxxxxx,colorname)不赞成使用。

请使用样式取代它。

规定文档中已被访问链接的颜色。

6、标签:<h1>到<h6>标签作用:<h1>-<h6>标签了定义标题。

前端性能优化之资源预加载与预加载

前端性能优化之资源预加载与预加载html5中的link 标签包含了⼏个属性，其中prefetch(空闲时加载)和preload(优先加载)可以让我们在加载资源时提⾼⽤户体验。

这⾥我⽤css样式进⾏举例，index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./css/index.css"><link rel="prefetch" as="style" href="./css/other.css"><title>Document</title></head><body></body></html>在加载index.html的样式时，我在引⼊index.css后加了下边⼀句代码<link rel="prefetch" as="style" href="./css/other.css">其意思为在空闲时加载other.css这⼀个⽂件，此时浏览器中资源加载顺序如下：在加载了index.css后去加载了other.css 且other.css的优先级为最低Lowest。

other.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./css/other.css"><link rel="preload" as="style" href="./css/index.css"><title>Document</title></head><body></body></html>在加载other.html样式时，我在引⼊other.css后加了下边⼀句代码<link rel="preload" as="style" href="./css/index.css">其意思为优先加载index.css这⼀个⽂件，此时浏览器中资源加载顺序如下：可以看到浏览器优先加载了index.css这⼀⽂件且other.css⽂件其并未显⽰Size，原因在于已经在index.html中加载并缓存了other.css这个⼀样式，其详细信息：总结：我们可以通过在⾸页添加prefetch让浏览器在空闲时预加载其他页⾯的资源，这样在打开其他页⾯时就节省了加载时间，⽽使⽤preload能够让我们优先加载⼀些重要的资源，让⽤户能够优先看到重要的内容，提⾼⽤户体验。

前端性能优化的页面懒加载与预加载

前端性能优化的页面懒加载与预加载在前端开发中，优化页面性能是一个重要的课题。

随着Web应用的复杂性和页面内容的增加，页面加载速度成为了一个用户体验和SEO 排名的关键因素。

为了改善页面加载速度，我们常常使用页面懒加载和预加载技术。

页面懒加载是指延迟加载页面中的某些内容，只有当用户滚动到需要展示的部分时才加载。

通过懒加载，可以减少初始页面下载的数据量，从而加快页面加载速度。

在页面中，图片是最常使用懒加载的元素。

当用户滚动到图片所在位置时，才开始加载图片资源，从而减少了对带宽的消耗。

实现图片的懒加载可以使用以下方法：1. 使用Intersection Observer API：这是一个现代的浏览器API，可以监测元素是否进入视口。

当图片元素进入视口时，使用JavaScript动态加载图片。

这种方法简单高效，不需要额外的第三方库。

2. 使用第三方库：如果需要兼容性更好的解决方案，可以使用一些流行的第三方库，例如LazyLoad.js或Unveil.js。

这些库提供了更多的配置选项和附加功能，但可能会增加项目的依赖。

除了图片懒加载，还可以延迟加载其他页面元素，例如视频、音频和动态加载的内容。

通过合理应用懒加载技术，可以提高整体页面的性能。

另一方面，预加载是指在页面加载完成之前提前加载未来可能会用到的资源。

通过预加载，页面可以在用户需要之前将资源加载到缓存中，从而减少用户等待时间。

实现页面资源的预加载可以使用以下方法：1. 使用link标签的rel属性：通过在页面头部添加link标签，并设置rel属性为"preload"，可以在页面加载时提前加载指定的资源（例如CSS、JavaScript文件），这样在之后需要使用这些资源时就可以直接从缓存中读取，提高页面响应速度。

2. 使用JavaScript动态加载：通过在页面加载完成之后使用JavaScript动态加载未来可能需要的资源，例如图片、字体文件等。

前端性能优化的资源预加载技术

前端性能优化的资源预加载技术随着互联网的快速发展，网页的性能优化成为了前端开发中的重要环节。

用户对于网页加载速度的要求越来越高，而资源预加载技术能够有效地提升网页的加载速度和用户体验。

本文将介绍前端性能优化中的资源预加载技术，包括预加载CSS、JavaScript、图片和字体等常见资源。

一、预加载CSS在网页渲染过程中，CSS是最先加载的关键资源之一。

通过预加载CSS，可以减少页面加载时的等待时间，提升网页的加载速度。

在HTML文件中使用<link>标签来引入CSS文件，并通过rel属性指定为preload，如下所示：```html<link rel="preload" href="styles.css" as="style">```在上述代码中，"styles.css"为需要预加载的CSS文件的路径。

通过设置rel属性为preload，浏览器将提前加载该CSS文件。

二、预加载JavaScriptJavaScript是网页交互的关键技术，但过多的JavaScript代码可能导致网页加载缓慢。

为了提升网页的加载速度，可以采用预加载JavaScript的方式。

在HTML文件中使用<script>标签来引入JavaScript 文件，并设置async属性为true，如下所示：```html<script src="script.js" async></script>```通过设置async属性为true，浏览器将异步加载并执行该JavaScript 文件，不会阻塞页面的加载。

三、预加载图片图片是网页中占用带宽较大的资源之一。

通过预加载图片，可以避免图片加载时的闪烁和等待时间。

在HTML文件中使用<link>标签来引入图片，并设置rel属性为preload，如下所示：```html<link rel="preload" href="image.jpg" as="image">```在上述代码中，"image.jpg"为需要预加载的图片的路径。

预加载实现原理

预加载实现原理预加载（Preloading）是一种技术手段，它可以在用户开始访问网站内容之前，将一些可能需要的资源提前加载到浏览器缓存中，以此提高网站的响应速度。

一般来说，预加载可以分为两种类型，即跨域预加载和同域预加载。

跨域预加载是指加载的资源不属于当前页面所在的域名下，它主要通过浏览器的预加载机制或JSONP（JSON with Padding）实现。

其中，浏览器的预加载机制是指，在浏览器解析HTML代码时，如果遇到类似于<link rel="prefetch" href="xxx">的标签，浏览器会自动将该资源加载到浏览器缓存中。

而JSONP则是利用JSON数据可以不受同源策略限制的特性，将需要预加载的资源包装成一个JavaScript脚本文件，通过动态添加<script>标签的方式加载到页面中。

当浏览器加载到该脚本文件时，会自动执行其中的回调函数，从而实现预加载的效果。

同域预加载是指，加载的资源与当前页面所在的域名相同。

它可以通过<link rel="preload" href="xxx">标签实现。

该标签是HTML5新增的特性，它的作用与<link rel="stylesheet"类似，但是预加载的资源并不会影响页面的呈现。

在浏览器解析HTML代码过程中，当遇到该标签时，会立即将该资源加载到浏览器缓存中。

总的来说，预加载可以有效降低网站的加载时间，提升用户体验，但也需要根据实际情况选择合适的方式来实现。

跨域预加载需要注意跨域访问的安全问题，而同域预加载则需要避免加载过多无用的资源影响页面的响应速度。

HTML中的rel用法

HTML中的rel⽤法我们就来认识⼀下rel。

其实不只有⼀个rel还有⼀个与之对应的属性叫rev，这两个属性的意思分别是：从源⽂档到⽬标⽂档的关系；从⽬标⽂档到源⽂档的关系。

这⾥的源⽂档可以理解为链接所处在的当前⽂档，⽽⽬标⽂档也就是这个链接将要打开的⽂档。

这下我们应该清楚了，其实rel与rev是⼀种⽂档之前的链接关系，⽽并⾮是与浏览器相关的如何显⽰⽬标⽂档的属性。

那么rel与rev有哪些关系呢？下⾯将⼀⼀列取并解释其中的含义：next，链接到下⼀个⽂档；prev，链接到前⼀个⽂档；* p1 g0 V6 K$ T% n$ i* chead，链接到集合中的顶级⽂档；! A! [7 F0 r$ ]toc，链接到集合的⽬录；parent，链接到源上⾯的⽂档；5 n2 J g0 V" a" Y: GChild，链接到源下⾯的⽂档；! U' r# r h2 W' i; { ?, Rindex，链接到此⽂档的索引；# Y1 M- R2 d# c' G& U0 eglossary，链接到此⽂档的术语表；( U. i4 r7 b/ N' Q其中next与prev是⼀组。

表明了当前⽂档与⽬标⽂档之前的关系是同级的关系，可以写成这样<a href="movie_002.htm" rel=next rev=prev>。

head与toc可以形成⼀个组合，表⽰者是由⽬录链接到最终的⽂档，或是由⽂档链接到⽬录。

parent与child是⼀组，表⽰着由当前的⽂档链接到⽗级⽂档或是⼦级⽂档。

⽽index 与glossary可以与head分别组合，形成由⽂档到索引，或是由索引到⽂档；⽂档到术语表或是术语表到⽂档。

也许这样讲可能还是不很清楚，下⾯举个例⼦：我这⾥整理了⼀个电影⽂档资源，那么我需要对这些资源进⾏分类，我把电影分成：武侠⽚、战争⽚、爱情⽚、恐怖⽚、纪录⽚。

preload 用法 -回复

preload 用法-回复preload 是一种用于提前加载资源的技术手段，可应用于网站、应用程序和游戏等多个领域。

它的核心思想是在用户进行特定操作之前，将相关资源预先加载到内存中，从而加快页面加载速度和用户体验。

在本文中，我们将一步一步地介绍preload 的用法以及它的一些实际应用。

首先，preload 的基本语法如下：`<link rel="preload" href="example.jpg" as="image">`这是一个preload 的示例，其中`rel` 属性指定了资源的关系，`href` 属性指定了要加载的资源的路径，`as` 属性指定了资源的类型。

在上面的示例中，我们使用`image` 作为资源类型，表示将加载一张图片。

preload 支持的资源类型还包括`script`（脚本文件）、`style`（样式文件）、`font`（字体文件）和`video`（视频文件）。

根据不同的需求，我们可以选择合适的资源类型来进行预加载。

除了基本语法，preload 还提供了一些附加的属性，可以更加精确地控制资源的加载行为。

下面是一些常用的属性示例：<link rel="preload" href="example.js" as="script"crossorigin="anonymous"><link rel="preload" href="example.css" as="style"onload="onLoaded()"><link rel="preload" href="example.woff" as="font"type="font/woff" crossorigin="anonymous">在上面的示例中，我们分别使用了`crossorigin`、`onload` 和`type` 属性。

prefetch用法

prefetch用法
"Prefetch" 是一种优化技术，用于在需要之前预先加载数据或
资源，以提高性能和响应速度。

在计算机领域，"prefetching" 有时用于描述处理器或操作系统
的功能，它会预先加载或缓存预期将来需要的指令或数据。

这样，当程序需要使用这些指令或数据时，它们已经在内存中可用，无需等待加载时间，从而减少响应延迟。

在网络领域，"prefetching" 用于描述浏览器或 CDN（内容分发网络）的功能，它会在用户浏览网页时提前加载其他页面或资源。

这样，当用户点击链接或浏览其他页面时，这些页面或资源已经预先加载完成，从而提供更快的用户体验。

在编程中，可以使用预读（prefetch）指令或函数来引导系统
或程序预先加载数据或资源。

这可以通过指定预读的地址范围、预读数据的类型或指定预读的操作来完成。

这样一来，在需要使用这些数据或资源时，可以更快地访问它们，从而提高程序的性能和响应速度。

总的来说，"prefetch" 可以是针对处理器、操作系统、浏览器、CDN或编程语言的功能，它通过提前加载数据或资源来优化
性能和加速响应速度。