<link>元素的 rel 属性的属性值preload能够让HTML页面中 <head>元素内部书写一些声明式的资源获取请求,使得资源可以更早的得到加载。
在这里,我们会先加载style1.css
和main1.js
文件(但不会生效),在随后的页面渲染中,一旦需要使用它们,它们就会立即可用。
哪些类型的内容可以被预加载?
许多不同类型的内容都可以被预加载,一些主要可用的as
属性值列举如下:
audio
: 音频文件。document
: 一个将要被嵌入到<frame>
或<iframe>
内部的HTML文档。embed
: 一个将要被嵌入到<embed>
元素内部的资源。fetch
: 那些将要通过fetch和XHR请求来获取的资源,比如一个ArrayBuffer或JSON文件。font
: 字体文件。image
: 图片文件。object
: 一个将会被嵌入到<embed>
元素内的文件。script
: JavaScript文件。style
: 样式表。track
: WebVTT文件。worker
: 一个JavaScript的web worker或shared worker。video
: 视频文件。
媒体查询
<link>
元素有一个很棒的特性是它们能够接受一个media
作为属性值,这将令你能够使用响应式的预加载
跨域获取
通过添加crossorigin="anonymous"
支持跨域,对于字体文件是个特例,无论何时,字体文件都需要添加该属性
其他资源预加载机制
<link rel="prefetch">
已经被许多浏览器支持了相当长的时间,它是意图预获取一些资源,以备下一个导航/页面使用。这很好,但对当前的页面并没有什么助益。此外,浏览器会给使用prefetch
的资源一个相对较低的优先级——与使用preload
的资源相比。
查看Link prefetching FAQ可以了解更多细节。
文章为作者独立观点,不代表DLZ123立场。如有侵权,请联系我们。( 版权为作者所有,如需转载,请联系作者 )
网站运营至今,离不开小伙伴们的支持。 为了给小伙伴们提供一个互相交流的平台和资源的对接,特地开通了独立站交流群。
群里有不少运营大神,不时会分享一些运营技巧,更有一些资源收藏爱好者不时分享一些优质的学习资料。
现在可以扫码进群,备注【加群】。 ( 群完全免费,不广告不卖课!)
发表评论 取消回复