网页切图通过rel=”preload”进行内容预加载

切版网专注网页切版服务

<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>

建立您的线上前端开发部门

最高11年前端从业经验,专业只做web前端切图,只要您愿意,切版网就是您公司的前端部门。