性能方面

资源的加载与执行

<link> rel 的 preload 和 prefetch 属性值对比

html

<!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="/app.css" as="style" />
    <link rel="preload" href="/app.js" as="script" />
    <!-- 当前页面不用（可能会懒加载 or 后续页面用到） -->
    <link rel="prefetch" href="/10.sa65asss.js" />
    <!-- 当前页面要用 -->
    <link rel="stylesheet" href="/app.css" />
  </head>
  <body>
    <!-- 当前页面要用 -->
    <script src="/app.js" defer></script>
  </body>
</html>

preload 会预加载资源且不影响 HTML Parsing
区别是 prefetch 会在空闲时间加载，不会影响 http 并发数（chrome 最多只能同时请求 6 个）而浪费资源。
href 属性用在 link a 标签上，当前元素和引用资源建立联系，是并行下载资源
src 属性用在 img script iframe 上，引用资源替换当前元素，（图片不会）不是并行

<script> 的 async 和 defer 属性对比
- async defer 下载过程均不影响 HTML Parsing，但是 async 是下载完后立即执行，执行过程会阻塞 HTML Parsing

js 下载完后立即执行的意义不大，但会阻塞 HTML Parsing，影响页面呈现。一般用 defer 就好

性能方面 ​

资源的加载与执行 ​

性能方面

资源的加载与执行