资源预加载preload、资源预读取prefetch
2020-03-18 本文已影响0人
Bbang呀_
preload
作用
preload 提供了一种声明式的命令，让浏览器提前加载指定资源(加载后并不执行)，需要执行时再执行
这样做的好处在于：
1、将加载和执行分离开，不阻塞渲染和document的onload事件
2、提前加载指定资源，不再出现依赖的font字体隔了一段时间才刷出的情况
使用
1.使用link标签
简单的例子：
<head>
<meta charset="utf-8">
<title>JS and CSS preload example</title>
<link rel="preload" href="style.css" as="style" crossorigin="anonymous">
<link rel="preload" href="main.js" as="script" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>bouncing balls</h1>
<canvas></canvas>
<script src="main.js"></script>
</body>
其中：
预加载：
<link rel="preload" href="main.js" as="script" crossorigin="anonymous">
实际执行：
<script src="main.js"></script>
-
rel="preload"：这种做法将把<link>元素塞入一个预加载器中，这个预加载器也将用于其他我们所需要的，各种各样的，任意类型的资源。 -
href：被预加载资源的资源路径 -
as：指定将要预加载的内容的类型，将使得浏览器能够更精确地优化资源加载优先级。 -
跨域获取需设置
crossorigin属性:crossorigin="anonymous"- 如果你需要获取的是字体文件，那么即使是非跨域的情况下，也需要应用这一属性。
2.动态创建标签
除了使用link标签静态标记的方式来预加载资源之外，还可以以脚本化的方式动态创建标签，执行这些预加载操作
预加载：
var preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);
执行：
var preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";
document.body.appendChild(preloadedScript);
注意
使用 preload 后，不管资源是否使用都将提前加载。若不确定资源是必定会加载的，则不要错误使用 preload，以免本末导致，给页面带来更沉重的负担
没有用到的 preload 资源在 Chrome 的 console 里会在 onload 事件 3s 后发生警告
prefetch
<link rel=“prefetch”>
它的作用是告诉浏览器加载下一页面可能会用到的资源，注意，是下一页面，而不是当前页面。因此该方法的加载优先级非常低，也就是说该方式的作用是加速下一个页面的加载速度
- preload 是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源
- prefetch 是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源
