<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>
文章为原创或者来自于互联网,转载请注明来源,如果文章有侵权请联系,我们会及时删除。
发布时间:2022年08月27日 标签:echarts
UEditor是国内比较主流的编辑插件,是百度出品,不得不说百度虽然也做过很多产品最后放弃,不过ueditor […]
发布时间:2022年08月27日
我们在vue中有时候为给标签加一些特有的属性, 当我们在标签上触发了事件之后, 就可以在 event 对象上面 […]