网站优化Preload进行预加载的使用方法

806 阅读 0 评论 1 点赞


<link rel="stylesheet" href="style2.css">
<script src="main2.js"></script>

<link rel="preload" href="style1.css" as="style">
<link rel="preload" href="main1.js" as="script">

在这里，我们会先加载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作为属性值，这将令你能够使用响应式的预加载


<link rel="preload" href="narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="wide.png" as="image" media="(min-width: 601px)">

跨域获取

通过添加crossorigin="anonymous"支持跨域,对于字体文件是个特例,无论何时,字体文件都需要添加该属性

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

其他资源预加载机制

<link rel="prefetch"> 已经被许多浏览器支持了相当长的时间，它是意图预获取一些资源，以备下一个导航/页面使用。这很好，但对当前的页面并没有什么助益。此外，浏览器会给使用prefetch的资源一个相对较低的优先级——与使用preload的资源相比。
查看Link prefetching FAQ可以了解更多细节。

文章为作者独立观点，不代表DLZ123立场。如有侵权,请联系我们。( 版权为作者所有，如需转载，请联系作者 )

网站运营至今，离不开小伙伴们的支持。为了给小伙伴们提供一个互相交流的平台和资源的对接，特地开通了独立站交流群。群里有不少运营大神，不时会分享一些运营技巧，更有一些资源收藏爱好者不时分享一些优质的学习资料。

现在可以扫码进群，备注【加群】。 ( 群完全免费，不广告不卖课！)

点赞(1) 打赏

本文分类：建站技术
本文标签：网站优化 Preload
浏览次数：806 次浏览
发布日期：2022-07-14 16:06:57
原文链接：https://mp.weixin.qq.com/s/VzxmzL3fR0oFhhP5BE1wPQ

上一篇 > 腾讯云域名购买和域名解析教程
下一篇 > WordPress SEO优化插件：图片优化加压缩-Short Pixel

网站优化Preload进行预加载的使用方法

哪些类型的内容可以被预加载？

媒体查询

跨域获取

其他资源预加载机制

评论列表共有 0 条评论

发表评论取消回复

网站优化Preload进行预加载的使用方法

哪些类型的内容可以被预加载？

媒体查询

跨域获取

其他资源预加载机制

解决这3项基础问题独立站转化率将大幅度提高

设计用于竞价广告的网站时，你不得不知道的这几点

你网站还好吗？来来来！自诊一下吧~

【Shopify】怎么给Shopify设置自定义页面？让网站更漂亮

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复