切版网（2013~2023）
http://qieban.cn
做完设计，找切版网
QQ:6135833
微信：dingxiangming82
2022年08月27日
网页切图通过rel=”preload”进行内容预加载
本文就“网页切图通过rel=”preload”进行内容预加载”展开讨论，作者切版网，发布于2022年08月27日 全文共729个字，预计阅读时长2分25秒。
<link> 元素的 rel 属性的属性值preload能够让你在你的HTML页面中 <head>元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。本文提供了一个如何有效使用preload机制的基本说明。
基础部分
标签最常见的应用情形就是被用来加载CSS文件，进而装饰你的页面：
<link rel=”stylesheet” href=”styles/main.css”>
但是在这里，我们将使用preload作为rel属性的属性值。这种做法将把<link> 元素塞入一个预加载器中，这个预加载器也将用于其他我们所需要的，各种各样的，任意类型的资源。为了完成基本的配置，你还需要通过 href和as 属性指定需要被预加载资源的资源路径及其类型。
一个简单的例子可能看起来像下面这样
<head>
<meta charset=”utf-8″>
<title>JS and CSS preload example</title>
<link rel=”preload” href=”style.css” as=”style”>
<link rel=”preload” href=”main.js” as=”script”>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>bouncing balls</h1>
<canvas></canvas>
<script src=”main.js”></script>
</body>
文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。
更多相关文章
UEditor如何新增自定义按钮方法
发布时间:2022年08月27日 标签：echarts
UEditor是国内比较主流的编辑插件，是百度出品，不得不说百度虽然也做过很多产品最后放弃，不过ueditor […]
vue 在标签中使用(data-XXX)自定义属性并获取的方法
发布时间:2022年08月27日
我们在vue中有时候为给标签加一些特有的属性， 当我们在标签上触发了事件之后， 就可以在 event 对象上面 […]
伪类after before使用阿里的iconfont字体方法
发布时间:2022年08月27日
so!问题来了！为什么只能用一些预定义好的图标呢？阿里的图标为什么不能用啊！ 今天一个偶然的机会，让我找到了解 […]
