语言►HTML

如何使用link元素预载当前页面的资源

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/06/08/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8link%E5%85%83%E7%B4%A0%E9%A2%84%E8%BD%BD%E5%BD%93%E5%89%8D%E9%A1%B5%E9%9D%A2%E7%9A%84%E8%B5%84%E6%BA%90/

摘要

本文主要讲述了：

  1. 示例
  2. MIME 类型
  3. 媒体查询
  4. 脚本化预载

正文

<link>元素可以用来预载资源，这样能让浏览器在开始渲染页面之前请求资源，从而提高性能。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="preload" href="style.css" as="style" />
    <link rel="preload" href="main.js" as="script" />
    <link rel="stylesheet" href="style.css" />
    <script src="main.js" defer></script>
  </head>
  <body></body>
</html>

在这个示例中：

  1. rel特性被设置为preload表示，表示<link>是一个预载器
  2. href特性被设置为资源的 URL
  3. as特性被设置为资源的类型，浏览器会根据资源的类型，对资源的预载顺序进行排序

MIME 类型

<link>支持type特性，type特性用于配置资源的 MIME 类型。

如果浏览器支持对应的 MIME 类型，就会进行预载。

媒体查询

<link>支持media特性，media特性用于配置媒体查询。

如果浏览器满足对应的媒体查询条件，就会进行预载。

脚本化预载

示例：

1
2
3
4
5
var preloadLink = document.createElement('link');
preloadLink.href = 'myscript.js';
preloadLink.rel = 'preload';
preloadLink.as = 'script';
document.head.appendChild(preloadLink);

此时浏览器将会预载此 JavaScript 文件，但并不会执行它。

在需要执行的时候，只需要将<script>注入 DOM 即可。就像这样：

1
2
3
var preloadedScript = document.createElement('script');
preloadedScript.src = 'myscript.js';
document.body.appendChild(preloadedScript);

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/06/08/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8link%E5%85%83%E7%B4%A0%E9%A2%84%E8%BD%BD%E5%BD%93%E5%89%8D%E9%A1%B5%E9%9D%A2%E7%9A%84%E8%B5%84%E6%BA%90/

本文对你有帮助？请支持我

支付宝
微信