preload和prefetch概念理解 preload 提供了一种声明式的命令，让浏览器提前加载指定资源(加载后并不执

概念理解

<!-- 使用 link 标签静态标记需要预加载的资源 -->
<link rel="preload" href="index.css" as="style">
<link rel="preload" href="index.js" as="script">

preload 提供了一种声明式的命令，让浏览器提前加载指定资源(加载后并不执行)，在需要执行的时候再执行。
prefetch 延迟加载。

特点：
同步下载所有的css或者js，然后再顺序执行。

实验

无resource-hint

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <link rel="stylesheet" href="index2.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
<p>我是p标签</p>
<script type="text/javascript" src="index.js"></script>
<script>
    sayHello();
</script>
</body>
</html>

加载顺序

顺序加载css，先index2.cs后index.css

preload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 使用 link 标签静态标记需要预加载的资源 -->
    <link rel="preload" href="index.css" as="style">
    <link rel="preload" href="index.js" as="script">

   
    <link rel="stylesheet" href="index2.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
<p>我是p标签</p>
<script type="text/javascript" src="index.js"></script>
<script>
    sayHello();
</script>
</body>
</html>

预先加载index.css和index.js，再去加载了index2.css.

prefetch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 使用 link 标签静态标记需要预加载的资源 -->
    <link rel="prefetch" href="index.css" as="style">
    <link rel="prefetch" href="index.js" as="script">


    <link rel="stylesheet" href="index2.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
<p>我是p标签</p>
<script type="text/javascript" src="index.js"></script>
<script>
    sayHello();
</script>
</body>
</html>

prefetch空闲时下载，所以在正常的index2.css后面加载。第一个index.css 只下载不解析，后面用到了index.css后，从缓存里取并解析。