使用预取和预加载是网站性能和用户体验提升的一个很好的途径,本文介绍了使用 prefetch 和 prefetch 进行预取和预加载的方法,并使用 webpack 进行实现
Link 的链接类型
<link>
标签的 rel
属性可以定义链接类型,prefetch
是其中的一种,与 href
配合使用可以预取或预加载对应资源
<link rel="prefetch" herf="URL">
preload
是另外一种类型,同样用 href 定义资源地址,但其处理预取外,还会对资源进行解析,所以还要增加属性 as,说明资源的类型
<link rel="preload" href="URL" as="MIME_TYPE">
预取资源
prefetch
表示用户在接下来的浏览中(例如在下一个页面),有可能用到对应资源,提示浏览器要在闲时获取对应资源
先新建文件夹 prefetch-preload-demo(本文所有代码将在此创建),安装相关依赖,并新建文件夹 static
mkdir prefetch-preload-demo
cd prefetch-preload-demo
npm init -y
npm i -D http-server
mkdir static
在 static 中创建 prefetch.html
, main.js
和 script.js
prefetch.html
定义了一个 rel
为 prefetch
的链接
<html>
<head>
<title>Prefetch</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="prefetch" href="script.js"&