使用<link>标签进行图像预取

hen*_*che 8 html html5

我见过使用标签加载图片的网站,例如;

<link href='images.jpg' rel='somthing' type='something'>
Run Code Online (Sandbox Code Playgroud)

在设计网站时这有什么相关性?网站的哪些方面有助于优化(我认为它用于优化.如果我错了就对我说).谁可以给我解释一下这个?

Bro*_*ary 8

有些人使用它来进行图像/ css /页面预取.你可以在这里阅读它.

基本上,一旦页面完成加载,浏览器将看到这些link标签,如果rel属性是"下一步"或"预取",则浏览器将开始下载href属性指向的任何内容并将其存储在缓存中,以便加载速度非常快如果用户点击它.

此方法可用于预取任何内容,包括图像,样式表,不同的网页等.只要<link>匹配中使用的url用于正常加载资源的url,它就会从缓存中加载该资源.

例如,如果您的网页有此链接<a href="page2.html">Page 2</a>并且您想预取它,则会将其添加到您的网页中<link rel="next" href="page2.html">.

最后,这种预取方法优于javascript方法,因为这种类型的预取是符合标准的,由浏览器处理,并且如果用户具有计量带宽或其他连接限制,则可以被用户禁用.


noo*_*nja 6

页面加载时,阻塞脚本可能会中断,从而迫使其他脚本等待.rel=preload在一个链接元素中成为一个声明性的提取原语,它启动一个早期提取并将提取与资源执行分开.

<link rel="preload" href="/style/other.css" as="style">

<link rel="preload" href="/assets/font.woff2" as="font">

<link rel="preload" href="/img/header.png" as="image">

REF.https://w3c.github.io/preload/

请注意,这preload是初步的